Informações:
Autor: Sliw
Funcionalidade: Todas as Versões

---

Acesse:

Painel de Controle ☛ Modulos ☛ Html e Javascript ☛ Gestão dos codigos Javascript

E Crie um novo Javascript com investimento em todas as paginas com esse codigo:

Código:


jQuery(function () {
  jQuery("#pun-head").prepend('<img src="http://i74.servimg.com/u/f74/17/49/01/62/themee10.png" alt="Change background image" title="Trocar a imagem de fundo" id="nav_background" />');
  jQuery("#emptyidleft").prepend('<div id="toggle_background" style="display: none;"><div id="editorPrimary" class="themeBoxes" style="display: block"><span id="bg1" style="background-color: #b22b2b;" data-main="b22b2b">Vermelho</span><span id="bg2" style="background-color: #cea128;" data-main="#cea128">Banana</span><span id="bg3" style="background-color: #353F3F;" data-main="#353F3F">Escurecido</span><span id="bg4" style="background-image: -webkit-linear-gradient(#e7e7e7,#E2E2E2) !important;background-image: -moz-linear-gradient(#e7e7e7,#E2E2E2) !important;background-image: -khtml-linear-gradient(#e7e7e7,#E2E2E2) !important;background-image: -o-linear-gradient(#e7e7e7,#E2E2E2) !important;background-image: -ms-linear-gradient(#e7e7e7,#E2E2E2) !important;color:#727272 !important;" data-main="#e7e7e7,#E2E2E2">Normal</span></div></div>');
  jQuery("#editorPrimary span").click(function () {
      jQuery(".main-head").removeClass("bg1 bg2 bg3 bg4 bg_custom").addClass(jQuery(this).attr("id"));
      my_setcookie("editorPrimary", jQuery(this).attr("id"), true);
  });

  jQuery("#custom_submit").click(function () {
      var urlbg = jQuery("#custom_input").val();
      jQuery(".main-head").removeClass("bg1 bg2 bg3 bg4 bg_custom").addClass("bg_custom").css("background-image", "url('" + urlbg + "')");
      my_setcookie("editorPrimary", urlbg, true);
  });

  jQuery("#nav_background").click(function () {
      jQuery("#toggle_background").slideToggle()
  });

  if (my_getcookie("editorPrimary") != "") {
      if (my_getcookie("editorPrimary").length > 4) {
        jQuery(".main-head").addClass("bg_custom").css("background-image", "url(" + my_getcookie("editorPrimary") + ")");
      } else {
        jQuery(".main-head").addClass(my_getcookie("editorPrimary"))
      }
  }
});

Agora Salve.

Após isso, será necessário apenas um CSS para que possa funcionar.

Acesse:

Painel de Controle ☛ Visualização ☛ Imagens e Cores ☛ Cores ☛ Folha de Estilo

Adicione esse Codigo de CSS em sua folha de estilo:

Código:


/* ---- Mudar Background das Categorias ---- */
#themeEditor{
background:#222;
-webkit-box-shadow:inset rgba(0,0,0,0.9) 0px 0px 40px;
-moz-box-shadow:inset rgba(0,0,0,0.9) 0px 0px 40px;
box-shadow:inset rgba(0,0,0,0.9) 0px 0px 40px;
display:none
}#themeEditor.wrapper{
padding:40px 0;
text-align:center
}
#themeEditor ul#themeTabs{
display:block;
list-style:none;
position:relative;
z-index:10;
height:40px
}

#themeEditor ul#themeTabs li{
display:inline-block;
line-height:39px;
padding:1px 20px 0px 20px;
margin:0 1px;
color:#bfbfbf;
cursor:pointer
}

#themeEditor ul#themeTabs li:hover{color:#fff}

#themeEditor ul#themeTabs li.active{
border:1px solid #585858;
border-bottom:0;
padding-top:0;
margin:0;
-moz-border-radius:4px 4px 0px 0px;
border-radius:4px 4px 0px 0px;
background:#222;
background-image:-moz-linear-gradient(top, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.04) 100%);
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.07)), color-stop(100%,rgba(255,255,255,0.04)));
background-image:-webkit-linear-gradient(top, rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.04) 100%);
background-image:-o-linear-gradient(top, rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.04) 100%);
background-image:-ms-linear-gradient(top, rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.04) 100%);
background-image:linear-gradient(to bottom, rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.04) 100%);
color:#fff
}

#themeEditor.themeBoxes{
border-top:1px solid #585858;
position:relative;
top:-1px;
z-index:5;
padding-top:10px;
border-radius:10px;
background-image:-moz-linear-gradient(top, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 100%);
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.04)), color-stop(100%,rgba(255,255,255,0)));
background-image:-webkit-linear-gradient(top, rgba(255,255,255,0.04) 0%,rgba(255,255,255,0) 100%);
background-image:-o-linear-gradient(top, rgba(255,255,255,0.04) 0%,rgba(255,255,255,0) 100%);
background-image:-ms-linear-gradient(top, rgba(255,255,255,0.04) 0%,rgba(255,255,255,0) 100%);
background-image:linear-gradient(to bottom, rgba(255,255,255,0.04) 0%,rgba(255,255,255,0) 100%)
}

#themeEditor .themeBoxes span{
display:inline-block;
cursor:pointer;
line-height:40px;
height:40px;
width:7%;
max-width:100px;
min-width:40px;
overflow:hidden;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
-moz-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
background-image:-moz-linear-gradient(top, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.05)), color-stop(100%,rgba(255,255,255,0)));
background-image:-webkit-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0) 100%);
background-image:-o-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0) 100%);
background-image:-ms-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0) 100%);
background-image:linear-gradient(to bottom, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0) 100%);
color:#fff;
text-shadow:rgba(0,0,0,0.3) 0px -1px 0px;
margin:0 0.2%
}

#themeEditor .themeBoxes span:hover{
-webkit-box-shadow:inset rgba(255,255,255,0.1) 0px 100px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
-moz-box-shadow:inset rgba(255,255,255,0.1) 0px 100px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
box-shadow:inset rgba(255,255,255,0.1) 0px 100px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px
}


        #editorPrimary {
            background-color: rgba(0,0,0,0.8) !important;
            box-shadow: 0 0 10px rgba(0,0,0,0.8) inset;
            color: #FFF;
            position: relative;
  padding-top: 15px;
  padding-left: 18px;
  padding-bottom: 60px;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  -khtml-border-radius: 6px;
  margin-right: 300px;
   
}

        #editorPrimary span {
            -moz-transition: all .2s ease-in-out 0;
            background: none no-repeat scroll 50% 50% #000;
            border-radius: 3px;
            box-shadow: 0 1px 7px rgba(10, 10, 10, 0.33) inset, 0 1px 0 rgba(255,255,255,0.05), 0 0 1px rgba(255,255,255,0.35);
            cursor: pointer;
            display: inline-table;
            float: left;
            height: 25px;
            margin-right: 10px;
            width: 50px;
      text-align: center;
      padding: 9px 8px 1px;
  font-size: 12px
        }

        #editorPrimary span:hover {
            box-shadow: 0 1px 2px #000 inset, 0 1px 0 rgba(255,255,255,0.05), 0 0 1px rgba(255,255,255,0.35);
        }

        #nav_background {
            background-color: rgba(0, 0, 0, 0.18);
            border: 1px solid rgba(68, 68, 68, 0)!important;
            border-radius: 12px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  -o-border-radius: 12px;
  -ms-border-radius: 12px;
  -khtml-border-radius: 12px;
            cursor: pointer;
            float: right;
            padding: 7px;
  width: 26px;
  height: 26px;
  margin-right: 25px;
  margin-top: 8px;
  margin-bottom: 5px;
        }

        #nav_background:hover {
            opacity: 0.7;
        }

        #nav_background:active {
            background-color: rgba(0, 0, 0, 0.03);
        }
        /* Miniaturas (Vista Previa) */


#bg1 {
background-image:-moz-linear-gradient(top, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.05)), color-stop(100%,rgba(255,255,255,0)));
background-image:-webkit-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0) 100%);
background-image:-o-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0) 100%);
background-image:-ms-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0) 100%);
background-image:linear-gradient(to bottom, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0) 100%);
color:#fff;
        }


#bg2 {
background-image:-moz-linear-gradient(top, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.05)), color-stop(100%,rgba(255,255,255,0)));
background-image:-webkit-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0) 100%);
background-image:-o-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0) 100%);
background-image:-ms-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0) 100%);
background-image:linear-gradient(to bottom, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0) 100%);
color:#fff;       
}

#bg3 {
background-image:-moz-linear-gradient(top, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.05)), color-stop(100%,rgba(255,255,255,0)));
background-image:-webkit-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0) 100%);
background-image:-o-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0) 100%);
background-image:-ms-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0) 100%);
background-image:linear-gradient(to bottom, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0) 100%);
color:#fff;     
}

#bg4 {
background-image:-moz-linear-gradient(top, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.05)), color-stop(100%,rgba(255,255,255,0)));
background-image:-webkit-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0) 100%);
background-image:-o-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0) 100%);
background-image:-ms-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0) 100%);
background-image:linear-gradient(to bottom, rgba(255,255,255,0.05) 0%,rgba(255,255,255,0) 100%);
color:#fff;
        }
        /* Input */
        #custom_url {
            clear: left;
            padding-top: 10px;
            text-align: center;
        }

        #custom_input {
            background: none repeat scroll 0 0 rgba(0,0,0,0.5);
            border: 0 none;
            border-radius: 4px 4px 4px 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.75) inset, 0 1px 0 rgba(255,255,255,0.15);
            color: #FFF;
            font-size: 20px;
            height: 45px;
            margin-left: -10px;
            margin-right: 6px;
            white-space: nowrap;
            width: 770px;
            padding: 0 10px 0 0;
        }

        #custom_submit {
            background: url() repeat-x scroll 0 0 rgba(197,206,213,0.4);
            border-radius: 4px 4px 4px 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.6);
            color: #F1F1F1;
            cursor: pointer;
            display: inline-block;
            font-size: 20px;
            font-weight: 390;
            line-height: 35px;
            text-shadow: 0 -1px 0 #4C5057;
            padding: 0 10px;
        }
        /* Backgrounds */
        .bg1 {
background-color: #b22b2b;
background-image:-webkit-linear-gradient(#D11A1A,#b22b2b) !important; /* alternativa #960006# */
background-image:-moz-linear-gradient(#D11A1A,#b22b2b) !important;
background-image:-ms-linear-gradient(#D11A1A,#b22b2b) !important;
background-image:-o-linear-gradient(#D11A1A,#b22b2b) !important;
color:#fff !important;
        }

        .bg2 {
  background-color: #BE9525;
background-image:-webkit-linear-gradient(#cea128,#BE9525) !important;
background-image:-moz-linear-gradient(#cea128,#BE9525) !important;
background-image:-ms-linear-gradient(#cea128,#BE9525) !important;
background-image:-o-linear-gradient(#cea128,#BE9525) !important;
color:#fff !important;
        }

        .bg3 {
background-color: #353F3F;
background-image:-webkit-linear-gradient(#485555,#353F3F) !important;
background-image:-moz-linear-gradient(#485555,#353F3F) !important;
background-image:-ms-linear-gradient(#485555,#353F3F) !important;
background-image:-o-linear-gradient(#485555,#353F3F) !important;
color:#fff !important;
        }

        .bg4 {
background: #e7e7e7 url('http://www.brasil-nl.com.br/forum/public/style_images/splatts/highlight.png') repeat-x 0 0 !important;
background-image:-webkit-linear-gradient(#e7e7e7,#E2E2E2) !important;
background-image:-moz-linear-gradient(#e7e7e7,#E2E2E2) !important;
background-image:-ms-linear-gradient(#e7e7e7,#E2E2E2) !important;
background-image:-o-linear-gradient(#e7e7e7,#E2E2E2) !important;
color:#727272 !important;
        }
        .bg_custom {
            background-attachment: fixed;
            background-color: #000;
            background-repeat: repeat;
        }
        /* -----------------Mudar Background das Categorias-----------------*/

Resultado: