Page 1 of 2 12 LastLast
Results 1 to 10 of 11
  1. #1
    Join Date
    Apr 2010
    Posts
    263
    Plugin Contributions
    0

    Default custom css for product listing info

    hi,

    i am working on 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

  2. #2
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    13,872
    Plugin Contributions
    96

    Default Re: custom css for product listing info

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

    Code:
    .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

  3. #3
    Join Date
    Apr 2010
    Posts
    263
    Plugin Contributions
    0

    Default Re: custom css for product listing info

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

  4. #4
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    13,872
    Plugin Contributions
    96

    Default Re: custom css for product listing info

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

  5. #5
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: custom css for product listing info

    You can do some spacing, but the <br /> are coded into the output. You can hide some of them like
    Code:
    .centerBoxContentsProducts > br+br {
      display: none;
    }

  6. #6
    Join Date
    Apr 2010
    Posts
    263
    Plugin Contributions
    0

    Default Re: custom css for product listing info

    thanks, it worked. 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?

  7. #7
    Join Date
    Apr 2010
    Posts
    263
    Plugin Contributions
    0

    Default Re: custom css for product listing info

    Quote Originally Posted by gjh42 View Post
    You can do some spacing, but the <br /> are coded into the output. You can hide some of them like
    Code:
    .centerBoxContentsProducts > br+br {
      display: none;
    }
    oh, this makes the price and add to cart button display right next to each other!

  8. #8
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

  9. #9
    Join Date
    Apr 2010
    Posts
    263
    Plugin Contributions
    0

    Default Re: custom css for product listing info

    Quote Originally Posted by gjh42 View Post
    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?

  10. #10
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: custom css for product listing info

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

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. custom jQuery Mobile formatting issue for product info
    By smm11 in forum General Questions
    Replies: 3
    Last Post: 11 Jan 2012, 08:13 PM
  2. different prices for product listing and product info pages
    By jwheels in forum Setting Up Categories, Products, Attributes
    Replies: 2
    Last Post: 13 Jun 2011, 05:28 AM
  3. Custom preview description for product listing page
    By arunkarthik in forum Setting Up Categories, Products, Attributes
    Replies: 2
    Last Post: 18 May 2010, 08:06 PM
  4. Different image for product listing and Product Info?
    By JuanDBB in forum Basic Configuration
    Replies: 2
    Last Post: 7 Apr 2009, 09:32 PM
  5. Adding custom field from specials table to product listing and product info
    By davale in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 19 Oct 2007, 06:19 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg