如何将CSS应用于Magento CMS页面 [英] How to apply CSS to Magento CMS Page

问题描述

我已经跟踪了Google搜索中出现的所有教程，以向Magento CMS页面添加简单的CSS样式.

I have followed every tutorial that came up in Google search to add a simple CSS styling to a Magento CMS page.

我只想添加以下CSS

I simply want to add the following CSS

.list-checkmark{
    list-style-image: url("../images/Check-Mark-2.png");
    margin-left: 3em;
}

到我的页面 http://demo.txsystems.com/index.php/integration -service 这是一个CMS页面，我添加了以下内容

to my page http://demo.txsystems.com/index.php/integration-service This is a CMS page, and I have added the following

<reference name="head">
  <action method="addItem">
    <type>skin_css</type><script>MyCss.css</script>
  </action>
</reference>

在Magento管理员中，此页面的布局更新XML.

To the layout update XML of this page in Magento admin.

我已将文件myCss.css添加到/var/www/html/skin/frontend/default/hellogamez/css

I have added the file myCss.css to /var/www/html/skin/frontend/default/hellogamez/css

请帮助我了解，我还缺少什么，该图像在相应的图像文件夹中.

Please can someone help me to understand, what else I am missing, the said image is in the appropriate image folder.

当然，在CMS页面中，这是我要应用格式的UL列表，我使用的是Magento 1.7

And of course in the CMS page here is the UL list that I am trying to apply the formatting, I am in Magento 1.7

<ul class="list-checkmark">
<li>PCs (laptop, desktop, tablet)</li>
<li>Portable and Desktop Printing Systems</li>
<li>First Responder Devices</li>
<li>Vending Machines</li>
<li>Handhelds</li>
<li>Medical Devices and Testing Equipment</li>
<li>Multifunctional Printers</li>
<li>Industrial Control Systems</li>
<li>Storage and Locker Systems</li>
<li>Event Ticketing</li>
<li>Asset Tracking</li>
<li>Commercial Ovens</li>
</ul>

谢谢

推荐答案

这个主意不错，但看起来您可能是从错误的地方撤离了.

The idea is good, but looks like you may be pulling from the wrong spot.

<reference name="head">
  <action method="addItem">
    <type>skin_css</type><script>MyCss.css</script>
  </action>
</reference>

...将从核心代码文件夹中提取. 而是使用:

...will pull from the core code folders. Rather use:

<reference name="head">
<action method="addCss"><stylesheet>css/MyCss.css</stylesheet></action>
</reference>

...将从您描述的位置加载: 皮肤/前端/默认/hellogamez/css/MyCss.css ...并在与其他CSS调用相同的群集中注入您的页面加载量.

...which will load from the location you described: skin/frontend/default/hellogamez/css/MyCss.css ...and inject into your pageload in the same cluster as the other css calls.

然后确保您的图像位于与css文件夹相同级别的images文件夹中，即: 皮肤/前端/默认/hellogamez/images/Check-Mark-2.png

Then make sure your image is in the images folder on the same level as that css folder ie: skin/frontend/default/hellogamez/images/Check-Mark-2.png

还请注意，如果您使用local.xml方法加载整个站点，则可以使用相同的代码段.

Also note that if you use the local.xml method to have it load site wide, you can use this same code snippet.

这篇关于如何将CSS应用于Magento CMS页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！