[Tutorial] Mudar cor no fórum

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

avatar
Admin
Administrador
Tempo Online : 176d 8h 9m 37s
Mensagens : 693
Reputação : 3
Ver perfil do usuário http://bestweb.forumais.com

MensagemAdmin em Sex Set 30, 2016 3:07 pm

Informações:
Autor:
Desconhecido
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:

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

Cria uma conta ou logue para postar uma mensagem.

Você precisa ser um membro, para poder postar uma resposta.

Criar conta

Participe de nossa comunidade, basta se registrar. É Fácil!


Criar uma conta

Logar

Já tem uma conta? Sem problemas, Logue agora.


Logar-se

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum