aDv*_*Dvo 4 css themes magento
我有一个简单的local.xml尝试在我的head块中包含一个自定义的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主题进行外观修改.我为我的副主题创建了文件夹
\程序\设计\前台\ WC\DEFAULT
\皮肤\前端\ WC\DEFAULT
我的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可以使用文件.
通常,包含的css文件layout.xml最后会加载.假设您尝试通过不同的布局文件加载不同的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文件最后被加载.但它style6.css使用处理程序添加default.请注意,上面加载的一些其他布局local.xml文件也使用其他一些处理程序.这里layout3.xml并layout1.xml使用cms_pagehandler来添加一些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文件顺序将生成并将按顺序加载它们.
这似乎styles.css是在你的css文件之后添加的.这通常不会发生.那是因为styles.css通过page.xml文件和default处理程序添加.所以它会在你的css文件加载之前加载.所以肯定会在你的情况下发生一些奇怪的事情.
特别NOte:您不想使用此代码
<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>