ti-enxame.com

Como faço para substituir os estilos CSS no meu modelo?

Ao usar um modelo Joomla gratuito/comercial do Template Club X/Y/Z, qual é a melhor maneira de incluir meus próprios estilos CSS?

21
johanpw

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 pré-criado do Joomla.

  • É 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 seu arquivo CSS personalizado seja carregado após os arquivos CSS de modelo padrão, você poderá adicionar seus próprios estilos para substituir elementos específicos conforme necessário (existem alguns exceções, mais sobre isso abaixo).

Uso geral

Para carregar uma folha de estilo personalizada na tag Joomla <head>, O código a seguir pode ser adicionado ao arquivo index.php Do seu modelo (YOURDOMAIN.COM/templates/yourtemplate/index.php), Logo antes do final </head> 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 tag <link> Normal, mas isso é menos flexível que a opção mencionada acima:

<link rel="stylesheet" href="/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 !important Aos 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:

Pórtico RocketTheme 4

Os modelos do RocketTheme são suportados pelo Gantry Framework, e um arquivo CSS personalizado será carregado automaticamente se encontrado. O arquivo CSS deve ser colocado na pasta /templates/yourtemplate/css/ E o nome must deve ser YOURTEMPLATEFOLDER-custom.css.

Exemplo: Se você estiver usando o modelo Afterburner 2 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 arquivo custom.css 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 arquivo overrides.css Vazio no subdiretório/css /. Mas observe que este arquivo não é carregado por padrão, você deve ativar Override CSS Na guia Configurações avançadas nas configurações do modelo.

Brilho do Joomla

Crie um arquivo CSS personalizado na subpasta/css/do seu modelo, por exemplo custom.css E especifique o nome do arquivo em Extensions -> Templates -> [template name] -> SEO & System -> Custom CSS/JS File(s).

Estrutura T

Os modelos baseados no T3 Framework podem/podem não incluir um arquivo custom.css 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.

Estrutura de urdidura

Os modelos baseados no Warp Framework carregam automaticamente o arquivo custom.css 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.

22
johanpw

Joomla 3.5+ (modelo Protostar)

A partir do Joomla 3.5, você pode criar um arquivo chamado user.css e coloque-o em:

templates/protostar/css/user.css

Nota: o nome do arquivo deve ser user.css


O modelo protostar irá verificar se:

  • O arquivo existe
  • O tamanho do arquivo é > 0.

Se as duas condições forem atendidas, ele importará automaticamente esse arquivo para você.

Veja solicitação de recebimento no Github

7
Lodder

Helix Framework (JoomShaper)

Outra estrutura de modelo do Joomla, que facilita o fluxo de trabalho de personalização.

Os modelos Helix Framework também fornecem uma maneira fácil de adicionar estilos personalizados com 2 métodos convenientes.

  1. No painel de controle do modelo no back-end, há um campo CSS personalizado. Aqui você pode digitar seu css, que será adicionado como um elemento de estilo na seção principal de suas páginas e, como tal, também terá precedência sobre outros arquivos css externos. Claro que essa opção não é o ideal, se você planeja escrever várias linhas de css, portanto, existe um segundo método.

  2. Como muitas outras estruturas de modelo, Helix também fornece a capacidade de criar seu próprio arquivo custom.css. Simplesmente crie-o e coloque-o dentro da pasta css do modelo. O modelo o analisará e o incluirá na seção principal de suas páginas.

5
FFrewin

Johanpw fez um trabalho muito bom com sua resposta em sua própria pergunta ... especialmente com relação às substituições de CSS de muitos modelos comerciais.

Gostaria apenas de adicionar meus dois centavos aqui ...

Como Johanpw sublinhou, a criação de substituições de CSS é a prática recomendada. Manter seu CSS personalizado em um único arquivo que você sabe que não será excluído ou substituído após uma atualização ser essencial.

É importante lembrar para todas as extensões do Joomla. Não tente alterar o arquivo css principal de um módulo ou componente. Em vez disso, tente criar seu próprio arquivo template.css personalizado, carregue-o por último e crie todos os seus estilos personalizados.

Nos casos em que um modelo comercial não fornece uma maneira de adicionar uma substituição de css, você pode usar uma extensão como esta: Adicionar CSS personalizado , o que permite exatamente isso. Para criar seu arquivo de substituição de CSS personalizado e carregá-lo por último.

Outra opção que costumo fazer nos sites que eu administro é modificar o modelo e adicionar meu próprio link ao meu arquivo custom.css , logo antes da tag de fechamento do modelo. Esta é uma modificação menor, fácil de lembrar e restaurar, com a qual eu posso lidar quando uma atualização de modelo chegar.

3
FFrewin

Pórtico 5 (Tema Foguete)

Gantry 5 é a versão mais recente da estrutura popular de modelos e fornece muitos novos recursos e capacidades.

Em relação às substituições de CSS, há muita flexibilidade e opções.

Tomando o Tema de Hidrogênio lançado como modelo padrão do Gantry 5, ele fornece uma pasta chamada customizada.

Esta pasta é fornecida para o usuário colocar seus arquivos/substituições personalizadas para a estrutura/modelo do pórtico (para não confundir com as substituições de modelo do Joomla, que permanecem na pasta template/html). Você pode colocar aí o arquivo custom.css. Em seguida, através do Painel de administração de modelos do Gantry, você pode personalizar os layouts de seus modelos e usar um CSS/JS personalizado Atom Particle ( um novo recurso do pórtico 5), para adicionar seu custom.css ao modelo.O pórtico 5 fornece também o chamado links de stream , (como atalhos), para vincular facilmente seu arquivo custom.css.

Então, de dentro da partícula Atom, você a vincularia usando:

gantry-theme://custom/thing.css

O gantry-theme:// atalho, sempre se refere à pasta atual do modelo do pórtico.

O uso dessa abordagem é uma maneira eficiente de adicionar custom.css a tópicos específicos do modelo do seu gantry5.

Uma segunda abordagem, que funciona globalmente para todo o modelo do pórtico, é adicionando um arquivo custom.scss dentro de:

template_directory/custom/scss/custom.scss

Fazendo isso, o gantry5 sempre carrega e compila esse arquivo scss, e quaisquer regras css que você aplicou substituem as regras padrão do modelo.

Dentro do arquivo scss, você está perfeitamente bem usando SCSS ou simplesmente css. O compilador é capaz de compilar os dois.

3
FFrewin