How can i center text and price in front office featured-products

[lasseboy]

Se my pic!

How can i center text and price in front office featured-products.

 

And how kan i make the pictures bigger , if i now make them bigger in back office home then margin makes pictures being cut in right side of featured-products.

 

Thanks!

[lasseboy]

Realy... dosent anybody now how to fix text in featured-products!

[PascalVG]

Hi,

If you just want to center the text and title, here's how: (Not sure if this fully fixes your problem, though, but give it a try. Otherwise it may at least give you a start point...)

 

 

In /modules/homefeatured/homefeatured.css, find the following code blocks and add the red lines**:

 

For the title text to center, find:

 

#featured-products_block_center .s_title_block {

padding-top:5px;

height:30px;

font-size:12px;

color:#222;

padding-bottom: 0;

font-weight:bold;

text-align:center; // add this line

}

 

For the description text to center, find:

 

 

#featured-products_block_center .product_desc a {

color:#333;

text-align:center; // add this line

}

 

 

** actually, you should not directly ADD it to the original prestashop files, but override it. Normally this works as follows:

Copy the file

/modules/homefeatured/homefeatured.css

to

/themes/<your theme folder>/modules/homefeatured/homefeatured.css

or sometimes (don't ask me why/when) to:

 

/themes/<your theme folder>/modules/homefeatured/css/homefeatured.css

 

Problem is, both don't seem to work. There might be a solution for this problme here:

 

http://www.prestashop.com/forums/topic/151522-blocktopmenu-cant-override-css/

 

At the end there is a video made by Nemo1. Maybe his solution for that problem applies here too. Didn't check it though.

Otherwise we're stuck with changing the original css file. MAKE A BIG NOTE somewhere, so you know what to update when upgrading to a newer version of PrestaShop.

 

Hope this helps (a little),

Pascal.

 

P.S. Wait, I see you asked about the price as well. I'll have a look if I can find that as well. In the mean time, have a look at this and let me know this is what you needed or not. Cheers.

[PascalVG]

for price, change in the same file (/modules/homefeatured/homefeatured.css) the following:

 

Find and add the red text:

 

#featured-products_block_center .price_container {

margin-top:10px;

padding:0;

text-align:center; // add this line

}

 

Hope this is it.

[lasseboy]

Thanks mutch better now , but text is not under picture, look here http://www2.gedetvidare.nu/index.php

[yaniv14]

your list items are set to 126px wide and your image is 170px wide so thats why its not centered.

either you change your list item to 170px (you will have 3 items instead of 4 in a line) or you resize your home_default image to 126px

[PascalVG]

I agree, do as yaniv14 writes and rebuild your pics. They should be resized and then they will be centered in the column. If you don't want to resize, make 3 columns of 170, as Yaniv suggested

[lasseboy]

OK thanks i made changes in home_default to 126px, no pic is center over trext area, but the picture is to small. loved to have them bigger in home section!

[yaniv14]

so just return it (home_default) to 170 x 120, regenerate images again, and change 'modules/homefeatured/homefeatured.css' line 4

from: width:126px;

to: width: 170px;

[lasseboy]

Thanks now it looks ok...., only thing is.. see picture..

Edited February 9, 2013 by lasseboy (see edit history)

[yaniv14]

there is no margin, your image based on your preference is 170px X 120px which mean its horizontal image and you putting it in a vertical box so prestashop in order to keep image proportion is cutting it to get the entire image on the smallest part (in your case is the vertical line - 120px).

 

Just for testing try to take an horizontal picture something that the ratio will be 3 to 2 and upload it to a product and you will see the image stretching almost all the way.

 

if you want to keep it the way you have now, you need to change you 'home_featured' image preference to something like:

175px width & 260px height - and than regenerate again. and you will also need to update the <li> height so you need to change line 5 in 'modules/homefeatured/homefeatured.css' from: height: 240px; to: height:400px;

 

all the sizes are rough dimensions just for testing.

[lasseboy]

Thanks Thanks You made my weekend!!!!!! My [spam-filter] is going to be sooooo Happy!

[lasseboy]

Now i back again sorry!

 

I have tried to solve how to put "price" in same line that "visa".

Look picture...

[yaniv14]

try to add this to the end of 'modules/homefeatured/homefeatured.css'

 

 

#featured-products_block_center p.price_container {

display: inline-block;

margin-left: 55px;

}

[lasseboy]

Ohh thanks you are the KING!!!