Add external stylesheet link-rel head tag

Question

Knewb here, I want to add external stylesheets via link rel to the head tag list of my store in version 1.9. I am also using Ultimo theme.

• Can it be done?
• What is the name of the file I am looking for (local.xml?) ?
• What is the path where it is located ?
• How is the code written ?
• How does the code work ?
• Any other information that might help.

Currently my custom.css file is getting extremely long and fragile.

I know I am asking for a lot but any help is appreciated. Thanks.

Answer 1

Local Css

1. You can download that css file for exemple newcssfile.css , then you add it in :

   skin/frontend/{package}/{themeName}/css/newcssfile.css

2. Magento doesn't know this new file, so you have to declare it in :

   app/design/frontend/{package}/{themeName}/layout/local.xml

   <?xml version="1.0" encoding="UTF-8"?>
   <layout version="0.1.0">
       <default>
           <reference name="head">
               <action method="addItem"><type>skin_css</type><name>css/newcssfile.css</name></action>
           </reference>
       </default>
   </layout>
   

External Css

app/design/frontend/{package}/{themeName}/layout/local.xml

<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.1.0">
    <default>
        <reference name="head">
            <block type="core/text" name="external-css-1">
                 <action method="setText">
                     <text><![CDATA[<link rel="stylesheet" type="text/css" href="http://path-to-your-external-newcssfile.css">]]></text>
                 </action>
             </block>
        </reference>
    </default>
</layout>

Note: if you already have the local.xml file, you just add the piece of code between <reference name="head">...</reference> in that <reference name="head"> block.

Currently my custom.css file is getting extremely long and fragile.

You have to create another css file, follow the same steps 1&2 of Local Css part, just change the css name for exemple styledond.css in : skin/frontend/{package}/{themeName}/css/styledond.css, and <action method="addItem"><type>skin_css</type><name>css/styledond.css</name></action>

Good luck.

Answer 2

If you have custom css file then you can add it in your theme local.xml file. You can read out this post for help:

Magento 1.9 : Add custom css file to head

If it is external file then you can add it from admin, in web->design block head section.

Answer 3

You can edit file here:

/app/design/frontend/ultimo/default/layout/local.xml

Add below code in head section.

<action method="addItem"><type>skin_css</type><name>css/custom.css</name><params/></action>

Then add your custom.css below location

/skin/frontend/ultimo/default/css/custom.css