Dicas de CSS no Joomla
Pessoal vou colocar algumas dicas de css para melhorar a aparência de algumas coisinhas no joomla.
Pra quem sabe css isso não importa muito, pois são técnicas já utilizadas na construção de um layout, porém para quem tem pouco conhecimento de css, acredito que será algo que ajude.
Vamos tranformar os links "leia mais" ou o botão "[ voltar ]" numa imagem com técnicas de css.
Primeiramente o botão voltar:
Esta é a renderização do botão voltar do joomla.
<div class="back_button"> <a href='javascript:history.go(-1)'> [Voltar]</a></div>
Isto é default, agora vamos trocar o valor por uma imagem, utilizando css.
Aplique o seguinte css:
Agora veremos como fica o botão "Leia mais"
Esta é a renderização do botão leia-mais no joomla.
<a href="#" class="readon" title="title"> Leia mais...</a>
Agora vamos ver como fica o css para transformar o link numa imagem.
Por favor se encontrarem algum erro reportem nos comentários do blog pra que eu possa arrumar,
.. thanks.
Pra quem sabe css isso não importa muito, pois são técnicas já utilizadas na construção de um layout, porém para quem tem pouco conhecimento de css, acredito que será algo que ajude.
Vamos tranformar os links "leia mais" ou o botão "[ voltar ]" numa imagem com técnicas de css.
Primeiramente o botão voltar:
Esta é a renderização do botão voltar do joomla.
<div class="back_button"> <a href='javascript:history.go(-1)'> [Voltar]</a></div>
Isto é default, agora vamos trocar o valor por uma imagem, utilizando css.
Aplique o seguinte css:
div.back_button{
background:url(../images/bt_voltar.gif) no-repeat;
height:20px; overflow:hidden;
width:55px;
}
div.back_button a{
display: block;
height: 98px;
text-indent: -50000em;
}
background:url(../images/bt_voltar.gif) no-repeat;
height:20px; overflow:hidden;
width:55px;
}
div.back_button a{
display: block;
height: 98px;
text-indent: -50000em;
}
Agora veremos como fica o botão "Leia mais"
Esta é a renderização do botão leia-mais no joomla.
<a href="#" class="readon" title="title"> Leia mais...</a>
Agora vamos ver como fica o css para transformar o link numa imagem.
.readon{
background:url(../images/nome da sua imagem) no-repeat;
display:block;
height:17px;
text-indent:-5000em;
width:47px;
}
background:url(../images/nome da sua imagem) no-repeat;
display:block;
height:17px;
text-indent:-5000em;
width:47px;
}
Por favor se encontrarem algum erro reportem nos comentários do blog pra que eu possa arrumar,
.. thanks.Comentários
-
Ronildo Costa escreveu em 30/07/2007 às 02:49:06
Ana, acredito que não de pra fazer isso pois os dois usam o mesmo class, isso estou dizendo de cabeça pois não testei. E se for isso mesmo deve-se alterar no código fonte, pra que cada um fique com um class diferente. Dai o processo será o mesmo, basta apenas trocar o nome da classe no css.
Joomla components by Compojoom