[Mini Tutorial] How to overwrite Magento Default Styles: reset.css

Resetting your styles, commonly referred to as Reset CSS is the process of setting the styles of all elements to a baseline value so that you avoid cross-browser differences due to their built-in default style settings. By resetting your styles, you avoid defaulting to the browser’s built-in styles, which differs from browser to browser. Magento comes with a default CSS file that sometimes can get in the way of your styling. The default colours, fonts and overall background styles might not suit your needs or come in your way for all those modules/extensions you don’t necessarily use everyday.

This file can be located at /skin/frontend/enterprise/default/css/styles.css.

Another thing you’ll find on that file are rules with !important on them. This is something we Front-end Developers tend to dislike. Like Chris Coyier says in his article When Using !important is The Right Choide

Using !important in your CSS usually means you’re narcissistic & selfish or lazy. Respect the devs to come…

Most of our clients, not to say all of them, really wants (and this is a good thing) that a website looks the same in almost every web browser, so every professional developer should consider using some form of reset css for his project. But what’s best the way to do it?

Overwrite Magento default Styles

If you’ve been working with Magento for a while you’ll know that there is always several solutions to a single problem. It all comes to what do you find is best in terms of:
– Development
– Maintenance
– Optimization

With that said, here are some solutions on how to overwrite the Magento default styles.

Let’s go through some solutions based on one of some of the Phases from the best scene from 21 Jump Street movie.

PHASE 1 – The Giggs

Make a copy of styles.css on your theme folder /skin/frontend/enterprise/ /css/styles.css. Overwrite all the styling required. This is the single most basic solution. Although if you think about maintainability or think about your fellow developers you’ll realize that this is not the best way to go.

Keep this in mind, the original styles.css files comes with 2,583 lines of code. Easy to maintain right?

Phase 2 – Over-Falsity of Confidence


What if we create a new CSS file to overwrite all the Magento styles?

All our code will be in one single file, separated from the 2,583 default lines. This will be easier to read and maintain.

Here’s how to do it:

Include a new css file for your site on your local.xml. Make sure this file is loaded after the default styles.css (if you’re also using solution 1).

<?xml version="1.0" encoding="UTF-8"?>
<layout>
    <default>
        <reference name="head">
            <action method="addCss"><stylesheet>css/sitename.css</stylesheet></action></pre>
        </reference>
     </default>
</layout>

But wait, how about the !important in the styles.css file? And how about the default background images and colours that come with styles.css file?

Phase 3 – F*ck Yeah!

I’ve been working, along with my colleague Valentina in a reset.css to remove all the margins, paddings, backgrounds images and default colours that come in the styless.css file. I’ve call it reset.css.

This file is just a starting point to clear all the default styling. I don’t like to say this is the only solution. But it’s a nice first step when you don’t want to see the default magento “reddish” hover colour or negative margins.

If you see the file, yes I’ve used a lot of !important in it. The first idea creating that file was not to overwrite any rules on the styles.css file. Is this the best way to proceed? You’ll be the judge of that. It has worked for me.

To make it work all you need to do is include the download a copy of reset.css into your theme folder and start working on your own sitename.css file like usual.

<?xml version="1.0" encoding="UTF-8"?>
<layout>
    <default>
        <reference name="head">
            <action method="addCss"><stylesheet>css/reset.css</stylesheet></action></pre>
            <action method="addCss"><stylesheet>css/sitename.css</stylesheet></action></pre>
        </reference>
     </default>
</layout>

Note: Use the file at your own risk and please collaborate on the project to create a reset.css file to clean Magento defaults.