[SOLVED]Product list images

[alexcarter414]

Hi,

On my website www.alexcarter.biz

 

If you look at the product listing, it shows the products in a grid view. The problem i have is that the banner which would usually show the word new doesn't have the word new for starters and also it does not display over the image, instead it displays to the right. I am guessing the text is probably a CSS problem but i can't work out why it shows to the right of the image rather than over it? I would also like to make the images bigger, can you just do this by recreating the thumbnails at a different size? The problem of making them bigger though is that the description gets cut off by the add to cart button, is it possible to change the height of the description section as well?

 

Any help is greatly appreciated.

Thanks,

Alex

[PSfever.com]

Hi,

 

first of all, you'll need to open global.css at line 2846

and in these classes .products_block.grid .product_image span.new,.products_block.grid .center_block span.new{

set the color to

color:#fff !important

This way you'll see the New in white color. Next, you can move the span by changing the value of top and right attirbutes. Example changing right from -30px to 30px moves the box to the left.Finally, if you want to change the size of product-list.tpl's <img> tag (from home to large or whatever you have there now). But then of course, you'll need to make few changes to the css file which doesn't seem like a good idea if you don't fully understand it.

[defuzed]

hi alexcarter, you have a color:#625b63 !important; which is overriding the color: #fff; from the "new" style. I always advise against using the !important property since it often ends up producing things like these.

The "new" span is showing to the "left" of the image since it is positioned relatively to parent <a class="product_image"> and this <a> tag hast the width of the "ajax_block_product" li tag.

Either you change the width of the a tag or you change the thumbnail size to the width of this same a tag

[alexcarter414]

Cheers for the answers! i've made the changes to my css file and it seems to have worked! I am quite happy to make changes to the css file as i am familiar with CSS and can read it, i am just not sure which classes/id's to edit. Where would i need to make the changes to change the size of the product-list.tpl? I need to make the thumbnail's bigger, allow more space for text above the add to cart button and have 3 products per line if possible? Many thanks for the help so far!

[PSfever.com]

HI Alex, this would be more complicated and would take about 30 mintues time in total. You'll have to first of all open your product-list.tpl file. Here, look for <img> tag, which has defined source in this case as "list"

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />

 

 

 

What this means is that in my admin, there is a defined size of image as "home". If you want to change the size of the picture to bigger, replace the 'home' with p.e. 'large'. But this will work only in case you have an image size named large defined in your BackOffice. You can find those defined sizes in BackOffice/Preferences/Images Probably, you got even width and height defined by code that could look like this

width="{$homeSize.width}" height="{$homeSize.height}

Again, replace the home with p.e. large.

 

This is a change, that will affect the size of images only. Now, for changing the css of product list, go to themes/[YOURTHEME]/css/product-list.tpl (If there is one, if not, check the global.css for #product_list tag).

If you understand the CSS, then there should be everything you'll need to have for changing the outlook of product list.

[alexcarter414]

OK so i have edited the image sizes to be the correct size on the product page. Regarding editing css on product grid layout. I have found the following sections of code in the html when using firebug:

 

<li class="ajax_block_product first_item item clearfix">

<li class="ajax_block_product alternate_item clearfix">

<li class="ajax_block_product item clearfix">

<li class="ajax_block_product alternate_item clearfix">

<li class="ajax_block_product item clearfix">

<li class="ajax_block_product alternate_item clearfix">

<li class="ajax_block_product item clearfix">

<li class="ajax_block_product alternate_item clearfix">

<li class="ajax_block_product item clearfix">

<li class="ajax_block_product last_item alternate_item clearfix">

 

inside each of these there is:

<div class="center_block">

 

I am guessing i need to edit the center block what amendments would i need to make?

 

I would also like to put a border around each product, can i just select each class from the above and add a border to them?

[alexcarter414]

OK, i have managed to get a rounded border around each product. Thanks for the help! Whilst i am here is it possible to center the blocktopmenu?

[PascalVG]

Hi Alex,

Not fully centered (may need to adjust a little when adding more menu items) but maybe this is a quick solution:

 

Edit themes/EER/css/custom.css (line 287)

 

 

body .sf-contener {

font-size: 13px !important;

line-height: 16px !important;

margin-left: 25%; <-- add this line (25% may be needed to be adjusted when adding more menu items)

}

 

Hope this helps,

pascal

[alexcarter414]

thanks for the quick reply, it looks like a viable solution but is there no way to do it using the text-align in css so that when new categories are added it center's automatically?

[alexcarter414]

OK i have done that now, looks good, thanks for the reply. I have also managed to edit the product list css in global as well to make the description section larger, thanks for all the help guys!