Jump to content


Photo

change theme color


  • Please log in to reply
9 replies to this topic

#1 amppromatic

amppromatic

    Advanced Member

  • Members
  • PipPipPip
  • 68 posts

Posted 09 February 2012 - 02:06 PM

How to change theme color in header and footer? I need to change custom one, not from options? www.pro-datum.com, write now I have red in header and footer, I want to gray color

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 09 February 2012 - 07:37 PM

Do you have Firebug for Firefox? You should get it at http://www.getfirebug.com

For the footer, I found this:
 #spotlight .effect, #footer .effect {
	    background: url("../images/colors/red-spotlight-effect-bg.jpg") no-repeat scroll center top transparent;
	}

That means that the background color is not set as a color, but as a graphic background. If you right click over the footer, then View Background you'll see it. It also explains why you still have a green bar at the bottom of your site - that's the actual background color still showing through.

Similarly, this code (below) affects the background of the features slider:
 #spotlight, #footer {
	    background: url("../images/colors/red-spotlight-rpt-bg.jpg") repeat-x scroll center top #960100;
	}

However there, you also have a color displayed. The color hex value: #960100 is the deep red. Replace the image AND change the hex value for the slider background with the exact grey you want.

#3 amppromatic

amppromatic

    Advanced Member

  • Members
  • PipPipPip
  • 68 posts

Posted 10 February 2012 - 03:20 AM

thanks. How to set up the background as a color and not as a graphic?

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 10 February 2012 - 04:07 AM

Use this code but replace XXXXXX with the hex code for the color you want:

 #spotlight .effect, #footer .effect {
	    background-color: #XXXXXX;
	}


#5 amppromatic

amppromatic

    Advanced Member

  • Members
  • PipPipPip
  • 68 posts

Posted 10 February 2012 - 05:53 PM

I put body{} #spotlight .effect, #footer .effect { background-color: #f7f7f7; } in css rule, but doesn't work? Can you check please?

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 10 February 2012 - 05:59 PM

Try this code instead:

 div#spotlight div.effect {
	background-color: #f7f7f7;
	}


#7 amppromatic

amppromatic

    Advanced Member

  • Members
  • PipPipPip
  • 68 posts

Posted 10 February 2012 - 06:40 PM

that actually work, but look at site www.pro-datum.com and I need to do for bottom too. I need go through all the way

#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 10 February 2012 - 09:15 PM

In theory, and by experimentation in my own site this did work:
 #spotlight .effect, #footer .effect {
	    background-color: #f7f7f7;
	}

I'm not sure if you removed spaces or if there's something else in your CSS that might be affecting it, perhaps from an unknown source.

#9 amppromatic

amppromatic

    Advanced Member

  • Members
  • PipPipPip
  • 68 posts

Posted 11 February 2012 - 06:50 AM

Thanks, let me check.

#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 11 February 2012 - 05:31 PM

Let us know if that code works for you.