Adicione uma folha de estilo custom.css. se o seu modelo não o pega automaticamente, você pode adicioná-lo em seu head.php geralmente o caminho é: templates / templatename / tpls / blocks / head.php <link rel = "stylesheet" href = "/ templates / templatename / css / custom.css "type =" text / css "/>
Tony M
Respostas:
22
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.
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
Para uso geral, eu sugeriria o uso, em JHtml::_('stylesheet', 'path/to/file')vez de addStyleSheetcomo já discutido em outra resposta :) Fora isso, boa resposta. Definitivamente virá a calhar para as pessoas
Lodder
Obrigado, @Lodder. Espero que esta informação possa ser útil para as pessoas. Em relação à sua sugestão, eu li o debate. Como pode JHtml::_ser usado $this->template?
Na verdade, os novos temas de foguetes usam LESS. Tudo o que você precisa fazer é criar um arquivo na pasta LESS chamado template-custom.less e inserir seu código nisso. Então você pode aproveitar os truques que MENOS traz. O Warp 7 permite que você crie seu próprio "estilo" na pasta styles e você pode realmente colar um arquivo custom.css na pasta THAT (dentro de sua própria pasta css). Dessa forma, cada estilo pode ter seu próprio CSS personalizado. Ele também suporta atualizações de modelo. O uso do arquivo custom.css padrão significa que ele é substituído sempre que você atualiza o tema.
Brian Peat
1
Ótima resposta e muito útil! Outra opção que você gostaria de adicionar aos modelos / estruturas que não incluem provisão para arquivos CSS personalizados é o uso de uma extensão de terceiros, como extensões CSSConfig.joomla.org/extensions/style-a-design/templating/…, que foi projetado para esse propósito exato.
Neil Robertson
7
Joomla 3.5+ (modelo Protostar)
A partir do Joomla 3.5, você pode criar um arquivo chamado user.csse colocá-lo em:
templates / protostar / css / user.css
Nota: o nome do arquivo deve seruser.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ê.
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.
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.
Como muitas outras estruturas de modelo, o Helix também oferece 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.
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 , que permite exatamente isso. Para criar seu arquivo de substituição de CSS personalizado e carregá-lo por último.
Outra opção que geralmente uso nos sites que eu administro é modificar o modelo e adicionar meu próprio link ao meu arquivo custom.css , pouco 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.
O Gantry 5 é a versão mais recente da popular estrutura de modelos e fornece muitos novos recursos.
Em relação às substituições de CSS, há muita flexibilidade e opções.
Tomando o tema Hydrogen, 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 seus layouts de modelo e usar uma partição Atom CSS / JS personalizada (um novo recurso do gantry 5) para adicionar seu custom.css ao modelo. O Gantry 5 também fornece os chamados links de fluxo (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:
template_directory/custom/scss/custom.scss
Fazendo isso, o gantry5 sempre carrega e compila esse arquivo scss, e qualquer regra de css que você aplicou substituirá 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.
Respostas:
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.
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 aoindex.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.(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:!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 estarYOURTEMPLATEFOLDER-custom.css.Exemplo: se você estiver usando o
Afterburner 2modelo gratuito , o diretório padrão será/templates/rt_afterburner2/. Adicione um arquivo chamadort_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 ativarOverride 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 emExtensions -> 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 adicionandopara o arquivo
/layouts/template.config.php.fonte
JHtml::_('stylesheet', 'path/to/file')vez deaddStyleSheetcomo já discutido em outra resposta :) Fora isso, boa resposta. Definitivamente virá a calhar para as pessoasJHtml::_ser usado$this->template?JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/style.css');Joomla 3.5+ (modelo Protostar)
A partir do Joomla 3.5, você pode criar um arquivo chamado
user.csse colocá-lo em:Nota: o nome do arquivo deve ser
user.cssO modelo protostar irá verificar se:
> 0.Se as duas condições forem atendidas, ele importará automaticamente esse arquivo para você.
Veja a solicitação de recebimento no Github
fonte
Framework Helix ( 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.
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.
Como muitas outras estruturas de modelo, o Helix também oferece 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.
fonte
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 , que permite exatamente isso. Para criar seu arquivo de substituição de CSS personalizado e carregá-lo por último.
Outra opção que geralmente uso nos sites que eu administro é modificar o modelo e adicionar meu próprio link ao meu arquivo custom.css , pouco 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.
fonte
Pórtico 5 (Tema Foguete)
O Gantry 5 é a versão mais recente da popular estrutura de modelos e fornece muitos novos recursos.
Em relação às substituições de CSS, há muita flexibilidade e opções.
Tomando o tema Hydrogen, 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 seus layouts de modelo e usar uma partição Atom CSS / JS personalizada (um novo recurso do gantry 5) para adicionar seu custom.css ao modelo. O Gantry 5 também fornece os chamados links de fluxo (como atalhos), para vincular facilmente seu arquivo custom.css.
Então, de dentro da partícula Atom, você a vincularia usando:
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:
Fazendo isso, o gantry5 sempre carrega e compila esse arquivo scss, e qualquer regra de css que você aplicou substituirá 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.
fonte