Jump to content
Sign in to follow this  
tranthang123

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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
}

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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,

Share this post


Link to post
Share on other sites

}
#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;

}

Share this post


Link to post
Share on other sites
Sign in to follow this  

×

Important Information

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