Jump to content

Category - Subcategory main image alignment and size


Recommended Posts

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.




 

post-794824-0-50962900-1399765766_thumb.png

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More