how do I change This home featured block

[Ginno]

how do I change This block

in to this block

this block is in home page, center column "featured products"
i think is somewhere in ....theme/prestashop/css/global.css

[blasto]

Up !

Me too ? HOW ?

[Ginno]

i found that thing in global.css
find this line

#center_column .products_block ul li:hover { background-color: #404048; }
#center_column .products_block ul li {

and replace with this

#center_column .products_block ul li:hover { background-color: #404048; }
#center_column .products_block ul li {
   border-right: 1px solid #555;
   border-bottom:1px solid #555;
   float:left;
   clear: none;
   width: 261px;
   height: 230px;
   margin-right: 0.5em;
   margin-bottom: 1em;
   padding: 0;
   border: 1px solid #333
   margin-top:0;
   background-color: #222;
}

ps: change the colour... because this code is for dark theme

i use the et-black theme.... and this code is for that theme

[Jimmy R J]

So what am i doing wrong here.. plz take a look

http://www.compuworld.dk/

[jhnstcks]

You need to change the height on your product description class at line 1066.

at Line 1097 add margin-top -3em
at Line 1062 add Float right

[Jimmy R J]

Hmm i'm not sure if i'm doing the right thing here. Take a look at my file and the lines you mention.

First line here is 1062 and the last 1101

#center_column div.products_block ul li p {
margin:0;
padding:0;
}
#center_column div.products_block p.product_desc {
height:9.5em;
color: #595a5e;
}
#center_column div.products_block a.product_image {
display: block;
background-color: transparent;
width: 129px;
height: 129px;
margin-left:2px;
}
#center_column div.products_block .product_accessories_description a.product_image {
width: 118px;
height: 85px;
}
#center_column div.products_block a.product_description {
display: block;
width: 118px;
height: 50px;
margin-left:2px;
}

#center_column div.products_block a.product_image img{
float:none;
margin:0;
}
#center_column div.products_block p.product_desc, #center_column div.products_block h5 {
margin-left:0.5em;
margin-right:0.5em;
}
#center_column div.products_block ul li p.product_desc a { font-weight:normal; }
#center_column .products_block span.price {
text-align: center;
font-size: 1.6em;
padding: 0.5em 0;
display: block;

[jhnstcks]

Line 1062 should look like this

#center_column div.products_block ul li p {
float:right;
margin:0;
padding:0;

Line 1097 should look like this

#center_column .products_block span.price {
display:block;
font-size:1.6em;
margin-top:-3em;
padding:0.5em 0;
text-align:center;

Line 1066 should look like this

#center_column div.products_block p.product_desc {
color:#595A5E;
height:2.5em;

[Jimmy R J]

Tnx a lot jhnstcks.

Still a little problem, wich one to change to make it white?

TIA

Hmm doesn't look right in IE?

[Jimmy R J]

i like the way it looks in pic numer 2 i post #1.

But i can't seem to make it right.. i realy don't know what i'm doing here lol


www.compuworld.dk

[jhnstcks]

Well I have no idea where your price went in IE but if you look at it in FF it looks perfect, typical IE for not following normal css.

[swifty]

I have had a quick play and doing this (see image) but have not done to well! Can anyone help me! I'll be willing pay if need be!

[Ginno]

yes,,,
change this in global.css (this code is for et-black theme) for another ... only change the colours

/* Special style for block products in center column */
#center_column .products_block { 
   border: none;
   }
#center_column .products_block  { color: #595a5e; }

#center_column .products_block h4 { line-height: 1.3em; }
#center_column .products_block .block_content {
   background: #000 none;
   padding: 0;
   margin-top: 0.5em;
}
#center_column .products_block ul li:hover { background-color: #404048; }
#center_column .products_block ul { padding-left: 3px; margin-right: -10px;}
#center_column .products_block ul li {
   border-right: 1px solid #555;
   border-bottom:1px solid #555;
   float: left;
   clear: none;
   width: 261px;
   height: 240px;
   margin-right: 0px;
   margin-top: 0;
   background-color: #222;
   margin-bottom: 0;
   padding: 0;
   border: 2px solid #000;


}
#center_column .products_block ul .product_accessories_description  {
   margin:0;
   padding:0;
}#center_column .products_block ul .product_accessories_description .product_accessories_price{
   margin-top:130px !important;
   margin-top:0px;
}
#center_column .products_block ul .product_accessories_description {
   margin:0;
   padding:;
   height:250px;
}
/*#center_column .products_block li.last_item { float:none; clear:both; }*/
#center_column .products_block li.last_item_of_line { border-right:none; }
#center_column .products_block li.first_item_of_line { clear:both; }
#center_column .products_block li.last_line { border-bottom:none; }
#center_column .products_block p, #center_column .products_block h5 { margin: 0.5em 0.1em; }
#center_column div.products_block h5 {
display: block;
line-height: 2em;
}
#center_column div.products_block h5 a {
   color: white;
   font-size:1.1em;
   padding: 2px;
}
#center_column div.products_block ul li p {
   margin:0;
   padding:0;

}
#center_column div.products_block p.product_desc {
   color: #bbb;
   width: 95px;
   height: 110px;
   float: right;
   padding: 0 0 2px 1px;
}
#center_column div.products_block .product_accessories_description p.product_desc {
   color: #595a5e;
   width: 240px;
   height: 85px;
   float: right;
   padding: 0 0 2px 1px;
   margin-top: 30px;
   margin-bottom: 10px;
}
#center_column div.products_block a.product_image {
   display: block;
   background-color: transparent;
   width: 100px;
   height: 85px;
   float: left;
   padding: 0 0 0 6px;
}
#center_column div.products_block .product_accessories_description a.product_image {
   display: block;
   background-color: transparent;
   width: 100px;
   height: 85px;
   float: left;
   padding: 0 0 0 6px;


}
#center_column div.products_block a.product_description {
display: block;
   width: 100px;
   height: 85px;
   float: right;
   padding: 0 0 2px 1px;
}
#center_column div.products_block a.product_image img{
   float: none;
   margin-right: px;
}
#center_column div.products_block p.product_desc, #center_column div.products_block h5 {
   margin-left:0.3em;
   margin-right:0.3em;
}
#center_column div.products_block ul li p.product_desc a { font-weight:normal; color: #bbb; }
#center_column .products_block span.price {
   text-align: right;
   font-size: 1.5em;
   width:240px;
   padding-right: -20px;
   display: block;
   float: left;
   margin-right: 20px;
   margin-bottom: 0px;
   margin-top: 20px;
}
#center_column .products_block .featured_price { 
   margin-top:2.5em;
}
#center_column .products_block a.button, #center_column .products_block a.exclusive, #center_column .products_block span.exclusive {
   margin: 2em 5px 5px 1px;
   float: right;
   width: 120px;
} 

works grat in firefox and IE

1st picture is in firefox... second in IE

[Jimmy R J]

Thanks again ginno.

Could i ask for another little favor?. I have been trying to change the color, but can't seem to finde the rigth one to change, It's the background i wanna change, which one to fix?

TIA.

[swifty]

Thank you Ginno, Your a genius!

[p1r4t0s]

Thank you Ginno, Your a genius!

It work perfectly tnx ginno !

[Jimmy R J]

Thanks again ginno.

Could i ask for another little favor?. I have been trying to change the color, but can’t seem to finde the rigth one to change, It’s the background i wanna change, which one to fix?

TIA.

[guitarplayer]

Hi Compuland,

You have background at 222222 at the moment the thing to change is around line 1026 in global css

#center_column .products_block ul li (line 1026)

{

float: left;

clear: none;

width: 261px;

height: 240px;

margin-right: 0px;

margin-top: 0pt;

background-color: #222222;

If you change 222222 to FFFFFF for example you get white

[Ginno]

Thanks again ginno.

Could i ask for another little favor?. I have been trying to change the color, but can’t seem to finde the rigth one to change, It’s the background i wanna change, which one to fix?

TIA.

what color???

[xwing]

Your horizontal menus dont show nice in IE 7(in IE 6 , IE 8 and FF work fine). Here is the snapshot of it : http://api.browsershots.org/png/original/76/7672e53260d6209167878b45659faa7d.png

Any idea how to fix it ? Thanks.

[Guest]

Open: modules\homefeatured\homefeatured.tpl and then change....

           {assign var='liHeight' value=240}
           {assign var='nbItemsPerLine' value=4}
           {assign var='nbLi' value=$products|@count}
           {assign var='nbLines' value=$nbLi/$nbItemsPerLine|ceil}
           {assign var='ulHeight' value=$nbLines*$liHeight}

           {foreach from=$products item=product name=homeFeaturedProducts}

{$product.name|truncate:27:'...'|escape:'htmlall':'UTF-8'}
getImageLink($product.link_rewrite, $product.id_image, 'home')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.legend|escape:htmlall:'UTF-8'}" />

[Hugon]

this still doesn't work need another solution