Category - Subcategory main image alignment and size

[Sklytter]

Hello,

This is my first message on this forum so sorry in advance for any mistakes I might incur.

 

I am experiencing a problem with the alignment of category and subcategory images in on my ecommerce website. I have alreay tried almost all the solutions to similar problems offered on this forum without find the right one for me.

I hope somone more expert than me would be able to find it.

I take for example this page of my website, but the same problem applies to all the categories and subcategories.

 

http://www.spellgifts.com/149-pillar-church-candles

 

I would keep the category image at 720 x 216 avoiding the cross over with the right borderline and having it aligned to the center of the external rectangle.

In the attached image you can see the effect I would obtain

Altough the solution should be easy, I tried to amend category.css , category.tpl and global.css files without find the right answer.

 

Thanks in advance to whom will try to sort it out with me.




 

[loulou66]

HI

 

1°) you have a big space betwen center column and right column then edit

theme/default/header.tpl

 

change the class for center column tag  

change
class=" grid_5"
to
class=" grid_7"

2° )edit theme/default/css/grid-prestashop.css

line 49
change
width: 757px;
to
width: 740px;

line 44
change
left: left: 190px;
to
left: left: 90px;

3°) and now for center image

i think is in theme/default/category.tpl

search
<div class="content_scene_cat">
                 <!-- Category image -->
        <div class="align_center">
	<img src="http://www.spellgifts.com/c/149-category_default/pillar-church-candles.jpg" alt="Pillar Church Candles" title="Pillar Church Candles" id="categoryImage" width="720" height="216" ;="">
</div>

change the width="720" to width="700"

4°) for the list now

edit theme/default/css/product-list.css

line 26
change
width: 342px;
to
width: 440px;

line 84
change
float: left;
to 
float: right;

@++

 

Loulou66

[Sklytter]

Many Thanks Lolou66

I tried to apply your solution but there was too less space between the center and the right column at that point, so I customised your parameters and now the subcategory pages are fine

Unfortunately for the main category pages, where the subcategory field is displayed, now there is this problem

http://www.spellgifts.com/137-candles-and-candle-holders

as you can see, the center column is floating to the left comparing it to the header and the footer position

do you have any further idea about how to fix this last (I hope) detail as well ?

Many Thanks again

[loulou66]

Hi

 

in theme/default/css/product-list.css

line 36
change
;
to
margin-left: 0;

lines 37
change
float: left;
;
to
float: none;
margin-left: 0;

@++

 

Loulou66

[Sklytter]

Hi

Thanks for your suggestion but this time it didn't work

I updated the css file as you said but it seems to be everything as before

[loulou66]

HI

 

sry a little mistake

 

in theme/default/css/product-list.css

line 36
change
;
to
margin-left: 0;

lines 37
change
float: left;
;;
to
float: none;
margin-left: 0; 

and i see for newsletter in footer

 

in modules/blocknewsletter_prest/blocknewsletter_prest.css

line 3
change
padding-top: 0;
to
padding-top: 16px; 

@++

 

Loulou66

[Sklytter]

Hi

You're very helpful but there is something which doesn't work

This is the code in theme/default/css/product-list.css

 

lines 32-39

#product_list a.product_img_link {
	overflow:hidden;
	position:relative;
	float: none;
	margin-left: 0;
	display:block;
	border: 1px solid #ccc
}

and there is not blocknewsletter_prest folder in modules, only blocknewsletter  with a blocknewsletter.tpl file in only (no css)

So I don't have idea how to continue

Many Thanks

[loulou66]

Hi 

 

haha its not product-list.css but category.css

 

and i see you have module blocknewsletter_prest   

clcik right on newsletter and inspent element you see in right column tne name of css and the path of file

 

@++

 

Loulou66

[Sklytter]

ohhh I was looking in the wrong directories 

Now everything is ok

Thank You Very Much