gpt4 book ai didi

css - Magento 自定义 css 被父 css 覆盖 - 使用 local.xml

转载 作者:技术小花猫 更新时间:2023-10-29 12:02:03 24 4
gpt4 key购买 nike

我有一个简单的 local.xml,它试图在我的 head block 中包含自定义 wc_styles.css,以应用于我的 Magento 站点中的所有页面。

<?xml version="1.0"?>
<layout>
<default>

<reference name="head">
<action method="addItem">
<type>skin_css</type>
<file>css/wc_styles.css</file>
</action>

<action method="addCss"><stylesheet>css/wc_styles.css</stylesheet></action>

</reference>


</default>
</layout>

当查看我网站的源代码时,我的 wc_styles.css 被包含在所有父主题 css 文件之上(都在 html head 标签内),所以我的自定义 css 规则基本上被取消了。

让自定义 CSS 发挥作用的正确方法是什么?

编辑注释:我只是想对 Magento 1.9 RWD 主题进行外观和感觉上的更改。我已经在

为我的子主题创建了文件夹

\app\design\frontend\wc\default

\皮肤\前端\wc\默认

我的 local.xml 放在:\app\design\frontend\warecompare\default\layout

我的wc_styles.css放在\skin\frontend\warecompare\default\css

这就是我网站的源代码,您看到我的 wc_styles.css 出现在父 styles.css 之上

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home page</title>
<meta name="description" content="Default Description" />
<meta name="keywords" content="Magento, Varien, E-commerce" />
<meta name="robots" content="INDEX,FOLLOW" />
<link rel="icon" href="http://localhost/mg1/skin/frontend/base/default/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://localhost/mg1/skin/frontend/base/default/favicon.ico" type="image/x-icon" />
<!--[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
var BLANK_URL = 'http://localhost/mg1/js/blank.html';
var BLANK_IMG = 'http://localhost/mg1/js/spacer.gif';
//]]>
</script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="http://localhost/mg1/skin/frontend/base/default/css/et_advancedcompare/noreload.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://localhost/mg1/skin/frontend/wc/default/css/wc_styles.css" media="all" />
<!-- big heap of javascript includes here-->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Raleway:300,400,500,700,600" />
<!--[if (lte IE 8) & (!IEMobile)]>
<link rel="stylesheet" type="text/css" href="http://localhost/mg1/skin/frontend/rwd/default/css/styles-ie8.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://localhost/mg1/skin/frontend/rwd/default/css/madisonisland-ie8.css" media="all" />
<![endif]-->
<!--[if (gte IE 9) | (IEMobile)]><!-->
<link rel="stylesheet" type="text/css" href="http://localhost/mg1/skin/frontend/rwd/default/css/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://localhost/mg1/skin/frontend/rwd/default/css/madisonisland.css" media="all" />
<!--<![endif]-->

最佳答案

Magento 会在处理完每个布局文件后处理local.xml 文件。因此,如果您想扩展某些内容或需要删除某些内容,可以使用 local.xml 文件。

通常情况下,通过 layout.xml 包含的 css 文件将最后加载。假设你试图通过不同的布局文件加载不同的 css 文件。查看演示

LAYOUT FILE         STYLE NAME          HANDLER USED
-----------------------------------------------------
layout1.xml => style1.css => default
=> style2.css => cms_page

layout2.xml => style3.css => default

layout3.xml => style4.xml => default
=> style5.xml => cms_page


local.xml => style6.xml => default

Note: layout files are shown in the loaded order in Magento.

如您所见,local.xml 文件终于被加载了。但它使用处理程序 default 添加了 style6.css。请注意,在 local.xml 文件之上加载的一些其他布局文件也使用了一些其他处理程序。这里 layout3.xmllayout1.xml 使用 cms_page 处理程序来添加一些 css 文件。当然,这些 css 文件只会在使用 cms 页面时加载。

假设我们加载了一个页面,其中使用了 cms 页面。示例是 Magento 的主页。所以布局的顺序在那里处理

ORDER OF LAYOUT HANDLE INVOKES
----------------------------------
default
cms_page

Note: Ignores other layout handlers that are using to load
home page of magento for the sake of simplicity

因此,对于上述场景,样式将以这种格式加载

ORDER OF STYLES LOADING
------------------------
style1.css
style3.css
style4.css

style6.css (style that we added through local.xml)

style2.css
style5.css

为什么这个顺序

Magento 首先考虑 default 处理程序。然后它将添加在布局文件的 default 处理程序下指定的 css 文件。布局文件将按照它们加载的顺序进行处理。加载通过 default 处理程序添加的所有 css 文件后,magento 现在考虑 cms_page 处理程序并且该过程继续。所以在我们的例子中,上面的 css 文件顺序将生成并按该顺序加载它们。

具体到这个问题

这里似乎在您的 css 文件之后添加了 styles.css。这通常不会发生。这是因为 styles.css 是通过 page.xml 文件和 default 处理程序添加的。所以它会在你的 css 文件加载之前先加载。因此,您的情况肯定会发生一些奇怪的事情。

特别注意:您不想使用此代码

 <action method="addCss"><stylesheet>css/wc_styles.css</stylesheet></action>

在您的 local.xml 文件中。够了

<?xml version="1.0"?>
<layout>
<default>
<reference name="head">
<action method="addItem">
<type>skin_css</type>
<file>css/wc_styles.css</file>
</action>
</reference>
</default>
</layout>

关于css - Magento 自定义 css 被父 css 覆盖 - 使用 local.xml,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25156808/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com