Post by bread_butter » Mon Dec 14, 2015 2:24 pm

i have tried to reduce the height of the featured. i went to admin>modules>featured(homepage) and changed its height to smaller than this. But the size was reduce and the image was shrinked but the white space is still there between title "Macbook" and "add to cart" button.how do i remove that?

i have removed "description" and "price" as i don't want to display it there.

Image
Image

Newbie

Posts

Joined
Tue Nov 24, 2015 3:22 pm

Post by viethemes » Mon Dec 14, 2015 10:50 pm

To do that, you can install my free extension Custom CSS and add code below

Code: Select all

.product-thumb .caption {
	min-height: 0;
}

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others


User avatar
Active Member

Posts

Joined
Thu Jan 08, 2015 12:17 pm


Post by bread_butter » Tue Dec 15, 2015 12:24 pm

Thanks for the reply :). it seems to have solved the problem. But the width of featured is same. How can i reduce its width.

Newbie

Posts

Joined
Tue Nov 24, 2015 3:22 pm

Post by viethemes » Tue Dec 15, 2015 10:23 pm

Do you want to display 5 products per row? This will reduce width of product.

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others


User avatar
Active Member

Posts

Joined
Thu Jan 08, 2015 12:17 pm


Post by bread_butter » Wed Dec 16, 2015 11:21 am

yes. now, suppose i want to decrease the width of category list without adding another product how can i do it ?

Newbie

Posts

Joined
Tue Nov 24, 2015 3:22 pm

Post by viethemes » Wed Dec 16, 2015 9:16 pm

To do that, you can append code below in extension Custom CSS

Code: Select all

.product-thumb {
	width: 80%;
	margin: 0 auto;
}

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others


User avatar
Active Member

Posts

Joined
Thu Jan 08, 2015 12:17 pm


Post by chancelin » Thu Jan 25, 2018 9:35 pm

bread_butter wrote:
Tue Dec 15, 2015 12:24 pm
Thanks for the reply :). it seems to have solved the problem. But the width of featured is same. How can i reduce its width.
the products box width is determined by bootstrap grid syntax, Opencart 2.x show 4 products per row by default, you could edit the file below to change the products box numbers.

open the file -->\catalog\view\theme\default(your theme)\template\extension\module\featured.tpl (in opencart 3.x is featured.twig)

find the code below:

Code: Select all

 <div class="row">
  <?php foreach ($products as $product) { ?>
  <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
for example: if you want to show 6 products per row, just change col-lg-3 to col-lg-2 , then clear the cache, refresh browser.
just take few minutes to study the bootstrap grids structure and syntax. you will find it is easy to edit.

Opencart 2.x 首頁每行商品數量由\catalog\view\theme\default\template\extension\module\featured.tpl 模組所決定,opencart 是以bootstrap 框架為主,因此必須了解bootstrap 的語法,花一點點時間微了解一下bootstrap grid 的觀念即可輕鬆修改。上述檔案中 col-lg-3 表示每列4個,改成col-lg-2 每列會出現6個。

Newbie

Posts

Joined
Wed Jan 10, 2018 10:54 pm
Who is online

Users browsing this forum: No registered users and 10 guests