Aquela barra branca por cima da barra verde do Sapo Campus fica mesmo feia em alguns blogs!!

Fica sim senhor, mas está lá para garantir que independentemente do template em que a barra é aplicada, os links que se encontram na mesma são sempre legiveis.

Por isso mesmo esta dica exige um grande nível de responsabilidade e compromisso por parte de quem a utilizar!

 

A primeira parte da dica que se segue permite retirar o branco por cima da barra de topo, mostrando o fundo que vocês aplicaram no template.

A segunda parte serve para redefinir a cor dos links, de modo a garantir que estes são sempre legiveis! 

 

body div#campusBarTop.blogs div#useractions .topLinks 

{

background: transparent;

}

 

body div#wrapperMenuTopo p, 

body div#wrapperMenuTopo span, 

body div#wrapperMenuTopo a, 

body div#wrapperMenuTopo li

{

color: a cor que quiserem desde que tenha bom contraste com o fundo!

}

 

O segredo aqui foi acrescentar a tag de body antes dos selectores, tornando a nossa declaração mais especifica do que a declaração da barra.

 

Para saber mais sobre este assunto podem consultar:

http://css-tricks.com/specifics-on-css-specificity/

http://www.nickyeoman.com/blog/css/79-css-specificity

http://reference.sitepoint.com/css/specificity 

http://blogs.sitepoint.com/the-great-specificity-swindle/

Espero que esta dica tenha sido útil e que faça os vossos templates ficarem ainda mais bonitos 

 

publicado por jorge-braz às 19:13