Premium Theme Support › WooThemes › Crisp

Changing Color of Widget Graphic

  • Author
    Posts
  • #24986
    manwithoutqualities
    Member

    I’d like to change the colours of the 4 right hand side widget graphics (recent, archives, twitter, email) but not having looked at the CSS for 2 years, I’m somewhat lost. Cheers!

    The blog I need help with is: (visible only to logged in users)

    #25124
    scottbasgaard
    Member

    Hey there,

    Do you have the CSS upgrade from WP.com?

    You could use the following CSS as an example:

    #tabs ul.wooTabs {
    background: url(images/bg-widget-header.png) no-repeat right top;
    }

    This uses an image:

    You could add your own images or try a color:

    #tabs ul.wooTabs {
    background: #333333;
    }

    Hope this helps!

    #25125
    manwithoutqualities
    Member
    Original poster

    Wow, the author himself!! Great theme and one I’ve recommended to many others.

    Anyway, yes, I do have the CSS upgrade. When I add as per your suggestion (background: #333333) I lose the image and just get an ordinary block of color. What I’m trying to achieve is have those four images in this color #004225 with white text. I appreciate that my incompetence might well be getting in the way of your clear instructions . . . so please forgive me. Would it help for you to see my CSS sheet? Cheers,

    #25340
    scottbasgaard
    Member

    Hey again,

    Correct, you’ll lose the image since the background is actually an image and not CSS:

    #tabs ul.wooTabs {
    background: url(images/bg-widget-header.png) no-repeat right top;
    }

    If you’d like the images in #004225 you’ll need to edit them in something like Photoshop and use that for the images URL instead.

    Thanks again!

    #25346
    manwithoutqualities
    Member
    Original poster

    Thanks Scott. I understand now.
    Assuming I have the edited image, where do I upload the image to? My media file and then use that URL in the CSS?

    Cheers,

    #25348
    manwithoutqualities
    Member
    Original poster

    How did I manage to get the graphics coloured grey? I must have done something via the CSS to make the change from the standard blue. Now if I could do that again . . .

    #25388
    scottbasgaard
    Member

    Hey there.

    There are a few different color schemes bundled with this theme.

    These can be changed from your theme options.

    Assuming I have the edited image, where do I upload the image to? My media file and then use that URL in the CSS?

    Yup! That would work:

    #tabs ul.wooTabs {
    background: url(URL GOES HERE) no-repeat right top;
    }

    Cheers,
    S

    #25430
    ibrar2012
    Member

    I tried the following:

    #tabs ul.wooTabs {
    background: #3F7E33;
    }

    No change? Did I so something wrong? I thought without loading up Illustrator a simple css change could work for me instead? I tried the css above but it does not seem to work for at all.

    #25431
    scottbasgaard
    Member

    Hey again,

    That should work to change the color.

    To change the other widgets as well try:

    #tabs ul.wooTabs, .widget h3 {
    background: #3F7E33;
    }

    http://cld.wthms.co/lewz

    Kind Regards

    #25433
    ibrar2012
    Member

    Does work but you lose that cool little effect dont you? That little upside down triangle that creates depth effect?

    #25440
    scottbasgaard
    Member

    Correct, you’ll lose this as it’s an image:

    https://premium-themes.forums.wordpress.com/topic/changing-color-of-widget-graphic?replies=10#post-24278

    You’ll either need to make your own images and assign them with CSS or have a solid color with CSS.

    Thanks again!

    #25441
    manwithoutqualities
    Member
    Original poster

    Scott, how do I change the text in CSS of my widget “latest” back to white? I don’t recall what I did to get it this way and I don’t want to mess things up. Cheers!

    #25442
    scottbasgaard
    Member

    Try this out:

    #sidebar .latest .selected {
    color: #fff;
    }

    Thanks again!

    #25443
    manwithoutqualities
    Member
    Original poster

    Thanks very much.

  • The topic ‘Changing Color of Widget Graphic’ is closed to new replies.