WordPress.org

1. James
   Member
   Posted 7 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!

2. WPyogi
   Volunteer Moderator
   Posted 7 months 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 7 months 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 7 months 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 7 months 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
   Volunteer Moderator
   Posted 7 months 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!

Reply

You must log in to post.