Làm sao để chỉnh lại số cột trong homefeature

[tranthang123]

Mình đang làm một trang về điện thoại. có bạn nào biết cách chỉnh sửa lại số cột hiển thị sản phẩm ở phần homepage ko.
chỉ mình với.
đây là code css trong themes/css/global.css

bạn nào biết chỉ dùm mình là phải sửa ở đoạn nào với nhé:

/
* {
padding: 0;
margin: 0
}
body {
background-color: #e0e0e0;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #7d7d7d;
text-align: center
}

/* Useful */
.align_center { text-align: center }
.align_right { text-align: right }
.middle { vertical-align: middle }
.align_justify { text-align: justify }
.uppercase { text-transform: uppercase }
.hidden, .collapsed, .block_hidden_only_for_screen { display: none }
.wrap { white-space: normal }
.bold { font-weight: bold }
.strike { text-decoration: line-through }
.italic { font-style: italic }
.top { vertical-align: top }
.span_link { cursor: pointer }
.span_link:hover { text-decoration: underline }
br.clear {
clear: both;
line-height: 0;
font-size: 0;
height: 0
}
noscript ul {list-style-type: none; background: black; color: white; padding: 10px; border: 1px solid gray }

/* Footer links */
ul.footer_links {
list-style-type: none;
clear: both;
margin-top: 2em
}
ul.footer_links li {
float: left;
margin-right: 2em;
height:25px;
}
ul.footer_links li a { text-decoration: none; line-height:35px; }
ul.footer_links li a:hover { color: black }
ul.footer_links li img.icon { vertical-align: -2px }

/* transfert effect*/
.transferProduct { border: 2px solid #888 }

/* simple list inline */
ul.inline_list { list-style-type: none; margin-top: 1em }
ul.inline_list li { float: left; text-align: center }
ul.inline_list li img { display: block }
ul.half {
width: 45%;
margin-right: 1em;
float: left
}

/* Category tree (i.e. in sitemap) */
div.tree_top {
padding-left: 0px;
padding-bottom: 5px;
padding-top: 3px
}
ul.tree, ul.tree ul { list-style-type: none }
ul.tree li {
}
ul.tree a { padding-left: 0 }
ul.tree a.selected { font-weight: bold }
ul.tree li.last {
border: none
}
span.grower { cursor: pointer }

/* Tabs */
ul.idTabs {
list-style-type: none;
border-bottom: solid 1px #76839b;
height: 21px;
margin-top: 1em
}
ul.idTabs li {
float: left;
margin-right: 1px
}
ul.idTabs li a {
background-image: url('../img/tab_bg.jpg');
display: block;
width: 173px;
height: 18px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
padding-top: 3px;
color: #374853
}
ul.idTabs li a.selected {
background-image: url('../img/tab_bg_selected.jpg');
color: white
}

/* IdTabs Short*/
ul.idTabsShort li a {
background-image: url('../img/tab_bg_short.jpg');
width: 138px
}
ul.idTabsShort li a.selected {
background-image: url('../img/tab_bg_selected_short.jpg');
color: white
}
div.sheets {
clear: both;
padding: 1em
}
div#more_info_sheets ul li { margin-bottom: 0.4em }

/* global style */
a {
color: #5d717e;
text-decoration: underline;
outline: none
}
a:hover { text-decoration: none }
.input:focus { outline: 0 }
a img {
outline: none;
border: none;
text-decoration: none
}
h2#slogan{
color:red;
}
h2 {
font-size: 1.1em;
line-height: 1.6em;
padding-left: 0.5em;
margin: 0.5em 0;
text-transform: uppercase;
font-weight: bold;
color: #374853;
background: transparent url('../img/title_bg.gif') no-repeat top left;
height: 21px
}
h2 span {
font-size: 0.9em;
text-transform: none;
font-weight: normal;
font-style: italic;
color: #374853;
margin-left: 1em
}
h3 { font-size: 1.1em; margin: 1em 0 }
h4 { font-size: 1em }

/* global layout */
#page {
width: 951px;
margin: 0 auto;
text-align: left
}
h1#logo {
float: left;
width: 40%;
margin-top: 20px
}
#header {
height:167px;
position:relative;
}
#left_column, #center_column, #right_column { float: left }
#left_column {
clear: left;
width: 191px;
padding-right: 21px;
overflow: hidden
}
#center_column {
width: 556px;
margin: 0 0 30px 0
}
#right_column {
width: 191px;
padding-left: 21px;
overflow: hidden
}

/* global RTE fields */
div.rte,
.mceContentBody {
text-align: left;
background: white;
color: black
}

css.zip

[VNguyen]

Simply, you can change in in its TPL file "homefeatured.tpl". In that file, you can see this definition:

{assign var='nbItemsPerLine' value=4}

Change the number of item per line to what you want, for example:

{assign var='nbItemsPerLine' value=2}
or
{assign var='nbItemsPerLine' value=10}

Regards.

[tranthang123]

tới làm như bạn VNguyen roi. nhưng van ko dc ban a

[VNguyen]

I tried with fresh install of Prestashop 1.3.2.3 (the newest version), and it works fine.

Make sure you do not modify any CSS and TPL files. Just apply new change as in my previous post, as well as change width attribute of followings classes. For example with 2 items per line, you have to change in global.css

#center_column .products_block ul li {
float: left;
background-color: #d0d3d8;
margin-top: 0;
padding: 0 0 1px;
width: 267px; /* CHANGED HERE */
border-right: 1px solid white;
border-bottom: 1px solid white
}

#center_column div.products_block a.product_image {
display: block;
background-color: transparent;
margin-bottom: 2px;
margin-left: 2px;
width: 262px; /* CHANGED HERE */
height: 129px
}

[tranthang123]

http://tumobile.co.cc
đây là trang web cua mình sau khi thay đổi như bạn VNguyen đã chỉ
mình thay file globall.css của một cai themes khác thì nó hiện đúng 4 hàng nhưng giao diện lộn xộn hêt. mình nghĩ là chỉ cần thay đổi trong globall css là đc.
hi vọng các bạn có thể giúp mình

[VNguyen]

Hi,

Firstly, let me show you how to fix homefeatured. Just change your global.css as following:

Line 229:
margin-right:0px;
Change to:
margin-right:11px;

Line 221:
width:152px;
Change to:
width:149px;

For others, please change in your global.css file. I assume that you know how to use FireBug (Firefox add-ons) on FireFox.

Regards.

[tranthang123]

Thanks VNguyen. minh đã giải quyết đc vấn đề bằng một cách rất đơn giản.... tumobile.com.vn

[venintech]

Theo mình thì không nên thay đổi module này trừ khi bạn rất rành về css, nhưng nếu đã giải quyết được thì bạn có thể share lên để mọi người có thêm 1 kinh nghiệm.

Thanks,

[tranthang123]

}
#center_column .products_block ul li {
padding:7px;
background:#f0f0f0;
-moz-border-radius:10px;
-webkit-border-radius:10px;
//background:black;
//background: url("../img/form_bg.jpg") repeat-x scroll 0 bottom transparent;
width:114px;
//margin-right:3px;
//margin-bottom:7px;
// margin-left:4px;
margin-top:7px;

margin:2px;
//border-bottom-color:black;

}