0

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

I simply want to add the following CSS

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

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>

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

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.

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>

Thanks

1 Answer 1

5

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>

...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.

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.