How to add padding between items

  • Resolved keeleon

    (@keeleon)


    10 years, 5 months ago

    OK, so I am at my wit’s end trying to figure this out. I am very noobish to PHP and CSS, but I understand the base concepts. I would like to have more space between my items as seen on my page here: http://www.thebrasswardrobe.com/shop/

    The price is sitting right on top of the next item, and I’d like there at least to be a break or some space. I’ve tried reading the internet, but everyone seems to be talking above my head 🙁 I downloaded firebug, and got to the point wherE I know the products are all contained in “ul class” and are each called “li class”, and I have a feeling it’s just as simple as adding some padding in there somewhere. Except, I have NO idea where!

    I have seen references to adding “ul.products li.product .price {margin-bottom: 1em;}” (http://wordpress.org/support/topic/adjust-padding-under-product-price), except, I have NO idea what file I need to be adding that to. I tried adding it to my theme’s CSS, but it didn’t do anything, and I didn’t see any place in there that would call for those properties/fields anyway. I finally broke down and logged into my FTP to find the woocommerce.css, since it didn’t show up in the WP editor, but it’s formatting is awful (as others have mentioned) and I have no idea what I’m even looking at.

    So in very dumbed down terms, can someone tell me which file I am suppose to be editing to make this change, and where I’m supposed to put it? Is it my theme or the plugin? I have to imagine it’s my theme, since woocommerce has no mention of editing this value, and I cant imagine items sitting on top of each other like that is acceptable to anyone… But I am finding no place in my theme’s code (which I have customized a bit myself) that references li, ul or class anywhere.

    http://wordpress.org/plugins/woocommerce/

Viewing 4 replies - 1 through 4 (of 4 total)
  • WPyogi

    (@wpyogi)

    10 years, 5 months ago

    You should avoid modifying theme or plugin files (unless there is a special place to add your own CSS) – as those changes are lost when the theme or plugin is updated. Instead install a custom CSS plugin and add CSS there. Try this:

    .products img {
   margin-top: 20px;
   margin-bottom: 10px;
}

.products li {
     list-style-type: none;
}

    Thread Starter keeleon

    (@keeleon)

    10 years, 5 months ago

    I can’t help but just laugh….

    Yes, that did EXACTLY what I wanted! Now would you mind telling me what exactly I did? What does “.products” reference, and how does it know to reference it? Are both of these pieces required to add the padding? Did I actually add the padding to the picture, instead of to the bottom of the container? I’m all for “here do this and shut up” solutions, but I do also like knowing what I’m doing so I can understand the process.

    Thank you so much!

    WPyogi

    (@wpyogi)

    10 years, 5 months ago

    LOL – okay, it’s really about learning some basic CSS and how to use Firebug a bit more :). When I looked at that page with Firebug, I saw this HTML:

    <ul class="products">
<li class="post-571 product type-product status-publish hentry first instock">
<a href="http://www.thebrasswardrobe.com/product/brushed-twill-bib-shirt/">
<img class="attachment-shop_catalog wp-post-image" width="150" height="150" alt="538720-BRN-preview" src="http://www.thebrasswardrobe.com/wp-content/uploads/2013/06/538720-BRN-preview-150x150.jpg">

    So the CSS I gave you starts with the class of “products” – see that first line. And then has the img tag. So the CSS translates into “all images that are inside an element with the products class.” There are various ways to accomplish the same thing – some of the code you found is similar but might not have been quite what you needed. CSS is quite picky and theme/site specific.

    The second part I added was to get rid of the bullets – I just figured that you probably did not want those there on that page :).

    If you want to start learning more CSS (really fun actually), these are good sites:

    http://www.w3schools.com/css/
    https://developer.mozilla.org/en-US/learn/css

    Look on the Firebug website too – they have super tutorials and info about using Firebug.

    Hope that helps a bit more?

    Thread Starter keeleon

    (@keeleon)

    10 years, 5 months ago

    Ok, so then my problem wasn’t specific to either of the actual pages, but my lack of understanding CSS. If I understand this, “ul” and “li” are actually CSS code terminology, but where is “products” defined? Does it say in the firebug code? Also, the next thing I want to change is the font size of the product titles. I see where it’s at:

    <img class="attachment-shop_catalog wp-post-image" width="150" height="150" alt="538720-BRN-preview" src="http://www.thebrasswardrobe.com/wp-content/uploads/2013/06/538720-BRN-preview-150x150.jpg"></img>
<h3>

    BRUSHED TWILL BIB SHIRT – BROWN

</h3>
<span class="price"> … </span>

    But I’m not sure how I would or should redefine it. Should I change the H3 to like H6 (which is smaller)? Or should I just redefine H3 as a different size? I could probably redefine H3 like this right?

    .products li {
     list-style-type: none;
}
.products H3 {
     font-size:1em;
}

    Right? but I feel like I’d rather just change the whole source to use a different font size in the first place, except I have no idea how to even track down where it’s originally decided H3 is what’s used.

    I’m still not understanding where the files are in relation to each other. There must be a woocommerce file that has all of the definitions and set up for the wrappers right? Does firebug say where that is?

    And thanks for removing the bullets, that was gonna be a whole other question when I got to it 😉

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to add padding between items’ is closed to new replies.