Joomla: classes únicas na tag body

A tag body em um template Joomla! normalmente não possui nenhuma característica especial. Nesse tutorial vamos aprender como incluir uma classe CSS dinâmica que permitirá criar uma formatação única para cada página de nosso site, independente do tipo de menu.

Para quem não sabe, ao criar um item de menu podemos associá-lo a um sufixo que permite que se tenha classes diferentes em cada página. Porém, essa funcionalidade é limitada. Percebi isso recentemente em meu site onde utilizo o CCK* K2.

O K2 é um componente poderoso que substitui com muitas vantagens o gerenciador de conteúdo do Joomla.

Criei alguns ítens de menu para exibir artigos mais recentes de usuários ou categorias do K2. Em conjunto, criei um módulo do K2 que exibe artigos relacionados. Esse módulo eu queria que aparecesse somente nos artigos e não na página principal da categoria que leva a estes.

Nas atribuições de ítens de menu do módulo, associei-o aos ítens-pai. Sendo assim, todo os itens-filho apresentariam o módulo. Porém, com essa configuração surgiu um contratempo (óbvio): o módulo aparecia na página do ítem-pai vazio! A solução seria que o módulo não aparecesse somente nessa página e a melhor forma seria utilizando CSS para ocultá-lo.

O ideal é que houvesse uma classe ou ID CSS na tag body de cada página que as tornassem únicas.

Essa foi a solução: incluir um pedaço de código que pegasse a ID da página no banco de dados e a exibisse junto com a tag body. É muito simples alcançar esse objetivo.

No arquivo index.php antes da linha do DOCTYPE insira essa função:

<?php
$id = (isset($_GET['id'])) ? $_GET['id'] : null ;
$id = str_replace(':', ' ', $id);
?>

Na tag body, insira o que está em vermelho:

<body class="id-<?php echo $id; ?>>

Pronto! Salve e suba o seu arquivo. A página será gerada com um classe única, como no exemplo a seguir.

<body class="id-33">

Como classes não podem começar com números, coloca-se uma palavra, no caso id-, antes do echo da ID da página.

Dessa forma, criei uma classe CSS que oculta o módulo K2 somente na página do ítem-pai. As possibilidades são infinitas! Com essa dica pode-se criar uma folha de estilos específico para cada página de um site.

Se você achou esse artigo útil, compartilhe-o em suas redes sociais e/ou clique aqui para apoiar esse projeto. Parte desse dinheiro irá para uma instituição de apoio as crianças com HIV-AIDS.

3 comentários em “Joomla: classes únicas na tag body

  • Pingback:Joomla: classes únicas na tag body [2] | design+

  • 12/09/2012 em 12:45
    Permalink

    Achei seu post muito bom, e acredito se tratar de algo que estou procurando há alguns dias. Estou querendo dar “display:none” em duas divs apenas na home. Queria saber se posso fazer uma css apenas para home. Você poderia me dar alguma dica como fazer isso. Estou usando Joomla 2.5, tenho boa experiência com Joomla, mas não sou programador

    Resposta
    • 12/09/2012 em 12:59
      Permalink

      Seguindo as dicas do post acima você terá uma ID na tag body em cada página do seu site. Com isso, basta declarar no seu arquivo CSS essa ID junto com a DIV que você deseja. É bom dar uma ID para a DIV também. Boa sorte!

      Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *