WordPress.org

Ready to get started?Download WordPress

Forums

Hi All! New guy here with an edit question! (19 posts)

  1. vladanre
    Member
    Posted 2 years ago #

    First off I'm thrilled to be here. I look forward to exchanging ideas with all you fine people. To start, I have a question about changing the color of a widget on my site. What I'd like to change is the GREEN back ground color of the two side by side top widgets that have "Testimonials" in them. I've looked everywhere and I've found a solution or two but I really do not understand.

    Can someone please with sugar on top guide me through changing the color of the widgets? Here's a link to my site, you will see the green widgets right away, you can't miss it! :)

    http://realestatewestlosangeles.com/

    Also, what themes do you guys like? What theme's do you think look fluid and professional? What would you recommend for my site?

    Thanks in advance for the responses! :))

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

  3. michael.mariart
    Member
    Posted 2 years ago #

    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;

  4. vladanre
    Member
    Posted 2 years ago #

    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! :)

  5. vladanre
    Member
    Posted 2 years ago #

    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! :)

  6. michael.mariart
    Member
    Posted 2 years ago #

    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.

  7. vladanre
    Member
    Posted 2 years ago #

    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!

  8. michael.mariart
    Member
    Posted 2 years ago #

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

  9. vladanre
    Member
    Posted 2 years ago #

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

  10. michael.mariart
    Member
    Posted 2 years ago #

    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.

  11. vladanre
    Member
    Posted 2 years ago #

    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?

  12. michael.mariart
    Member
    Posted 2 years ago #

    Um... Yes, it's different. You didn't change the background value, which is what you wanted to change anyway.

  13. vladanre
    Member
    Posted 2 years ago #

    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.

  14. michael.mariart
    Member
    Posted 2 years ago #

    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.

  15. vladanre
    Member
    Posted 2 years ago #

    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??

  16. vladanre
    Member
    Posted 2 years ago #

    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! :))

  17. michael.mariart
    Member
    Posted 2 years ago #

    You can use any image program. The main ones that everyone knows are Photoshop, Fireworks, even Microsoft Paint if you can use that. Anything that can save a .gif file really.

    When you create the file, you will need to upload it to your web server. It will be in the folder:

    wp-content/themename/images/feature-top-bg.gif

    Of course, substitute your own theme name for 'themename' in there.

  18. vladanre
    Member
    Posted 2 years ago #

    Ok great! I know how to make GIF's in PS. How do I upload it to my web browser? You mean Firefox or Chrome? Never had experience with it before..

  19. michael.mariart
    Member
    Posted 2 years ago #

    Not web browser. Web server. BIG difference.

    You need to use FTP to transfer the file. http://codex.wordpress.org/Uploading_WordPress_to_a_remote_host

Topic Closed

This topic has been closed to new replies.

About this Topic