如何覆盖模板中的CSS样式？

21

使用Template Club X / Y / Z的免费/商业Joomla模板时，包括我自己的CSS样式的最佳方法是什么？

templates  overrides  css 
— 约翰
source
1
添加一个custom.css样式表。如果您的模板没有自动获取，则可以将其添加到head.php中，通常路径为：templates / templatename / tpls / blocks / head.php <link rel =“ stylesheet” href =“ / templates / templatename / css / custom.css“ type =” text / css“ />
— Tony M

Answers:

22

为什么要使用CSS替代？

如果您使用的是预先构建的Joomla模板，则最好将CSS样式与现有的模板样式区分开。

  • 维护更容易
  • 如果您升级模板，所做的更改不会丢失
  • 您可以轻松地将修改复制/移动到另一个模板或另一个站点。

CSS替代如何工作？

CSS在此上下文中的意思是“级联样式表”，“级联”，这意味着由于一个以上的样式表规则可以应用于特定的HTML片段，因此可以通过从更通用的规则级联到所需的特定规则（选择最具体的规则），或基于任何元素的规则顺序（选择找到的最后一个规则）。

只要您的自定义CSS文件在默认模板CSS文件之后加载，您就可以根据需要添加自己的样式来覆盖特定的元素（有一些例外，下面更多内容）。

一般用法

要在Joomla <head>标记中加载自定义样式表，可以在结束标记之前将以下代码添加到index.php模板（YOURDOMAIN.COM/templates/yourtemplate/index.php）的文件中，</head>以确保最后加载文件。

JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/custom.css');

（CSS文件可以具有任何名称，并且不必位于/ css /子文件夹中，但是这样做更干净。）

也可以添加一个普通<link>标签，但是它不如上述选项灵活：

<link rel="stylesheet" href="/joomla//templates/mytemplate/css/custom.css" type="text/css" />

！重要

某些扩展程序可能会在您的CSS样式之后加载它们的CSS样式（甚至直接在index.php文件中添加样式），从而覆盖您的替代。这通常可以通过添加!important样式来解决，例如。h1{color:red!important;}

在不同框架中的用法

现在有趣的部分：许多模板框架都有可能用户希望对其模板进行更改，从而增加了一种简单的方法来包含CSS覆盖。以下是一些使用的方法：

火箭主题龙门4

RocketTheme模板由Gantry框架提供支持，如果找到了自定义CSS文件，则会自动加载。CSS文件必须放在/templates/yourtemplate/css/文件夹中，名称必须为YOURTEMPLATEFOLDER-custom.css。

示例：如果您使用他们的免费Afterburner 2模板，则默认模板目录为/templates/rt_afterburner2/。rt_afterburner-custom.css在/ css /子文件夹中添加一个名为（带有下划线和连字符的carefull）文件，该文件将由Gantry框架自动加载。

形状5

Shape 5模板在模板custom.css的/ css /子目录中附带一个空文件。只需将您的样式添加到此文件中，它们就会包含在您的布局中。

Gavick Pro

Gavick Pro模板随附overrides.css/ css /子目录中的空文件。但是请注意，默认情况下不会加载此文件，您必须Override CSS在模板设置的“高级设置”选项卡中激活。

Joomla Shine

在模板的/ css /子文件夹中创建一个自定义CSS文件，例如，custom.css并在处指定文件名Extensions -> Templates -> [template name] -> SEO & System -> Custom CSS/JS File(s)。

T3框架

基于T3框架的模板可能/可能不会custom.css在模板的/ css /子文件夹中包含文件（如果不存在，则仅创建一个文件），但是如果存在，则该文件将在任何其他CSS文件之后加载。

扭曲框架

基于Warp Framework的模板会自动加载custom.css在/ css /子文件夹中找到的文件。可以通过添加其他CSS文件来加载

$this->warp->stylesheets->add('css:yourcssfile.css');

到文件/layouts/template.config.php。

— 约翰
source
2
对于一般用法，我建议使用JHtml::_('stylesheet', 'path/to/file')而不是addStyleSheet已经在另一个答案上争论过的:)除此之外，该死的好答案。绝对会派上用场的人
— Lodder 2014年
谢谢@Lodder。我希望此信息对人们有用。关于您的建议，我确实阅读了辩论。怎么JHtml::_用$this->template？
— 2014年
2
JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/style.css');
— 2014年
3
实际上，较新的火箭主题使用LESS。您所要做的就是在LESS文件夹中创建一个名为template-custom.less的文件，并将代码放入其中。然后，您可以享受LESS带来的技巧。Warp 7允许您在样式文件夹中创建自己的“样式”，并且您实际上可以将custom.css文件粘贴在THAT文件夹中（在其自己的css文件夹中）。这样，每种样式都可以拥有自己的自定义CSS。这也使其可以经受模板升级。使用默认的custom.css文件意味着每次升级主题时，它将被覆盖。
— Brian Peat 2014年
1
很好的答案，非常有用！你可能想添加的模板/框架不包括提供自定义CSS文件的另一个选择是使用第三方扩展，如CSSConfig extensions.joomla.org/extensions/style-a-design/templating/...这专为此目的而设计。
— 尼尔·罗伯逊
7

Joomla 3.5+（Protostar模板）

从Joomla 3.5开始，您可以创建名为的文件user.css并将其放在以下位置：

模板/protostar/css/user.css

注意：文件名必须是user.css

protostar模板将检查是否：

  • 该文件存在
  • 文件大小为> 0。

如果同时满足两个条件，它将自动为您导入该文件。

在Github上查看拉取请求

— 寄宿
source
5

螺旋框架（JoomShaper）

另一个Joomla模板框架，可简化自定义工作流程。

Helix Framework模板还提供了一种简便的方法，可以通过2种便捷的方法来添加自定义样式。

  1. 在后端的模板控制面板中，有一个“自定义CSS”字段。在这里，您可以键入css，它将作为样式元素添加到页面的头部，因此，它也将优先于其他外部css文件。当然，如果您打算编写一堆css，则此选项不是理想的选择，因此还有第二种方法。

  2. 与许多其他模板框架一样，Helix还提供了创建自己的custom.css文件的功能。只需创建它，然后将其放在模板的css文件夹中即可。模板将对其进行解析，并将其包含在页面的头部。

— FFrewin
source
3

Johanpw在回答自己的问题上做得非常好……尤其是关于许多商业模板的CSS覆盖。

我只想在这里加两分钱...

正如Johanpw所强调的那样，建议您创建CSS覆盖。将您的自定义CSS保存在一个文件中，您知道该文件在更新后不会被删除或覆盖是至关重要的。

对于所有Joomla扩展，记住这一点很重要。不要尝试更改模块或组件的核心CSS文件。相反，最好尝试创建自己的自定义template.css文件，最后加载它，然后在其中创建所有自定义样式。

如果商业模板没有提供添加CSS覆盖的方法，则可以使用如下扩展名：Add Custom CSS，它允许这样做。要创建自定义的CSS覆盖文件并最后加载它。

我经常在自己管理的网站中执行的另一种选择是修改模板，然后将我自己的链接添加到我的custom.css文件中，就在模板的结束head标签之前。这是一个较小的，易于记忆和恢复的修改，当模板更新到达时，我可以处理。

— FFrewin
source
3

龙门5（火箭主题）

Gantry 5是流行的模板框架的最新版本，它提供了许多新功能。

关于CSS替代，有很多灵活性和选项。

以作为标准Gantry 5模板发布的Hydrogen主题，它提供了一个名为custom的文件夹。

该文件夹供用户放置龙门架/模板的自定义文件/替代（不要与保留在template / html文件夹中的Joomla模板替代混淆）。您可以在其中放置custom.css文件。然后，通过“ Gantry模板管理面板”，可以自定义模板布局，并使用“ 自定义CSS / JS Atom粒子”（新的gantry 5功能）将custom.css添加到模板中。Gantry 5还提供了所谓的流链接（如快捷方式），以便轻松链接custom.css文件。

因此，从Atom粒子内部，您可以使用以下方法将其链接：

gantry-theme://custom/thing.css

该gantry-theme://快捷方式，总是引用当前龙门模板文件夹。

使用此方法是为gantry5模板的特定模板轮廓添加custom.css的有效方法。

第二种方法对整个龙门模板都适用，它是在内部添加一个custom.scss文件：

template_directory/custom/scss/custom.scss

这样做，gantry5将始终加载并编译此scss文件，并且您应用的所有css规则都将覆盖模板的默认规则。

在scss文件中，使用SCSS或简单地使用CSS都可以。编译器能够同时编译两者。

— FFrewin
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.