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.
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.
Leia mais...
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 resolver.
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.
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.
Leia mais...
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 resolver.
0 comentários:
Postar um comentário