Styling an individual widget?

  • Twiggs462

    (@jamesderosa3gmailcom)


    12 years, 4 months 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!

Viewing 5 replies - 1 through 5 (of 5 total)

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

    Thread Starter Twiggs462

    (@jamesderosa3gmailcom)

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

    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

    Thread Starter Twiggs462

    (@jamesderosa3gmailcom)

    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!

    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!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Styling an individual widget?’ is closed to new replies.