CODEWITHSUNDEEP
css
user1085567
user1085567

Reputation: 21

Make CSS background not override by others?

I am working on joomla template, and i make a custom button inside module, but the button css is override by module css. how can i fix this. help would be appreciated.

This is css i want for the button:

.button-middle {
    background: url("../images/button-mid.gif") repeat-x scroll 0 0 transparent;
    color: #FFFFFF;
    float: left;
    height: 27px;
    line-height: 27px;
}

The code below has override button background :(

div.module div div div div, div.module_menu div div div div, div.module_text div div div div, div.module_grey div div div div {
    background: none repeat scroll 0 0 transparent;
    margin: 0;
    overflow: hidden;
    padding: 0;
}
template_css.css (line 342)
div.module div div div, div.module_menu div div div, div.module_text div div div, div.module_grey div div div {
    background: url("../images/module_default/mod_tlb.png") no-repeat scroll left top transparent;
    padding: 0 15px 15px;
}
template_css.css (line 304)
div.module div div, div.module_menu div div, div.module_text div div, div.module_grey div div {
    background: url("../images/module_default/mod_trb.png") no-repeat scroll right top transparent;
    padding: 0;
}

Upvotes: 2

Views: 2652

Answers (3)

Pedryk
Pedryk

Reputation: 1663

Add !important at the end of the background:

  background: url("../images/button-mid.gif") repeat-x scroll 0 0 transparent !important;

Upvotes: 9

J. Holmes
J. Holmes

Reputation: 18546

If you have control over the markup you might be able to get away with adding an id attribute and then making your background selector #someid. As far as I can tell there were only class and element selectors, a single id selector might trump them all.

Disclaimer: im on the train and I can't test it right now. This could be totally incorrect. I also don't have the CSS specificity spec up to check either.

Edit:

Consider the following markup:

<div id="info" class="module">
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div class="test">
                                data
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

And then the following css:

.test { background-color: red; } /* 0,1,0 */
div.module div div div div div div { background-color: blue; } /* 0,1,7 */
#info .test { background-color: green; } /* 1,0,1 */

The word "data" will have a background color of green.

Even if you can't easily change the markup to add an id, try to find an id any where in the parental chain or you could write your selector as div.module .button-middle { ... }, which still classifies as a 0,2,1. As long as your style is more specific than the one you are trying to override, it will trump.

fiddle here.

And a couple of links on specificity: here and here.

Upvotes: 1

Jamie Dexter
Jamie Dexter

Reputation: 193

Does the <link> declaration for your custom CSS file (if you're using one) come after Joomla's included CSS files within your <head> section? If you're not using a custom CSS file, do consider it - it means you can completely skirt similar issues by having your own selectors "trump" Joomla's by the simple virtue of having your CSS load last (thereby taking higher priority).

<!-- Joomla styles -->
<link rel="stylesheet" href="joomla.css" />
<!-- anything in here overrides anything in "joomla.css" -->
<link rel="stylesheet" href="custom_styles.css" />

(Omit the / from the closing brackets for HTML 5.)

If you've had this issue once, believe me that you'll have it again. (And again...)

Upvotes: 2

Related Questions