WordPress.org

Forums

Styling an individual widget? (6 posts)

  1. James
    Member
    Posted 2 years ago #

    I have WooCommerce installed and I want to put a border around the cart widget. Using Firebug I can see that when the page is loaded I get a DIV of:

    <div id="shopping_cart-4" class="widget widget_shopping_cart substitute_widget_class">

    for this particular widget and I want to ad a border around this:

    border: 5px dashed #999777;

    I have tried adding this in my styles.css with no luck:

    .widget .widget_shopping_cart {
    border: 5px dashed #999777; }

    Any ideas? Thanks!

  2. WPyogi
    Forum Moderator
    Posted 2 years ago #

    May not be specific enough - -try this:

    #shopping_cart-4.widget_shopping_cart

    If that does not work, can you post a link to your site?

  3. James
    Member
    Posted 2 years ago #

    It worked... but only on one page... gotta see where the other CSS styles are located for the others. Great! Thanks!

  4. kevinhaig
    Member
    Posted 2 years ago #

    Although frowned upon, I've had occasions to use !important when formatting widgets. So try :

    .widget .widget_shopping_cart {
    border: 5px dashed #999777!important; }

    Also when you are trying to do these kinds of changes I find the Firefox Firebug developers tool to be very helpful. You can quickly play with the CSS on the fly with out changing your original.

    Cheers

  5. James
    Member
    Posted 2 years ago #

    I was using firebug to determine the DIV code initially. But could not get the CSS to work. However I will try your important CSS code to see if that helps the rest of the pages... Or I might have to create new CSS styles for each page.

    At this point I think I'm good though. Thank you all for the help!

  6. WPyogi
    Forum Moderator
    Posted 2 years ago #

    It may be that shopping_cart-4 is page specific? I can't tell much without seeing the site. So look at that piece of it.

    @kevin -- agree with you on !important -- try to avoid it, but sometimes ya gotta do it when the CSS is just too convoluted or cranky!

Topic Closed

This topic has been closed to new replies.

About this Topic