wake-up-neo.com

Adicionando estilo CSS personalizado em algumas das minhas páginas

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?

joomla-3.xjoomla-2.5templatescss
16
johanpw

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

Alt. 1 - Classe da página
Use 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 tag <body> (Ou um <div class="YOURCLASS">...</div> Em torno do seu conteúdo), dependendo de como o seu modelo está configurado.

enter image description here

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

Por exemplo. Adicione mycustomclass ao campo "Page class" no seu 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 é 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 é Custom HTML Advanced , um módulo que permite adicionar HTML, JavaScript e CSS às suas páginas. O código pode ser adicionado à tag <head> Automaticamente.

Alt 3. - carregar folha de estilo CSS adicional
Outra alternativa é verificar o ID do item de menu atual no arquivo index.php 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">';
   }
?>
15
johanpw

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

Tã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.

9
FFrewin

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".

4
Faye

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

Saudações.

1
AlejandroVega