【问题标题】:Conflicts between Custom theme CSS and Liferay CSS自定义主题 CSS 和 Liferay CSS 之间的冲突
【发布时间】:2014-06-11 11:03:25
【问题描述】:

我正在尝试通过使用自定义主题来自定义 Liferay UI,将 base 用作“_Styled”主题。

我有自己的 css 文件,我将其处理到主题的 _diff/css 文件夹并将它们导入“custom.css”文件。但是它破坏了 liferay 的呈现。在我的自定义 CSS 中,我为所有标准标签定义了样式比如 body、div 等,它们也会影响 liferay UI。

我该如何解决这个冲突?提前致谢!

【问题讨论】:

    标签: liferay liferay-6 liferay-theme


    【解决方案1】:

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

    【讨论】:

      【解决方案2】:

      当然,这一切都会对 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 - 调整它以在 Liferay 中使用 - 通过检查每个看起来不合适的元素的有效 CSS。 Firebug 或它的任何亲戚都是你的朋友。

      恐怕,“我正在做一些对 Liferay UI 有影响的事情”这样的细节,没有什么可以帮助你的了。事实上,我希望你所做的对 Liferay 的 UI 有影响……你只需要找到合适的 CSS 代码

      【讨论】:

      • 谢谢。此时,我所做的是在每个 Web 内容模板中导入了所有自定义 CSS 文件。我有 3 个 Web 内容显示 portlet,包含 3 个不同的 Web 内容。我已经导入了我的使用 WCM 速度模板中的“链接”标签拥有 css 文件。这不会影响 liferay 的外观和感觉。但是,我需要在每个模板中导入所有样式,并试图找出是否有任何方法可以创建包含所有 CSS 导入的基本模板,并且我将此模板扩展为所有其他模板。你认为这是正确的方式吗?
      【解决方案3】:

      理想情况下,如果您的样式是从 custom.css 加载的,那么将覆盖 liferay 默认样式。 在某些情况下,要覆盖 CSS 中的样式,您可以使用 !important

      例如liferay默认样式

      body {
         background-color: #fff
      }
      

      无论加载顺序如何,您都可以指定要考虑的样式

      body {
         background-color: red !important;
      }
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2012-05-30
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2016-12-20
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多