Welcome

Welcome

Bem vindo ao Fanfiction World

Bem vindo ao Fanfiction World

quarta-feira, 23 de abril de 2014

Como mudar a barrinha de rolagem e as barrinhas de buscas em um Style

Hello lindas <3


Mil desculpa pela demora, é que na verdade eu estava parada pro que eu estava esperando um tema bom aparecer, e bom, como sou viciada em Style, esse tutorial será sobre isso, bem ensinarei uma coisa nova sobre eles, que muitos ainda não sabem, então acho que isso perdoa minha demora neeh!!



Muita gente ainda não sabe, mas algumas coisas a mais pode ser mudada nos css, e fica bem legal, eu vou ensinar hj, como muda a cor do rolamento do site, digo da barrinha ao lado direito do site, e aquela barrinha que fica mais ou menos assim "adicionar como amigo", "observar usuário" etc, que nos style de antes que eu ensinei fazer ficava branco, certo, vou mostrar  que é:




O procedimento é fácil, primeiro começaremos pela barrinha de rolamento:





É fácil pro que você não vai mudar muita coisa no html do css, você vai acrescentar um código, e o primeiro código que é o de mudar essa barrinha é esse:



/***************************************************** rolagem **/ 
::-webkit-scrollbar { width: 10px; height: 16px/} 
::-webkit-scrollbar-button:start:decrement, 
::-webkit-scrollbar-button:end:increment { display: block;} 
::-webkit-scrollbar-button:vertical:start:increment, 
::-webkit-scrollbar-button:vertical:end:decrement { display: none;} 
/***************************************************** rolagem penultima **/ 
::-webkit-scrollbar-button:vertical:increment { background-color: #000000; } 
/* Place The scroll up button at the up */ 
::-webkit-scrollbar-button:vertical:decrement { background-color: #000000;} 
/***************************************************** fundo rolagem penultima **/ 
::-webkit-scrollbar-track:vertical {background-color: #000000;} 
/***************************************************** fundo rolagem acima parada **/ 
::-webkit-scrollbar-track-piece {background-color: #000000;} 
::-webkit-scrollbar-track-piece:vertical:start {border: 1px solid #000000;} 
/***************************************************** fundo rolagem parada **/ 
::-webkit-scrollbar-thumb:vertical { height: 50px;background-color: #000000;} 
/***************************************************** fundo rolagem ultima **/ 
::-webkit-scrollbar-corner:vertical { background-color: #000000;}    



Esse codigo será acrescentado bem no comecinho do html, sendo assim embaixo da frase "estilo de todo o site", lembrando que você naum vai apagar nada,  vai só acrescentar, tipo vc vai achar a frase"estilo de todo o site" e vai dar um espaço embaixo dela, seprando ela do "body" e vai acrescentar esse codigo ai, tipo assim:



As cores a ser mudada serão somente essas que estão grifadas de vermelho, mexeremos apenas isso nesse código, visando que eu usei a cor #006400 ai vc coloca a que você quer, mas menos preto. Então você vai salvar e pronto vai mudar:





Agora faremos, as barrinhas ali, que vai ser no mesmo jeito desse da rolagem ai, o codigo usado será esse:

#subnav .btn {
background: #000000 !important;
border-radius: 0px !important;
text-shadow: #000000 1px 1px 1px;
text-align:center;
}

#meio .btn {
background: #000000 !important;
border-radius: 0px !important;
text-shadow: #000000 1px 1px 1px;
text-align:center;


Esse código será acrescentado aonde está a frase "estilo do menu direito do site", você vai na frase e fazer o mesmo do de cima, dar um espaço na frase e o que vem debaixo tipo:



E então vai colocar o código ai, que vai ficar assim:



E novamente você vai substituir apenas onde está grifado de vermelho, ou seja apenas duas cor que eu usei a #006400 use a que vc deseja, mas não o preto, então você vai salvar, lembra que essa barrinha não dá para ver ela no modelo, só dá para ver quando alguem ou você aplica o site, mas eu fiz um print de um que eu já tenho pronto aqui, então ficará assim:



haha e está ai mais uma cisa para personalizar seu style, é fácil e rápido, então o resto do html você faz do jeito normal mesmo que eu já ensinei aqui e creio que vocês já saibam e se não saibam procurei ali na barra de procura do site, por tutorial, enfim é isso gente, espero que novamente eu tenha ajudado!!! 

Até a proxima :*








Bjs no core <3


Um comentário: