Module background color will not change

GK User
Sat Mar 17, 2012 10:50 am
I have a menu module that i would like to change the color of the background from white to another color and add a header image. I have created the suffix and it does work. The padding and border work perfectly. When i look at it from firebug i see that it is being overridden by the other CSS items. In the example below you can not see the line through for div.mymenu. I just can not see where my problem is.

The code from firebug is shown below and the code from my css is below that.
code from firebug
Code: Select all
#gkPage .box:first-child, #gkPage .box_menu:first-child, #gkPage .box_text:first-child {
    margin-top: 0 !important;
}
template.css (line 153)
#gkPage .box, #gkPage .box_menu, #gkPage .box_text {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 2px 2px 2px 2px;
    margin-top: 8px;
    overflow: hidden;
}
template.css (line 150)
div.mymenu {
    background-position: center top;
    border: 2px dashed #DDDDDD;
    padding-top: 52px;
}


my css code from line 337 in the template.css file

Code: Select all
div.mymenu {
    border: 2px dashed #ddd;
    background-color: #red;
   background-position:top;
   padding-top:52px;
}
User avatar
Junior Boarder

GK User
Sat Mar 17, 2012 12:23 pm
If you try to set color by 'red' you don't need # before, please look at w3schools for more details >> http://www.w3schools.com/html/html_styles.asp
User avatar
Platinum Boarder

GK User
Mon Mar 19, 2012 12:13 pm
Sorry about the # in front of the red. It was a typo(i had a #990033 before i changed it to red), but even without it i am still being overridden by the other items and can not get the background to go the color i would like or add the image to the top of the module. I really do not want to change all my menus to the red color, just this module. I still can not see the error. Thanks in advance
User avatar
Junior Boarder

Konrad M
Mon Mar 19, 2012 12:43 pm
Did you try add '!important' rule to css rule ?
User avatar

GK User
Mon Mar 19, 2012 1:09 pm
Thanks Conrad, that works. I also tried to add the 'header' image to the module and it was also necessary to add the !important. Can this '!important' cause the css code to break? I know it should not break with my module suffix because it is different than the suffix/classes/ids in the template, by adding this is there a risk?
User avatar
Junior Boarder

Konrad M
Mon Mar 19, 2012 1:14 pm
It depends. Becasue if you are using your suffix name in selector and you didn't add this suffix to another modul it shouldn't break code in diffrent places than this one with your suffix. But if you add this to class used in diffrent places than this module it can affect rest of them.
User avatar

GK User
Mon Mar 19, 2012 1:45 pm
Thank you again, Conrad :)
User avatar
Junior Boarder


cron