Magento – CSS Editing Guide

csscustom

I'm new to Magento, with very little coding background to boot. I was hoping for some general direction with CSS customization.

I'm learning to add custom CSS rules that don't affect the default theme I have loaded into Magento. Currently, I understand that process as adding rules, via ftp, to custom.css within the theme's css directory.

Is this considered good practice within Magento?

Best Answer

Well welcome to Magento!

First, I would read this PDF from Magento about Designing a theme.

In regards to your question. In your local.xml (app/design/frontend/YOURPACKAGENAME/YOURTHEMENAME/layout/local.xml) you will need to add something like this:

<layout version="0.1.0">
    <default>
        <reference name="head">
            <action method="addCss"><stylesheet>custom.css</stylesheet></action>
        </reference>
    </default>
</layout>

Next, create your custom.css here: skin/frontend/YOURPACKAGENAME/YOURTHEMENAME/css

I would create your own theme (the PDF will help) rather then editing the base/default. The PDF will show you how to set it up.

Word of advice, it will take awhile to figure everything out. I have been working with Magento for 5 years everyday and I still learn new things. I would also learn version control. Version control is your friend and does take a while to figure out now, however you will save yourself time down the road.

Related Topic