Jump to content

front page more products on a row for kurouto


nivar

Recommended Posts

right now the kurouto skin only has 3-products on the row and pictures are in size 138 x 113.

 

i would like to put more in the row and the picture slightly smaller to accommodate for the more products.

 

how do I go about implementing it.

 

 

FROM THIS 

 

WjxehcO.jpg

 

TO THIS

 

 

 

 

WKfmx7d.jpg

Link to comment
Share on other sites

Ideally, this would involve nothing more than making a few edits to the skin's CSS file. However, there is one statement in a Class function that needs to be changed to get the proper size image.
 
On the other hand, we can try to request the browser resize the image.
 
We will be editing content.homepage.php and common.css.
 
In common.css, find near line 221, div.latest_product. Change:
height:157px;
width:109px;

Find near line 228, div.latest_product p.image. Change:
height:92px;

In content.homepage.php, find the image tag and add these attributes to make it look like:
<img src="{$product.image}" alt="{$product.name}" height="92" />

This reduces the area given to each "latest product" to 2/3 of its original size.

Link to comment
Share on other sites

thanks for the help. 

 

I found the files and made the changes, the images become smaller and there is bigger gap between the products abut there are still only 3 product in the row. I would like to make this 5-products in the row. 

 

let me know how to do it :)

Link to comment
Share on other sites

Where I said this:

In common.css, find near line 221, div.latest_product. Change:
height:157px;
width:109px;

 

You can also change to margin:5px 3px; to close up the gap between products. And you will need to change height:207px; because the next row will interfere with the buttons on the row above (stupid buttons). That gives me five per row.

 

You will need to clear the skin cache (admin, Maintenance, Rebuild tab, Clear Cache).

Link to comment
Share on other sites

thank you bsmither,

 

I have done some adjustment to "common.css" and was able to fit 5 products in a row. 

 

I adjusted the right and the left side-bar width from 200px to 150px at line 150, this gave some gap between the side-bar and the center-box. 

 

1. How do I get rid of the gap, so I can fit more products in the row. 

2. How do I change the "Info" and "Ad to Basket" button size? ( if possible would like to change it to "Info" and "Buy")

 

 

Please take a look at this site http://bit.ly/Yp7sni

 

thanks

Link to comment
Share on other sites

In your common.css file, find at around line 167, #page_content. Make the padding: 0 164px !important;

Adjust to suit your needs.

 

The black and white buttons have a background image associated with them: kurouto/images/common/button_black.png, and button_white.png. You will need to edit these in an image editor to make them narrower.

Link to comment
Share on other sites

That's a language thing. "Add to basket" will change depending on the language chosen to display.

 

So, in admin, select Languages, click the edit icon for the language you want to change, choose the Catalogue group, then change the phrase for add_to_basket.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...