Synergizing Ricing Environments: The New Theme Editor

tl;dr: The old theme editor was SHIT and is now replaced by a simple text area for additional css rules.

Here are some examples:

The humble ricer:

#header {
  background-image: -moz-linear-gradient(center top, #787d94, #8c92ac);
  background-image: -webkit-linear-gradient(top, #787d94, #8c92ac);
  background-image: -o-linear-gradient(top, #787d94, #8c92ac);
}

.button {
  background-image: -moz-linear-gradient(center top, #636363, #525252);
  background-image: -webkit-linear-gradient(top, #636363, #525252);
  background-image: -o-linear-gradient(top, #636363, #525252);
}

.button:hover {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.button:hover, .active {
  background-image: -moz-linear-gradient(center top, #ffa500, #e89700) !important;
  background-image: -webkit-linear-gradient(top, #ffa500, #e89700) !important;
  background-image: -o-linear-gradient(top, #ffa500, #e89700) !important;
}

.thumb {
  -moz-transition: border-color 0.2s ease 0s;
  -webkit-transition: border-color 0.2s ease 0s;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.hl, .pinned {
  -moz-animation: tilt 2s ease-in-out infinite alternate;
  -webkit-animation: tilt 2s ease-in-out infinite alternate;
}

@-moz-keyframes tilt {
  0% { -moz-transform: rotate(-3deg) }
  100% { -moz-transform: rotate(3deg) }
}

@-webkit-keyframes tilt {
  0% { -webkit-transform: rotate(-3deg) }
  100% { -webkit-transform: rotate(3deg) }
}

The /g/ ricer:

body {
  background:
    url('http://i.imgur.com/LdALg.png') no-repeat bottom left fixed,
    url('http://i.imgur.com/gXtij.png') no-repeat top left fixed,
    url('http://i.imgur.com/zP3Ze.png') no-repeat bottom right fixed;
  background-color: #8C92AC;
}

#header {
  width: 100%;
  position: fixed;
  padding: 0;
}

#ctrl {
  width: 100%;
  position: fixed;
  top: 100px;
}

#settings { width: auto; padding-right: 20px }

#threads {
  position: relative;
  top: 150px;
}

.extended-large, .large { width: 43000px }

.extended-small, .small { width: 22500px }

#footer, #totop { display: none }

The Enterprise ricer:

body {
  background: #fff;
  color: #222;
}

hr {  border: none; border-bottom: 1px solid #E5E5E5; }

input, textarea { border: 1px solid #E5E5E5 }
.thumb, .panel { border: none }

#ctrl {
  color: #999999;
  padding: 0 10px;
  margin-top: 5px;
  border-bottom: 1px solid #E5E5E5;
}

#header {
  background: #F5F5F5;
  border-bottom: 1px solid #E5E5E5;
  padding-bottom: 10px;
}

#totop { border-bottom: 1px solid #E5E5E5 }

.button {
  border-radius: 2px 2px 2px 2px;
  color: #444444;
  background-color: #F5F5F5;
  background-image: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1);
  background-image: -webkit-linear-gradient(center top , #F5F5F5, #F1F1F1);
  background-image: -o-linear-gradient(center top , #F5F5F5, #F1F1F1);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.button:hover, .active {
  color: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  background-color: #4D90FE;
  background-image: -moz-linear-gradient(center top , #4D90FE, #4787ED);
  background-image: -webkit-linear-gradient(center top , #4D90FE, #4787ED);
  background-image: -o-linear-gradient(center top , #4D90FE, #4787ED);
  border: 1px solid #3079ED;
}

.active {
  color: #fff !important;
  background: #4D90FE !important;
}

.panel { background: #F5F5F5 }

/g/ ricers

You got it wrong.
Having your girlfriend as background isn't enough, you also need a DARK AS MY SOUL color theme.

Is it possible to remove the pig disgusting shadow on highlighted threads?
It renders awfully in Chrome.

>>3
.hl-high, .hl-low { text-shadow: none }

I'll just leave it here:

body {
  background: #EEF8F0;
  color: #364041;
}

#ctrl, #footer {
  border-bottom: 2px solid #6A836F;
}

hr {
  border-top: 1px solid #6A836F;
}

#header .button {
  -moz-transition: all 0.1s linear 0s;
  -webkit-transition: all 0.1s linear 0s;
  box-shadow: none;
  background-color: #E6E6E6;
  background-repeat: no-repeat;
  color: #333333;
  background-image: -moz-linear-gradient(center top , #FFFFFF, #FFFFFF 25%, #E6E6E6);
  background-image: -webkit-linear-gradient(top , #FFFFFF, #FFFFFF 25%, #E6E6E6);
  background-image: -o-linear-gradient(top , #FFFFFF, #FFFFFF 25%, #E6E6E6);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}

#header .button:hover {
  color: #333333;
  background-position: 0 -15px;
}

.button {
  box-shadow: none;
  color: #EEF8F0;
  background-color: #6A836F;
  background-image: -moz-linear-gradient(center top, #6A836F, #117743);
  background-image: -webkit-linear-gradient(top, #6A836F, #117743);
  background-image: -o-linear-gradient(top, #6A836F, #117743);
}

.button:hover {
  color: #EEF8F0;
  background-color: #FE57A1;
  background-image: -moz-linear-gradient(center top, #FE57A1, #cc4582);
  background-image: -webkit-linear-gradient(top, #FE57A1, #cc4582);
  background-image: -o-linear-gradient(top, #FE57A1, #cc4582);
}

.active {
  color: #EEF8F0 !important;
  background-color: #FE57A1 !important;
  background-image: -moz-linear-gradient(center top, #FE57A1, #cc4582) !important;
  background-image: -webkit-linear-gradient(top, #FE57A1, #cc4582) !important;
  background-image: -o-linear-gradient(top, #FE57A1, #cc4582) !important;
}

.thumb:hover { border-color: #FE57A1; }

#header {
  background: #6A836F;
  color: #F5F5F5;
  border-bottom: 2px solid #000000;
  padding-bottom: 20px;
}

.teaser::-moz-selection {
    background: none repeat scroll 0 0 #FE57A1;
    color: #FFFFFF;
    text-shadow: none;
}

>>5
Thanks Woxxy, the theme is working perfectly, no virus (: