17.9.12

Mudar a cor da seleção


Já viu que a seleção aqui do MCD tem uma cor diferente? Não? Selecione só esse primeiro parágrafo para você ver... (não é mais por mudanças no layout, retirei esse código)
O padrão do Blogger é a seleção ser cinza. Tá certo que combina com qualquer template, mas venhamos e convenhamos é meio anti-fashion... Com o código que eu vou colocar a seguir (que é super-simples, tanto que eu já vi ensinando em inúmeros blogs) você vai poder colocar no seu blog a seleção com a cor que você desejar, no fundo e na fonte...
Eu vou ensinar o jeito de colocar pelo Designer do Modelo, se você mexe com o HTML do template, basta colar o código antes de ]]></b:skin>

No antigo painel, vá no Designer do Modelo, que fica na guia Design> Designer do Modelo. No novo painel, ele fica na guia Modelo> Personalizar (o botãozinho laranja abaixo do seu template atual). Ao abrir completamente o Designer do Modelo (tem que aparecer uma visualização do seu template atual abaixo), clique na guia Avançado (última guia)> Adicionar CSS (última opção da lista), vai abrir uma caixa branca onde está escrito em cinza: "Adicionar o CSS aqui para substituir estilos existentes" (a menos que você já tenha colocado algum código, então vai aparecer o código que você colocou, cole o código embaixo dele). Aqui nós vamos colar o seguinte código:


*::-moz-selection {
background: mediumvioletred;
color: white; }

*::selection {
background: mediumvioletred;
color: white; }

O código que coloquei aqui é para as cores iguais as do DSM (rosa com fonte branca). Para mudar a cor do fundo, mude a parte que está em rosa para a cor que você quer no fundo (em Hexadecimal ou em Named Colors), e a que está em negrito para a cor que você deseja na fonte. Por exemplo, se eu quero um fundo preto com a fonte branca, posso colocar o código assim:

*::-moz-selection {
background: black;
color: white; }


*::selection {
background: black;
color: white; }

Ou assim:
*::-moz-selection {
background: #000000;
color: #FFFFFF; }


*::selection {
background: #000000;
color: #FFFFFF; }

Para ver mais cores, clique neste link para ver uma tabela com as principais cores em Hexadecimal e em Named Colors.

A seleção não vai aparecer na visualização. Então clique em "Aplicar ao Blog", depois vá normalmente no seu blog e selecione qualquer texto para ver se deu certo.

Se você ainda tem dúvidas sobre o assunto ou gostou, deixe um comentário!!!

Nenhum comentário:

Postar um comentário