Adicionando estilo CSS personalizado em algumas das minhas páginas

16

Gostaria de adicionar um estilo CSS personalizado a algumas das minhas páginas para dar um estilo único e substituir o estilo padrão do modelo.

Como posso conseguir isso no Joomla?

— johanpw
fonte

15

Existem várias maneiras de adicionar código CSS personalizado a uma página específica. Aqui estão algumas alternativas:

Alt. 1 - Classe de
página Use as classes de página. No editor de itens de menu, na guia "Exibição da página", há um campo chamado "Classe da página". Isso adicionará uma classe à sua <body>tag (ou <div class="YOURCLASS">...</div>ao redor do seu conteúdo), dependendo de como o seu modelo estiver configurado.

insira a descrição da imagem aqui

Em seguida, basta criar uma nova regra no arquivo CSS do seu modelo, usando a classe que você especificou.

Por exemplo, adicione mycustomclassao campo "Classe da página" no item de menu e coloque-o no seu arquivo CSS:

.mycustomclass p {font-color:red;} // Make text red on this particular page

Alt. 2 - Módulos CSS personalizados
Vários módulos estão disponíveis para esse fim. Um exemplo é o CSS personalizado , um módulo que permite adicionar qualquer código CSS e publicá-lo nas páginas que você deseja estilizar.

Uma opção semelhante é o Custom HTML Advanced , um módulo que permite adicionar HTML, JavaScript e CSS às suas páginas. O código pode ser adicionado à <head>tag automaticamente.

Alt 3. - carregar folha de estilo CSS adicional
Outra alternativa é verificar o ID do item de menu atual no index.phparquivo do seu modelo e carregar outra folha de estilo CSS, se necessário:

<?php 
   $currentMenuId = JSite::getMenu()->getActive()->id ;
   if ($currentMenuId == "14") {
       echo '<link rel="stylesheet" type="text/css" href="mystyle.css">';
   }
?>

— johanpw
fonte

Uso a primeira alternativa (com classe de página), mas você conhece uma maneira de aplicar esses estilos no editor? Por exemplo, os títulos não têm a mesma fonte, dependendo da categoria a que pertencem, como posso aplicar a fonte dentro do editor, dependendo da página em que são exibidos?

— Web-tiki

9

Uma das minhas abordagens favoritas é criar classes dinâmicas para o elemento body.

Então:

<?php
  $app    = JFactory::getApplication();
  $menu   = $app->getMenu();
  $active = $menu->getActive();
  $class  = $active->alias . " pageid-" . $active->id;
?>
<body class="<?php echo $class; ?>">

Alguns exemplos do que o código acima produzirá são:

Pagina inicial:

<body class="home pageid-13">

Sobre a página:

<body class="about-us pageid-15">

Agora você pode criar estilos específicos personalizados por página, usando as classes acima.

— FFrewin
fonte

Gosto dessa solução, é muito útil e fácil de implementar. 1

— johanpw

4

Este é outro método de fazer a mesma coisa.

Vai acima do doctype:

<?php
  $app = JFactory::getApplication();
  $menu = $app->getMenu()->getActive();
  $pageclass = '';

  if (is_object($menu))
    $pageclass = $menu->params->get('pageclass_sfx');
?>

Vai no seu índice onde está sua classe corporal:

<body id="<?php echo $pageclass ? htmlspecialchars($pageclass) : 'default'; ?>">

Agora, qualquer coisa que você adicionar à classe de página do item de menu aparecerá no ID do corpo. Qualquer item de menu sem uma classe será automaticamente id do corpo = "padrão".

— Faye
fonte

1

Além disso, você pode tentar com esta extensão atribuir diferentes folhas de estilo aos itens de menu: http://extensions.joomla.org/extensions/extension/style-a-design/templating/css2switch-basic

Saudações.

— AlejandroVega
fonte