仅在 joomla 中的所有扩展 css 之后加载自定义 css答案

【问题标题】：Load custom css ONLY after all extensions css in joomla仅在 joomla 中的所有扩展 css 之后加载自定义 css
【发布时间】：2016-03-15 08:37:43
【问题描述】：

我正面临一个我认为许多其他问题都存在的问题，但我无法找到解决方案。

基本上，我想在所有扩展的 css 之后加载一个自定义 css，这样我就可以自定义它的外观，而不必为所有内容设置重要性。

问题是 Joomla 在加载扩展文件之前加载 css 文件，因此我的 custom.css 或模板 css 不起作用。

我试过了

$doc->addStyleSheet($this->baseurl.'/templates/'.$this->template.'/css/custom-style.css');

在<jdoc:include type="head" />之后但它显然不起作用。

在 joomla 文档中它说所有第三方扩展都应该使用JHtml->addStyleSheet 来允许样式覆盖。但是有很多扩展没有这样做。

关于如何在所有扩展 CSS 之后加载 custom.css 或我的模板文件有什么建议吗？

【问题讨论】：

您可以在页脚中添加自定义 CSS，这将覆盖所有样式。检查这个 - joomla.stackexchange.com/questions/371/…
谢谢 Mirko，我现在看看
在那个问题上有人发布了内置的 propostar 有一个 user.css 覆盖。我将看看 joomla 附带的模板做了什么，如果对我有用，我会尝试实施类似的解决方案。我在模板和扩展当前概念中遇到的一件事是它们都加载了一堆东西。我见过加载 mootools、核心、更多、jquery、扩展 js 和样式、引导程序等的网站。太多的东西。考虑为扩展提供一个基本的html输出会很好，任何其他花哨的东西都是一个插件扩展模板

标签： css templates joomla joomla-extensions

【解决方案1】：

$doc->addStyleSheet 将样式表添加到<jdoc:include type="head" /> 生成的代码中，按照页面加载过程中每次调用该函数的顺序。

我假设这里的主要问题是您正在使用第三方扩展，因此不能只更新每个使用的样式表，因为修补它们可能会覆盖您的更改。

如果是这样，您最好的第一站是查看每个扩展程序是否为您提供了任何配置选项或是否在设计时考虑了样式。一个好的扩展确实应该提供足够的钩子（或者让它足够普通），以便能够在不使用 !important 的情况下做到这一点。

如果没有，由于样式表是按加载顺序添加的，您还可以创建一个模块，其唯一目的是添加样式表，并命令它出现在所有其他模块下方，以便其样式表最后加载。

另一种（有点 hacky）的方法是将其添加为自定义标签 - 然后将其添加到头部区域中的其他 js 和 css 下方。

<?php
$stylelink = '<link rel="stylesheet" href="'.$this->baseurl . '/templates/' . $this->template .'/css/custom-style.css" />' ."\n";
$document = JFactory::getDocument();
$document->addCustomTag($stylelink);
?>

实际上，我不确定这个最终选项是否比原始 html 链接更好，但是 - 它更多的是代码，而不是自定义标签的真正用途。

如果扩展开发者在设计扩展时没有考虑到这一点，那么只坚持最佳实践可能意味着不覆盖样式。

【讨论】：

感谢 Richard B。不幸的是，扩展不允许我包含自定义样式或将其关闭。是的，我可以将特定的给定类定位到模块/组件，但每次我想在项目中重新使用该扩展时，我都必须输入这些类。我最终只包含了一个指向 custom-style.css 的“原始 html 链接”。我猜一般来说，模板文件应该在扩展之后加载，毕竟模板是为开箱即用的 joomla 和扩展提供自定义外观的地方。

【解决方案2】：

我同意 Richard B 指出的所有观点。我认为您也很有可能通过增加 custom.css 或 template.css 中选择器的特异性来解决您的问题

例如，如果您在名为 nav 的模板上的 div 中有扩展名，请在 CSS 选择器中包含 .nav。使用网络检查器帮助在您的网站上查找您可能可以使用的课程

其他有助于定位和覆盖扩展样式的选项是在模块中设置模块类后缀 > 高级设置，或使用页面类

【讨论】：