Featured Products BG Color

I would like to know if there is a way to add a bg color to the featured products on the main page. I don't mean each individual product box, but the whole table that holds all the featured products.

Here's what I mean:

Before

After

I've dug around a few files to see what I could do, I have no clue.

Those two images look exactly alike to me.

Without a link to the site, we'd just be guessing, since you have a custom template.

The easiest way to figure out what is where is by installing the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. A very handy tool.

Hi

Yes you can do this but you have to edit your tpl-featured_products_default.php file.

You can see my site where I have put all white in the background http://www.suresafe.co.uk/index.php?main_page=featured_products

You have to create a <div> around the featured products, I agree with Steve, get the Firebug addon to play around with it without actually changing any files first.

Hope this helps :smile:

RalphStirrat:

Hi

Yes you can do this but you have to edit your tpl-featured_products_default.php file.

You can see my site where I have put all white in the background http://www.suresafe.co.uk/index.php?main_page=featured_products

You have to create a <div> around the featured products, I agree with Steve, get the Firebug addon to play around with it without actually changing any files first.

Hope this helps :smile:
Thanks guys, got the Firebug add-on running. The difference in the two images are the white background around each individual featured product on the main page. hmm I did forget to mention this is a screen shot of the main page and not the listing of the general featured items.

Ralph I noticed you referenced me to your listing of featured items, but where I mean is if you look at your main first page and see that each of your featured products are in its own individual rounded edge box. I need something like this, but with all featured products sitting in one white box vs six white boxes on the main page specifically.

I think I may have a few leads thanks to you guys, but if you have any suggestions that would help greatly. Thanks!

Hi

You want to set a background colour for the 'featuredProducts' id in your css file to white. You would have to add other <div> in if you want the rounded colours though. Feel free to take the rounded corners images from my site and copy the code.

Try it with firebug first though :smile: