~Clair-Bak

Clair-Bak
[s t a r k /]
Nome: Aeternus
Status: Usuário
Sexo: Feminino
Localização: Goiania, Goiás, Brasil
Aniversário: 19 de Fevereiro
Idade: 22
Cadastro:

Sobre barra de rolagem e styles sendo excluídos


Postado

Sobre barra de rolagem e styles sendo excluídos

Olá, povo da Terra!

Nos últimos meses, nos meus "passeios" pelo personalizar, tenho me deparado com uma questão que tem feito com que muitos styles sejam excluídos: o bendito menu esquerdo.
Sim, meus queridos, aquele menuzinho que fica oculto do lado esquerdo e que aparece quando você clica aqui >

Creio que nem todos saibam, mas esse menu não pode ser alterado. Nada, nadinha, nothing, nenhum pouquinho dele pode ser mudado. Acontece que o código utilizado por muitos, para modificar as barras de rolagem no Google Chrome, causa uma alteração na barra de rolagem desse menu e essa alteração, por sua vez, pode gerar a exclusão do style ma-ra-vi-lho-so que você demorou horrores para conseguir terminar. Veja melhor sobre o que estou falando:


Barra de rolagem padrão do site, no Google Chrome. Nenhuma alteração feita. A barra é assim, deve continuar assim:


Barra de rolagem alterada, está fora das regras. Style correndo risco de ser excluído:



Enfim, passado essa primeira parte das explicações, digo-lhes o que fazer para que essa alteração citada não ocorra. É bem simples, na verdade. Sabe o código que você utiliza para alterar a tal barra? Basta adicionar a palavra body no começo de cada linha dele e tudo estará ok. Para deixar mais claro, utilizarei como exemplo o código que tenho em meus styles:

/***************************************************** rolagem **/
body::-webkit-scrollbar { width: 6px; height: 6px/}
body::-webkit-scrollbar-button:start:decrement,
body::-webkit-scrollbar-button:end:increment { display: block;}
body::-webkit-scrollbar-button:vertical:start:increment,
body::-webkit-scrollbar-button:vertical:end:decrement { display: none;}

/***************************************************** rolagem penultima **/
body::-webkit-scrollbar-button:vertical:increment { background-color: #677180; }

/* Place The scroll up button at the up */
body::-webkit-scrollbar-button:vertical:decrement { background-color: #677180;}

/***************************************************** fundo rolagem penultima **/
body::-webkit-scrollbar-track:vertical {background-color: #fff;}

/***************************************************** fundo rolagem acima parada **/
body::-webkit-scrollbar-track-piece {background-color: #fff;}
body::-webkit-scrollbar-track-piece:vertical:start {border: 2px solid #747ea2;}

/***************************************************** fundo rolagem parada **/
body::-webkit-scrollbar-thumb:vertical { height: 30px;background-color: #848f9f;}
body::-webkit-scrollbar{ height: auto; width: 6px; background-color: #848f9f; }

/***************************************************** fundo rolagem ultima **/
body::-webkit-scrollbar-corner:vertical { background-color: #623c48;}



Você perceberá também que, ao adicionar o body, as barras de rolagem do menu direito voltarão ao padrão do site. Basta que você adicione isso, no final do código que você já tem:

.boxMenuDireito ::-webkit-scrollbar{background:#f5f5f5;width:4px;height:5px;}
.boxMenuDireito ::-webkit-scrollbar-thumb{background-color:#848f9f;}
.boxMenuDireito ::-webkit-scrollbar-button,.boxMenuDireito ::-webkit-scrollbar-corner{background-color:#677180;}


As partes que começam em body alteram as barras de rolagem do corpo do style e as que começam em .boxMenuDireito alteram apenas as barras de rolagem dos menus do lado direito.

E, por último, para deixar mais explicado ainda, um print do código completo no bloco de notas:



Bom, acho que é só. Acho que não sou muito boa com explicações, mas juro que tentei explicar da melhor maneira possível. Se ainda restar alguma dúvida, entre em contato por MP, comentário, sei lá, o que você preferir. Eu sou legal, te respondo rapidinho (quer dizer, nem tão rápido assim e.e) e juro que não mordo.


Gostou da Jornal? Compartilhe!

Gostou? Deixe seu Comentário!

Muitos usuários deixam de postar por falta de comentários, estimule o trabalho deles, deixando um comentário.

Para comentar e incentivar o autor, Cadastre-se ou Acesse sua Conta.


Carregando...