[ Consider Solved ] homefeatured layout edit

[ladivito]

Dear All,

Did anyone know how to change the original featured product layout to the layout as attachment picture ?

Thanks a millionsssssssss.................

[kennyh]

Have you heard of a theme Designer named Atch? He has a free theme in that configuration ,global.css(home featured products in the center column) and homefeatured.tpl, or you can play with the original css and mod the tpl. in modules.

[Viktor99]

Find more information here

http://www.prestashop.com/forums/viewthread/12428/module_i_teme/care_poate_sa_ma_ajute_cu_modificarea_unei_teme_63_63

[ladivito]

Have you heard of a theme Designer named Atch? He has a free theme in that configuration ,global.css(home featured products in the center column) and homefeatured.tpl, or you can play with the original css and mod the tpl. in modules.

i search for the theme "Atch" name but found nothing in the forum....as well as google and youtube
i'll try again later after i back home....

Thanks kennyh ~

[ladivito]

Find more information here

http://www.prestashop.com/forums/viewthread/12428/module_i_teme/care_poate_sa_ma_ajute_cu_modificarea_unei_teme_63_63

Thanks viktor99 ! it seem is a good tutorial.....may i know what language is that ? so that i can google translate it.....

Thanks again ~

[ladivito]

i found it.....it is a Romanian language ~
will try it at tonight

[Atch]

Hi lavidito,

You can download the theme atchworks to understand how the fact homefeatured.
http://www.prestashop.com/forums/viewthread/11775/graphisme/nouveau_theme_gratuit__2_colonnes

Overall, it's only the css and a little HTML.
In first, edit the file homefeatured.tpl to change position of tags.
After, change, in global css, the values of width to have a larger block and have only 2 per line.

Everything is in the atchworks theme, help you with firebug to understand principle.

Sorry for my English.

V++

Atch

[ladivito]

Thank you Atch !!! your english is great ~
i'll gv a try later....Thanks again !

[ladivito]

Hi Atch,

i had change in the homefeatured.tpl and global.css and here is the outcome i got

Now i just have to move the description and button.....anyone know how to do it ??

[ladivito]

/* 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: #d0d3d8 none;
   padding:0pt;
}
#center_column .products_block ul li:hover { background-color: #FFFFFF; }
#center_column .products_block ul li {
   border-right: 1px solid white;  /* solid white */
   border-bottom:1px solid white;
   float: left;
   clear: none;
   width: 267px;
/*    height:375px;   #bdc2c9   #d0d3d8   #d0d3d8 */

   background-color: #d0d3d8;
   padding: 0;
   margin-top:0;
}

#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:75px !important;
   margin-top:0px;
}
#center_column .products_block ul .product_accessories_description {
   margin:0;
   padding:0;
   height:280px;
}
/*#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;
   height: 6.57em;
}
#center_column div.products_block h5 a {
   color: #374853;
   font-size:1.1em;
}
#center_column div.products_block ul li p {
   margin:0;
   padding:0;
}
#center_column div.products_block p.product_desc {
   height: 0em;
   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.2em;
   padding: 0.5em 0;
   /*display: block;*/
}
p.price_container {
   text-align: center;
}
#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: 0.5em auto;
}

This is my global.css that had make changed.....

[ladivito]

{assign var='liHeight' value= 272} <!-- 275 -->
{assign var='nbItemsPerLine' value=2} <!-- 4 -->

this is my homefeatured.tpl

[ladivito]

just finished editing my website.....here is the result and i'm quite satisfy with it

Thanks everyone ~

[ladivito]

in Homefeatured.tpl just change this 2 lines

{assign var='liHeight' value= 225}
{assign var='nbItemsPerLine' value=2}

[ladivito]

And here is my global.css

/* 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: #d0d3d8 none;
   margin - top : 0.5em ;   /* thisssss */
   padding:0pt;
}
#center_column .products_block ul li:hover { background-color: #FFFFFF; }
#center_column .products_block ul { padding-left: 0px; margin-right: 0px;}   /* thisssss */
#center_column .products_block ul li {
   border-right: 0px solid white;  
   border-bottom:0px solid white;
   float: left;
   clear: none;
   width: 268px;

/*    height:375px;   #bdc2c9   #d0d3d8   */

   background-color: #d0d3d8;
   padding: 0;
   margin - right : 0px ;   /* thisssss */
   margin - bottom : 0 ;  /* thisssss */
   border : 0px solid white;  /* thisssss */   
   margin-top: 0px;
}

#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:75px !important; 
   margin-top:0px;
}
#center_column .products_block ul .product_accessories_description {
   margin:0;
   padding:0;
   height:100px;
}
/*#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;
   height: 3.5em; /* original */
   /*line - height : 6em ;  /* thisssss */ */
}
#center_column div.products_block h5 a {
   color: #374853;
   font-size:1.1em;
   /*padding : 0px ;  /* thisssss */*/
}
#center_column div.products_block ul li p {
   margin:0;
   padding:0;
}
#center_column div.products_block p.product_desc {
/*    height: 0em;
   color: #595a5e;  */

       color : #595a5e;   /* thisssss */
       width : 100px ;
       height : 100px ;
       float : right ;
       padding : 0 0 1px 1px ;
}
#center_column div.products_block a.product_image {
   display: block;
   background-color: transparent;
   width: 130px;   /* 129px */
   height: 130px;
   margin-left:2px;  
   float : left ;
   padding : 0 0 0 6px ; 
}
#center_column div.products_block .product_accessories_description a.product_image {
/*    width: 118px;
   height: 85px; */
    display : block ;
    background - color : transparent ;
    width : 130px ;
    height : 130px ;
    float : left ;
    padding : 0 0 0 6px ; 
}
#center_column div.products_block a.product_description {
/*    display: block;
   width: 118px;
   height: 50px;
   margin-left:2px;    */

       display : block ;
       width : 100px ;
       height : 85px ;
       float : right ;
       padding : 0 0 1px 1px ; 
}

#center_column div.products_block a.product_image img{
   float:none;
   margin - right : px ; 
/*    margin:0;   */
}
#center_column div.products_block p.product_desc, #center_column div.products_block h5 {
   margin-left:0.5em;  /* 0.5*/
   margin-right:1.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.2em;
   padding: 0.5em 0;
   /*display: block;*/    */
   text - align : right ;
   font - size : 1.2em ;
   width : 240px ; /*240*/
   padding - right : - 10px ;  /*-10px*/
   display : block ;
   float : left ;
   margin - right : 10px ;  /*10*/
   margin - bottom : 0px ;
   margin - top : 10px ; /*10*/
}
p.price_container {
   text-align: right ;
}
#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: 0.5em auto; */
   margin : 1.8em 5px 5px 1px ;  
   float : right ;
   width : 120px ; 
}

[Birdman68]

WOW! This is great, been looking for this for a few days. It works for the most part but not perfectly on Prestashop 1.4.4 (latest version) can't get description to show to the right of the image, add to cart buttons to line up with the buttons on the product next door and the description is too close to the image above

[Birdman68]

Another nice option for home featured would be this:

 

http://prestashopmods.blogspot.com/2011/03/prestashop-add-specials-to-homefeatured.html