Background color module "COME AND JOIN OUR,,,"

I try to change the red background color of the module "COME AND JOIN OUR COMMUNITY" with the override function in template:

.box.color, #gkHeaderBottom .box {
background: none repeat scroll 0 0 black !important;
color: #B5B9DA;
}

When i change this in firebug it works fine, but it doesnt with override. What is the thing i miss?

Thanks

Could You please post an url to your site?

http://www.elitrotterdam.nl/new/

thanks

"DISCOVER NEW ADVENTURES" i could change with the override...strange

Could you leave your modifications in override.css and post them here also (modification corresponding current issue).

In the template i added in advanced settings / cusstom css code:

#gkHeaderBottom {
background: none repeat scroll 0 0 #660000;
}
#gkHeaderBottom .box {
background: none repeat scroll 0 0 #660000 !important;
color: #FFB1AE;
}

My override css looks like this:

Code: Select all

/*
#------------------------------------------------------------------------
# (M)Social - August Joomla! template (for Joomla 2.5)
#
# Copyright (C) 2007-2013 Gavick.com. All Rights Reserved.
# License: Copyrighted Commercial Software
# Website: http://www.gavick.com
# Support: [email protected]
*/

/* Here you can include your override CSS styles */

#gkToolbar {
   left: -260px;
   margin-top: -180px;
   position: fixed;
   top: 50%;
   -webkit-transition: left .3s ease-out;
   -moz-transition: left .3s ease-out;
   -ms-transition: left .3s ease-out;
   -o-transition: left .3s ease-out;
   transition: left .3s ease-out;
   width: 260px;
   z-index: 1000;
}

#gkToolbar.hidden {
   left: -320px;
}

#gkToolbar.active {
   left: 0;
}

#gkToolbar > div {
   background: #fff;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   border: 1px solid #ddd;
   border-left: none;
   padding: 14px;
   position: relative;
   width: 260px;
}

#gkToolbar label {
   clear: both;
   display: block;
   font-size: 12px;
   padding: 5px 0;
}

#gkToolbar select {
   width: 90%;
}

#gkHandler {
   background: #fff;
   border: 1px solid #ddd;
   border-left: none;
   color: #333;
   cursor: pointer;
   font-size: 26px;
   height: 40px;
   line-height: 40px;
   position: absolute;
   right: -40px;
   text-align: center;
   top: -1px;
   width: 40px;
}

#gkHandler > i {
   color: #555;
   padding-right: 0!important;
}

#gkToolbar h2 {
   font-size: 16px;
   font-weight: 600;
   margin-bottom: 16px;
   text-transform: uppercase;
}

#gkStyleArea {
   float: left;
   margin: 16px 0!important;
}

#gkStyleArea a {
   display: block;
   float: left;
   height: 14px;
   margin: 1px 8px 0 0;
   width: 14px;
}

#gkStyleArea a:hover {
   -webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -ms-transform: scale(1.2);
   -o-transform: scale(1.2);
   transform: scale(1.2);
}

@media (max-width: 600px) {
   #gkToolbar {
      display: none;
   }
}

#gkPatternArea  {
   overflow: hidden;
   padding: 5px;
}

#gkPatternArea > a {
   float: left;
   height: 40px;
   margin: 6px;
   text-indent: -9999px;
   -webkit-transform: scale(1.0);
   -moz-transform: scale(1.0);
   -ms-transform: scale(1.0);
   -o-transform: scale(1.0);
   transform: scale(1.0);
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
   width: 40px;
}

#gkPatternArea > a:hover {
   -webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -ms-transform: scale(1.2);
   -o-transform: scale(1.2);
   transform: scale(1.2);
}

#gkPattern1 { background-image: url('../images/patterns/mini_pattern1.png'); }
#gkPattern2 { background-image: url('../images/patterns/mini_pattern2.png'); }
#gkPattern3 { background-image: url('../images/patterns/mini_pattern3.png'); }
#gkPattern4 { background-image: url('../images/patterns/mini_pattern4.png'); }
#gkPattern5 { background-image: url('../images/patterns/mini_pattern5.png'); }
#gkPattern6 { background-image: url('../images/patterns/mini_pattern6.png'); }
#gkPattern7 { background-image: url('../images/patterns/mini_pattern7.png'); }
#gkPattern8 { background-image: url('../images/patterns/mini_pattern8.png'); }
#gkPattern9 { background-image: url('../images/patterns/mini_pattern9.png'); }
#gkPattern10 { background-image: url('../images/patterns/mini_pattern10.png'); }
#gkPattern11 { background-image: url('../images/patterns/mini_pattern11.png'); }
#gkPattern12 { background-image: url('../images/patterns/mini_pattern12.png'); }

#bgStyle,
#menuType {
   margin-bottom: 20px;
}
#gkBg {
 min-height: 100%;
    padding: 0;
    width: 100%;
    background: url("../images/background.jpg") repeat-x scroll 0 0 black ;
}

#gkTop {
    -moz-box-sizing: border-box;
    background: url("../images/menu_back.jpg") repeat scroll 0 0 #FFFFFF;
    min-height: 60px;
    padding: 0 50px;
    width: 100%;
}

Your custom css works from what I see.
Please be more specific - which change doesn't work?

I want the backgrounds to have the same color. The background of "discover new adventures" i have changed to more dark red color. But the "COME AND JOIN OUR COMMUNITY" background i cannot change.

What code do i need in the override?

This code should help:

Code: Select all

#gkBottom2 .box.color {background-color: #660000;}


I tried the code in override.css and in template custom css code, both didnt work. In firebug i can change the color when i change

Style1.css

Code: Select all

.box.color, #gkHeaderBottom .box {
    background: none repeat scroll 0 0 #008000 !important;
    color: #FFB1AE;
}

So it looks like this css file is overruling the other one.

---edit---

i put the above code in the override.css and somehow now it did the trick...do you understand why?

Please remove all previous changes and leave only this:

Code: Select all

#gkHeaderBottom
#gkHeaderBottom .box,
#gkBottom2 .box.color
background-color:#660000 !important;
color: #FFB1AE !important;
}


Not better to leave it this way, because it works?

Its exactly same, but instead of declaring same colour in 2 places you do it in one - but yes - you can leave it as it is.