自定义主题CSS和Liferay CSS之间的冲突

我试图通过使用自定义主题（使用base as_样式的主题）来定制Liferay UI

我有我自己的css文件，我将其复制到主题的_diff/css文件夹中，并将其导入custom.css文件。但是这破坏了liferay的演示。在我的自定义css中，我为所有标准标记定义了样式，如body、div等，这也影响了liferay UI

---

我如何解决这一冲突？提前谢谢

快速且不是最好的解决方案是删除Liferay css文件（例如base.css）的内容，并将此空文件保存在主题的/diff/css/文件夹中。这样，base.css将被新的空文件覆盖，因此不会加载任何样式。您的custom.css将是唯一被考虑的样式表。

当然，这一切也会对Liferay的其他部分产生影响。Liferay为您的页面提供了相当多的HTML DOM，如果您更改了所有这些元素的表示形式，您也必须注意为Liferay的元素设置样式

这是冲突吗？不，让我们看一个最简单的例子：声明div{color:green；}。当然，现在所有东西，包括您的组件和Liferay的组件，都使用绿色文本。如果您只想设计自己的portlet，那么可能需要指定一些portlet:div.portlet-my-own-application{color:green；}

我知道颜色是一个太简单的用例，但我希望它能说明解决方案策略

与其按照Artem Khojoyan的建议覆盖Liferay的base.css，我建议您查看生成的css、什么是有效的等等，并通过检查每个元素的有效css来简化您自己的css，使其适合在Liferay中使用。萤火虫或它的任何亲戚都是你的朋友

---

恐怕，就细节而言，我正在做一些对Liferay UI有影响的事情，没有更多的东西可以帮助你。事实上，我希望你所做的对Liferay的UI有影响。。。如果您的样式是从custom.CSS加载的，那么您只需要找到合适的CSS代码，然后就会覆盖liferay默认样式。 在某些情况下，要覆盖css中的样式，可以使用！重要的

例如，liferay默认样式

body {
   background-color: #fff
}

您可以指定您的样式以考虑加载顺序< /p>

body {
   background-color: red !important;
}

---

谢谢。此时，我所做的是在每个web内容模板中导入所有自定义CSS文件。我有3个web内容显示portlet，其中包含3种不同的web内容。我使用WCM velocity模板中的链接标记导入了我自己的CSS文件。这不会影响liferay的外观。但是，我需要导入每个模板中的所有样式，并试图找到是否有任何方法可以创建包含所有CSS导入的基础模板，并通过所有其他模板扩展此模板。您认为这是正确的方法吗？