1

I've got this style in style.css:

.nav-container {
    margin-left: 80px;
}

I'd like to overwrite this, so I created a custom.css in my themes folder:

.nav-container {
    margin-left: 40px;
}

and added it in my themes page.xml:

<action method="addCss"><stylesheet>css/custom.css</stylesheet></action>

Unfortunately I see my class being overwritten by custom-menu in firebug:

.nav-container {  
    float: left;
    margin-left: 80px;
} #(custommenu.css)

.nav-container {
    margin-left: 40px;
} #(custom.css)

How can I get this working? Where do I have to add my custom.css to be able to overwrite the custom-menu?

Thanks

Improve this question

4 Answers 4

Reset to default
3

What's happening:

This is likely due to custommenu.css being loaded after your custom theme. One way to combat this is, instead of using page.xml, to put the declaration in local.xml of your theme's layout folder. This will be loaded last and therefore your css overrides will come last.

A better way:

Another way to handle this is to create a custom layout file and reference it from a local module's config.xml:

    <layout>
        <updates>
            <customizer>
                <file>custom.xml</file>
            </customizer>
        </updates>
    </layout>

In the module's app/etc/modules/YourCompany_YourModule.xml declaration you will set its' dependency to whichever module is adding custommenu.css:

<?xml version="1.0"?>
<config>
    <modules>
        <YourCompany_YourModule>
             <active>true</active>
             <codePool>local</codePool>
             <depends>
                <Company_Custommenu/>
             </depends>
        </YourCompany_YourModule>
    </modules>
</config>

Your new file custom.xml can have the css declaration. This may seem a bit extreme but in my opinion is more correct, avoids local.xml declarations, and properly sets the dependency.

Another, nother, way:

This is the brute-force-getterdone method. First, check where custommenu.css is coming from. It's likely from something similar to skin/frontend/base/default/css/custommenu.css - if so, your local theme can provide an override.

Copy the custommenu.css file to skin/frontend/yourpackage/yourtheme/css/custommen.css and make your local edits there. Ba-blam: now you've overridden the file without disturbing the original file itself.

Improve this answer
2

As !important is a CSS-ish way to solve the problem I want to add another CSSish way. As you may know, CSS weights the different declaration based on selector. So you just need to add a more specific selector, like 

#myid .nav-container {}
div.nav-container {}
html .nav-container {}

etc.

This is explicit an off topic answer, but solves the problem

Improve this answer
0

The easiest method, and the one best for future updates, would be to add a theme-specific "id" to the "body" tag, then create a custom.css file that references that theme-specific id for every style change or addition you make.

Like "dagfr" stated, more specific css selectors will override less specific ones.

For example, let's say I have a theme called "my-theme". I would add that to the body id:

<body id="my-theme">

Then anything you add to the custom.css file should have that selector in front of it. For example, if I wanted to override the "wrapper" class, it would look like this:

#my-theme .wrapper { styles here }

Edit:

This is also a great way to implement split a/b testing. Simply changing the theme-specific id randomly between 2 or more that are different, you can split test anything you want.

Improve this answer
-1

try this add important for your custom css like

.nav-container {
    margin-left: 40px !important;
} #(custom.css)
Improve this answer
3
  • !important is definitely a bad idea. Consider just removing or editing the style.css to remove the useless line. If you still need this one for another purpose, you have to be sure to load custom CSS after the original one to have your custom CSS overwritting the default one. Another way is to have a more specific CSS rule to define your element more precisely and so overwrite the general call
    – dagfr
    Commented Dec 20, 2013 at 13:43
  • ok.just add another class for that element and give your style with important
    – MeenakshiSundaram R
    Commented Dec 20, 2013 at 13:58
  • Adding !important is an antipattern and should be avoided. This can be addressed by adding a new class or by increased specificity.
    – philwinkle
    Commented Dec 20, 2013 at 16:37

Your Answer

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

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