Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make CSS background not override by others?

Tags:

css

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;
}
like image 824
user1085567 Avatar asked Jan 29 '26 07:01

user1085567


2 Answers

Add !important at the end of the background:

  background: url("../images/button-mid.gif") repeat-x scroll 0 0 transparent !important;
like image 107
Pedryk Avatar answered Jan 30 '26 22:01

Pedryk


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...)

like image 24
Jamie Dexter Avatar answered Jan 30 '26 22:01

Jamie Dexter



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!