Por que usar substituições CSS?
É sempre uma boa ideia manter seus estilos CSS separados do estilo de modelo existente, se você estiver usando um modelo Joomla pré-criado.
- É mais fácil manter
- Suas alterações não serão perdidas se você atualizar o modelo
- Você pode copiar / mover facilmente as modificações para outro modelo ou outro site.
Como as substituições de CSS funcionam?
CSS significa "Cascading Style Sheets", "Cascading" nesse contexto, o que significa que, como mais de uma regra da folha de estilo pode ser aplicada a uma parte específica do HTML, a regra usada é escolhida em cascata das regras mais gerais para a regra específica necessária (a regra regra mais específica é escolhida) ou com base na ordem das regras para qualquer elemento (a última regra encontrada é escolhida).
Desde que o seu arquivo CSS personalizado seja carregado após os arquivos CSS do modelo padrão, você poderá adicionar seus próprios estilos para substituir elementos específicos conforme necessário (existem algumas exceções, mais sobre isso abaixo).
Uso geral
Para carregar uma folha de estilo personalizada na <head>tag do Joomla , o código a seguir pode ser adicionado ao index.phparquivo do seu modelo ( YOURDOMAIN.COM/templates/yourtemplate/index.php), logo antes da </head>tag final , para garantir que seu arquivo seja carregado por último.
JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/custom.css');
(O arquivo CSS pode ter qualquer nome e não precisa estar na subpasta / css /, mas é mais limpo assim.)
Também é possível adicionar uma <link>tag normal , mas isso é menos flexível que a opção mencionada acima:
<link rel="stylesheet" href="/joomla//templates/mytemplate/css/custom.css" type="text/css" />
!Importante
Algumas extensões podem carregar seus estilos CSS após o seu (ou até mesmo adicionar estilos diretamente no arquivo index.php), substituindo assim suas substituições. Isso geralmente pode ser resolvido adicionando !importantaos seus estilos, por exemplo.h1{color:red!important;}
Uso em diferentes estruturas
Agora, a parte divertida: muitas estruturas de modelos têm a possibilidade de os usuários desejarem fazer alterações em seus modelos, adicionando uma maneira fácil de incluir suas substituições de CSS. Aqui estão alguns dos métodos usados:
RocketTheme Gantry 4
Os modelos do RocketTheme são alimentados pelo Gantry Framework, e um arquivo CSS personalizado será carregado automaticamente, se encontrado. O arquivo CSS deve ser colocado na /templates/yourtemplate/css/pasta e o nome deve estar YOURTEMPLATEFOLDER-custom.css.
Exemplo: se você estiver usando o Afterburner 2modelo gratuito , o diretório padrão será /templates/rt_afterburner2/. Adicione um arquivo chamado rt_afterburner-custom.css(cuidado com sublinhado e hífen) à subpasta / css / e ele será carregado automaticamente pela estrutura do Gantry.
Forma 5
Os modelos do Shape 5 são enviados com um custom.cssarquivo vazio no subdiretório / css / do seu modelo. Basta adicionar seus estilos a esse arquivo e eles serão incluídos no seu layout.
Gavick Pro
Os modelos do Gavick Pro são enviados com um overrides.cssarquivo vazio no subdiretório / css /. Mas observe que esse arquivo não é carregado por padrão; você deve ativar Override CSSa guia Configurações avançadas nas configurações do modelo.
Joomla Shine
Crie um arquivo CSS personalizado na subpasta / css / do seu modelo, por exemplo, custom.csse especifique o nome do arquivo em Extensions -> Templates -> [template name] -> SEO & System -> Custom CSS/JS File(s).
Estrutura T3
Os modelos baseados no T3 Framework podem / podem não incluir um custom.cssarquivo na subpasta / css / do seu modelo (basta criá-lo, se não estiver lá), mas, quando presente, o arquivo será carregado após qualquer outro arquivo CSS.
Warp Framework
Modelos baseados no Warp Framework carregam automaticamente o custom.cssarquivo encontrado na subpasta / css /. Arquivos CSS adicionais podem ser carregados adicionando
$this->warp->stylesheets->add('css:yourcssfile.css');
para o arquivo /layouts/template.config.php.