Hi there,
Just looking at your theme and I can see that the widget headings are now blue. Did you find out how to make the change in the styles.css?
The style that needed changing was :
.sidebar h4 {
clear: both;
background: #013565 url(images/sidebar-h4-bg.gif) top left no-repeat;
color: #FFF;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 10px 0; padding: 8px 0px 8px 15px;
line-height: 13px;
}
But I’m guessing you know that now. 😉
Im your themes style.css file, at line 320 you’ll find this:
#feature-top, #feature-bottom {
background: url("images/feature-top-bg.gif") no-repeat scroll center bottom #134600;
color: #FFFFFF;
float: left;
margin: 0;
overflow: hidden;
padding: 0 0 10px;
width: 100%;
}
That’s where you need to make the change. Instead of:
background: url("images/feature-top-bg.gif") no-repeat scroll center bottom #134600;
Change it to something different. As an axample, for a nice bright red background (yeah I know… maybe not quite so nice, but just an example) you would use:
background: #FF000;
Hi Christine!
Thank you for the response. The widget headlines are blue and those I want to keep. WHat I wanted to change was the green side by side widget toward the top of my landing page. The one that has the two testimonials.
Let me know please if you have a solution! 🙂
Michael,
If I change the existing to “background: #FF000”, will it alter the Testimonial text that’s currently in there? I’d like to keep the text, just change the background color..
Another link to see what I’m talking about (Green bar across the site towards the top):
http://realestatewestlosangeles.com/
Thanks! 🙂
If you cnahge the value for background, it will only change the background colour. You would need to change ‘color: #FFFFFF;’ to change the text colour.
Ok I edited the existing:
“background: #134600 url(images/feature-top-bg.gif) bottom center no-repeat;”
to:
“background: #FF000;”
I saved the file and when I went to the page the whole green bar with the testimonial was gone! Thankfully I saved the original line in my note pad and I was able to reverse the problem! 🙂
Still need solution..
The line “#134600 url(images/feature-top-bg.gif) bottom center no-repeat; “,
134600 refers to the green color I am trying to change. However, when I changed the number to a number off the color wheel and saved the file, the changes did not reflect on the site, it was still green!
Just changing only that bit won’t remove the whole thing, unless you’ve made an error with the CSS style that you’ve typed in.
Changing the green colour in that line won’t change the actual colour becasu you still have the background image (that’s green itself) set to show, and images have precidence over colours. Remove everything except the colour, and you will be able to see the change.
Oh, and remember that most browsers cahce CSS files pretty well, so most times you will need to do a hard refresh to see if (Control-Refresh in IE, and Shift-Refresh in all other browsers).
I tried that too! Took off the image and just left the color code and it went blank.. it looked like this:
“background: #134600”
Then when I went to check the outcome, the site just had a blank bar running across where the green and testimonial text once was..
Is it blank, or is is white text on a white background? I’ll bet pretty much most things that you’ve made an error changing the CSS, and it’s removed the background, leaving it white or ‘none’.
Use this:
#feature-top, #feature-bottom {
background: #FF0000;
color: #FFFFFF;
float: left;
margin: 0;
overflow: hidden;
padding: 0 0 10px;
width: 100%;
}
I know that works. I’ve made that change using FireBug here, and it shows a bright red background in that area.
Here’s what it looks like now:
#feature-top,
#feature-bottom {
width: 100%;
background: #134600 url(images/feature-top-bg.gif) bottom center no-repeat;
color: #FFF;
float: left;
margin: 0px; padding: 0px 0px 10px 0px;
overflow: hidden;
Does differ than what you have?
Um… Yes, it’s different. You didn’t change the background value, which is what you wanted to change anyway.
Ok I figured it out.. Sort of..
I changed the line:
background: #134600 url(images/feature-top-bg.gif) bottom center no-repeat;
to:
background: #563433 bottom center no-repeat;
and the result was a change in color, and the text was still there. The problem is that I’ve lost the 3D shading effect on the bottom. I’m assuming that the shading effect was created by the .gif which sits on top of a blank back ground.
So how do I import a different color .gif to my specs?
Or not?
I have no idea.
You only need the colour. ‘bottom center no-repeat’ is only valid for images, so it’s no use having it there if there’s no image.
You didn’t say before that you wanted to keep the gradient… If that’s the case it could make it a bit easier – as long as you can create a new image yourself. All you need to do is create a new .gif image with the gradient and colours that you want that is the same file name as the current image, then upload that over the top of where the current image is. that’s all that you’d need to do.
Ok, so after some trial and error, I need to change the .gif fine in this line:
background: #134600 url(images/feature-top-bg.gif) bottom center no-repeat;
The #13460 refers to the green I want to lose, and the “url(images/feature-top-bg.gif)” is what’s giving it the pop shading effect. What does url(images/feature-top-bg.gif) mean? is it an address for a green .gif file??
Thanks Michael for your patience, sending good karma your way!
“as long as you can create a new image yourself. All you need to do is create a new .gif image with the gradient and colours that you want that is the same file name as the current image, then upload that over the top of where the current image is”
1. What program/web site can I use to create the image?
2. Assuming I create with the same file name “url(images/feature-top-bg.gif)” do I just store it on my desktop?
Please elaborate! :))
