custom css for product listing info

hi,

i am working on https://www.soapmania.co.uk. on the product listing page for the soaps, i have the product picture, product name, price, and more info link. what i would like to do is style the way the info under the product picture is displayed.

First, i would like to be able to change the colours of each part individually (name, price and more info link). i use the css tool on firefox, however as these are not individually styled in the stylesheet.css, i cannot change any of them and i simply do not have the experience to know what to call them! (the product name just seems to follow the same rules as the links in my site). can someone help me with the names the stylesheet.css uses so i can control them? Been through the forum but cannot seem to find this.

Also, the spaces between them is too big, i would like to move them all closer together. i think once i add them individually to the stylesheet, i should be able to control line height, padding and margins as well?

Thanx:frusty:

Edit your includes/templates/pure_blue_free/css/stylesheet.css to add:

.centerBoxContentsProducts {
  color: black; /* This will be the color of the price */
}
.centerBoxContentsProducts h3 {
  color: red; /* This is the color of the item name */
}
.centerBoxContentsProducts > br+a {
  color: white; /* This is the color of the '... more info' */
}

The first statement specifies that the default text color for a product list item will be black. If you add product descriptions, they will be black, too.

The second statement specifies that the text color for all h3 tags (there's only one) in the product list should be red;

The third statement specifies that wherever a <br /> is directly followed by an <a> directly within the product list <div>, the text color should be white.

Obviously, change the colors to whatever you want. Check out the w3schools documentation on various CSS tags, too: http://www.w3schools.com/CSS/css_reference_atoz.asp

awesome! thank you very much. :clap: when i add these to my stylesheet, would i be able to space them as well?

You should be able to use the last two selectors to control the padding and/or margins of those areas ...

You can do some spacing, but the <br /> are coded into the output. You can hide some of them like

.centerBoxContentsProducts > br+br {
  display: none;
}

thanks, it worked. :D I added padding at 0, and added a line height, this seemed to move everything closer together, will try your new recommendation now. ok, one last questions, you seem to be very good, so while i have you...

i want to have the following on the product listing:

product name
product price
more info... (this has dissapeared when i activated the "display add to cart button")
add to cart

how can i add the more info again?

gjh42:

You can do some spacing, but the <br /> are coded into the output. You can hide some of them like

.centerBoxContentsProducts > br+br {
display: none;
}

oh, this makes the price and add to cart button display right next to each other!

Try br+br+br

gjh42:

Try br+br+br

hmm, this one removes the line between the price and add to cart. I think I am happy with the previous recommendation, adding the padding and line height helped. can you help with the more info thing?

That's a tricky bit, as the code in that area is very complex. I don't have time to unravel it now.

if you don't mind, i would really appreciate it if you can help, will check back again tomorrow or the day after? Have a good evening!