Dicas de CSS no Joomla - Ronildo Costa - Joomla - CSS - Tecnologia

Escrito por Ronildo Costa | Qua, 06 de Junho de 2007 10:49

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:

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;
}

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;
}

Por favor se encontrarem algum erro reportem nos comentários do blog pra que eu possa arrumar,

.. thanks.

Comentários Adicionar novo

Ana Paula escreveu em 2007-07-30 02:08

Oi Ronildo, valeu pela ajuda, era exatamente o que eu tava procurando...

Ana Paula escreveu em 2007-07-30 02:45

Dá pra fazer o mesmo com:

Me pareceu mais complexo, ai me perdi... :S

Ana Paula escreveu em 2007-07-30 02:46

Eu dizia, com estes:

Ana Paula escreveu em 2007-07-30 02:47

Com a navegação de paginas:
Anterior Próxima

Ronildo Costa escreveu em 2007-07-30 10:49

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.

Luiz escreveu em 2007-08-12 23:10

onde eu encontro esses codigos pra trocar?

Ronildo Costa escreveu em 2007-08-13 10:32

No css do seu template.
templates/seutemplate/css/template_css.css

Ariadne escreveu em 2007-10-17 14:15

Gostaria de substituir o botão da busca por uma imagem.

Sampa escreveu em 2007-12-18 09:36

Dá pra colocar um background no botao da busca, Ariadne. Mude a classe .button apenas para onde está o botao de busca. Por exemplo, se está num div #busca, vá no css e insira div#busca input.button e dê a propriedade de background.

Erika Lopes escreveu em 2008-04-23 04:43

Como faço para customizar para uma imagem o botão enviar do modulo de login? acho o padrao muito feio. E onde encontro o codigo? obrigada Ronildo desde ja..muito show este blog.

Roni Costa escreveu em 2008-04-23 09:52

A resposta da sua pergunta está no link abaixo.

http://www.joomlacssguide.com/images/stories/mainpage/snapshot2-b.png