Estamos disponibilizando a tradução livre deste tutorial que ensina a adicionar parâmetros de estilo ao título de seus artigos no Joomla! 1.5 para deixar seus sites mais flexíveis e profissionais. Aproveite!
Adicionando parâmetros de estilo nos Títulos de Artigos do Joomla! 1.5
E então, o que os profissionais fazem para obter efeitos legais?
Escrito por Casey Lee e tradução livre feita por Geciel R. Costa
Neste artigo mostrarei a você uma maneira simples de adicionar novos parâmetros ao Tipo de Menu (Menu Type) que permitirá adicionar um ícone customizado aos seus Títulos de Artigos do Joomla. Isto funciona como as opções de Sufixo de Classe de Página (Page Class Suffix) e Sufixo de Classe de Módulo (Module Class Suffix) são empregadas para aplicar estilo em itens específicos. A razão pela qual escolhi este método ao invés de empregar o parâmetro de Sufixo de Classe de Página é porque esse último tende a modificar muito da saída. Neste simples tutorial, desejo apenas aplicar um parâmetro a um único elemento da página – o Título de Artigo (Article Title).
Figura-1: Título da Página (Article Title) modificado, tendo sido inserido o ícone à esquerda.
Passo 1: Criar amostras de dados para ilustração
Vamos criar amostras de dados para empregarmos à medida que trabalharmos com esse tutorial. Crie uma seção denominada “Artigos”.
Então, vamos criar essas três categorias abaixo. Para essas categorias, aprimoraremos a usabilidade adicionando um ícone relevante para cada Artigo da Categoria (Category Article).
- FAQ: Essa categoria lista algumas das mais freqüentes perguntas e respostas.
- MÍDIA: Essa categoria lista alguns arquivos para download.
- LIVROS: Essa categoria lista alguns títulos de livros e suas análises.
Vá em frente e crie textos de exemplo para artigos em cada categoria. Recomendo, se preferir, empregar para isto a extensão Mass Content.
Passo 2: Adicionar um Parâmetro ao Tipo de Menu XML
Agora, vá até o diretório raiz do Joomla e navegue até a pasta components/com_content/views/category/tmpl.
Nota importante: O código de parâmetros acima deve ser copiado como ele está, não devendo ser empregado separadores ou interrupções de linhas ou outros espaços.
Nota do tradutor: foi alterado o tipo (type) de text (texto) para list (lista) e acrescentado os marcadores para facilitar o processo.
Passo 3: Criar a Sobrescrição do Template
No Joomla 1.5, a função de Sobrescrição de Template (Template Overrides) permite-nos formatar a saída, ou seja, a forma como os elementos do Template são apresentados, da maneira que desejarmos, ao invés da forma do leiaute padrão definido pelo sistema. A sobrescrição de template é muito fácil de ser implementada. Basicamente, devemos copiar os arquivos de leiaute da pasta dos componentes do sistema para dentro de uma nova pasta denominada “html” dentro da pasta do template que queremos sobrescrever. Então, nessa última pasta, fazemos as modificações que forem pertinentes nos arquivos. Quando o Joomla encontra os arquivos de leiaute na nossa pasta template/html, ele (o sistema) emprega aqueles arquivos como sobrescrição e/ou substituição (overrides) aos arquivos do leiaute do próprio sistema.
Para fazermos isso, vá ao diretório /templates/nomedoseutemplate. Crie um novo diretório denominado “html”. Abaixo do diretório “/html”, crie uma pasta denominada de “com_content”. Se já existir uma pasta “html” ou “com_content”, tudo bem!
Dentro da pasta com_content, crie duas outras pastas; uma denominada “article” e outra “category”.
Exemplo:
/templates/rhuk_milkyway/html/com_content/article
Agora, copie (atenção, não mova) o arquivo do sistema components/com_content/views/category/tmpl/blog_item.php para /templates/nomedoseutemplate/html/com_content/category. Nota: Se este arquivo já existir, o melhor é não sobrescrevê-lo. Você pode continuar esse tutorial empregando o arquivo disponível.
Novamente, copie (atenção, não mova) o arquivo components/com_content/views/article/tmpl/default.php para /templates/yourtemplatename/html/com_content/article. Assim como apresentado na nota anterior, se já existir o arquivo, simplesmente empregue o que estiver disponível. Você pode, ainda, continuar com este tutorial.
Passo 4: Adicionar estilo aos Ícones do Título do arquivo
Abra o seguinte arquivo para editar:
Você verá o código abaixo com exceção do código na cor amarela, que é o que estamos adicionando agora. Após a inserção do código na cor vermelha, salve o arquivo.
Você verá o código abaixo com exceção do texto na cor amarela, que é o que estamos acrescentando. Após adicionar o texto na cor vermelha, salve o arquivo.
Passo 5: Acrescentar códigos CSS e Imagens
Ok, o Joomla está quase pronto para nós, então, vamos pular para a parte de “designer” desse pequeno tutorial agora.
A primeira coisa que precisamos fazer é pegar os nossos ícones para as categorias mencionadas anteriormente (FAQ, Mídia e Livros). Eu gosto de usar os ícones disponíveis no site silk icon set porque eles têm um bom tamanho (16px), 32 bits, transparentes e no formato PNG; e, acima de tudo, são grátis.
Escolhi os três abaixo. Sinta-se livre para pegar esses (observe o nome das figuras) agora e coloque-os dentro da pasta:
- info.png
- book_open.png
- photo.png
Então, vamos abrir a folha de estilo principal do seu template (normalmente é o arquivo template.css): /templates/yourtemplatename/css/template.css e adicione o seguinte código CSS no final:
span.faq {
background: url(../images/info.png) no-repeat 0px 5px;
width: 18px;
height: 20px;
display: block;
float: left;
}
span.media {
background: url(../images/photo.png) no-repeat 0px 5px;
width: 18px;
height: 20px;
display: block;
float: left;
span.book {
background: url(../images/book_open.png) no-repeat 0px 5px;
width: 18px;
height: 20px;
display: block;
float: left;
}
Passo 6: Definir o estilo do Item de Menu
Observando o código acima, podemos ver cada um dos nomes das classes (isto é; FAQ, MEDIA e BOOK). Estes são os parâmetros que você poderá empregar para inserir no seu Gerenciador de Menu (Menu Manager).
Para empregar esses valores, faça o acesso (login) a área de administração do seu site Joomla e crie um novo item de menu empregando o Item de Menu da Categoria de Leiaute de Blog. (Navegue até a opção de Menus à Main Menu à e crie um novo item de menu (New) à e na janela de seleção de tipo de item de menu (Select Menu Item Type) escolha a opção Artigos (Articles) à na opção de categoria (Category) escolha o leiaute de Blog (Category Blog Layout).
Figura-2: Acrescentando novo Item de Menu.
Na tela de item de menu (Menu Item) preencha os campos conforme o caso e no campo dos parâmetros à direita, você verá uma aba chamada “Advanced” onde poderá observar a existência de um novo parâmetro denominado “Ícone de Título de Artigo”. Você poderá escolher um dos seguintes valores: FAQ, MÍDIA e LIVROS. A opção FAQ foi definida como padrão. Após salvar o seu novo Item de Menu, veja o Blog da Categoria na página principal do seu site Joomla e selecione o novo Item de Menu. Tão logo você tenha acessado o artigo, observe o novo ícone no título.
Figura-3: Especificando os detalhes do novo item de menu.
Se você desejar fazer alterações, tudo o que você precisa fazer é adicionar o código CSS pertinente, conforme apresentado no passo anterior.
Espero que você encontre uma maneira adequada para empregar a abordagem apresentada nesse tutorial.
Divirta-se com o Joomla!
Vide arquivo original em:
Faça o download do arquivo zipado estilo_joomla15.zip. (dentro deste arquivo temos em fomato doc a cópia do arquivo original e a tradução livre, além de fotos png empregadas.
Sei que num futuro próximo vou usar este artigo e, mesmo não necessitando da tradução, sou grato pela disponibilização.
Sei que a comunidade como um todo também agradece!!!
Manoel
Após retirar aspas da url do CSS, funciounou. Tente...
No arquivo Template.css do seu template, conf. tutorial acima, corrija a linha da url, como segue:
span.faq {
background: url(“../images/info.png”) no-repeat 0px 5px;
.....
}
Apenas retira as aspas...
background: url(../images/icons/info.png) no-repeat 0px 5px;
Se o restante estiver de acordo com o tutorial,deve funcionar.
Em tempo...parabéns pelo tutorial,muito bom e de fácil entendimento.
Marcio