Thursday, December 31, 2015

Adding Custom CSS to a Specific Page in Magento

You Can Add your Own Style in Your E-Commerce Website Running on Magento CMS. 

Your Brand is different so you would like to add some unique style to showcase your e-commerce website. In Magento The flexibility is little less as compared to any other open source CMS. However you can add your custom cascading style sheet to your magento CMS and eventually your custom e-commerce website. 

If you would like to add custom CSS code to a specific page in Magento,

Open that particular page via the Magento Admin Panel and, under ‘Page Information’ > click on the ‘Design’ tab. Subsequently, under ‘Page Layout’, within the ‘Update Layout XML’ text-box, append the following lines and save your changes.


1 <referencename="head">
2 <actionmethod="addCss">
3 <stylesheet>css/your-custom-file.css</stylesheet>
4 </action>
5> </reference>


Interesting tit-bit here is that, you need not specific your theme path like, your-theme/css/.. as it’s already configured (via System > Configuration > Design > Themes in the Magento Admin Panel).Magento will generate the full URI path for your custom CSS file -> by looking up your active theme and then, a file named ‘your-custom-file.css’ (as in above example) in a sub-directory named ‘css’. The complete URI path will be Like,

http://yoursite.com/skin/frontend/default/your-theme/css/your-custom-file.css

Article By www.ScriptoGraphics.com . A Magento eCommerce Web Development Company

No comments:

Post a Comment