How to insert your own html/css into presta

[scalesplanet.com]

Hello,

 

I want to ask which method should I use to work with the following criteria. I designed my own html and CSS files. Therefore I already have the the styling and structure. I want to apply this design and structure so it can work with prestashop CMS.

 

Therefore I duplicated the standard theme and already inserted the html code of header into header.tpl and the footer in footer.tpl. I overrided FrontController.php so the css files and Jquery files will be always linked. This part already works. My next step, is to insert the rest of my html (As you can sse in the picture uploaded). Therefore I think I have to use a module for the middle part. This is my great question...

 

How can I add the html code for the product boxes I created and make it work with the module??? This way I could use the CMS and whenever I created a new product it would apply with the CSS.

 

Is there also any hint in which should be my method of working to gain this control with prestashop???

 

Thanks Dani

 

I'm using prestashop 1.4.8

[faDdy]

For homepage you have to edit css and tpl files of homefeatured , homenewproducts and editorial module .... for displaying products by category you must have to search on forum to find out a module that will work and then change the CSS files of that module according to your needs........

[scalesplanet.com]

As I said I have already assigned my own CSS and its working via an override. So I don;t have to do anything else with the CSS write???

 

Regarding changing the homefeatures is exactly what I'm doing in this moment. I'm changing the .tpl. There is a lot of presta code and I don;t know which codes should I save. This is the actual code of homefeatures.tpl:

 

 

 

<!-- MODULE Home Featured Products -->
<div id="featured-products_block_center" class="block products_block">

<h4>{l s='Featured products' mod='homefeatured'}</h4>
{if isset($products) AND $products}
<div class="block_content">
{assign var='liHeight' value=342}
{assign var='nbItemsPerLine' value=4}
{assign var='nbLi' value=$products|@count}
{math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}
{math equation="nbLines*liHeight" nbLines=$nbLines|ceil liHeight=$liHeight assign=ulHeight}
<ul style="height:{$ulHeight}px;">
{foreach from=$products item=product name=homeFeaturedProducts}
<li class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1}clear{/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - ($smarty.foreach.homeFeaturedProducts.total % $nbItemsPerLine))}last_line{/if}">
<h5><a href="{$product.link}" title="{$product.name|truncate:32:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:27:'...'|escape:'htmlall':'UTF-8'}</a></h5>
<div class="product_desc"><a href="{$product.link}" title="{l s='More' mod='homefeatured'}">{$product.description_short|strip_tags|truncate:130:'...'}</a></div>
<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" /></a>
<div>
{if $product.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}<p class="price_container"><span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span></p>{else}<div style="height:21px;"></div>{/if}
<a class="button" href="{$product.link}" title="{l s='View' mod='homefeatured'}">{l s='View' mod='homefeatured'}</a>
{if ($product.id_product_attribute == 0 OR (isset($add_prod_display) AND ($add_prod_display == 1))) AND $product.available_for_order AND !isset($restricted_country_mode) AND $product.minimal_quantity == 1 AND $product.customizable != 2 AND !$PS_CATALOG_MODE}
{if ($product.quantity > 0 OR $product.allow_oosp)}
<a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart.php')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}</a>
{else}
<span class="exclusive">{l s='Add to cart' mod='homefeatured'}</span>
{/if}
{else}
<div style="height:23px;"></div>
{/if}
</div>
</li>
{/foreach}
</ul>
</div>
{else}
<p>{l s='No featured products' mod='homefeatured'}</p>
{/if}


<!-- /MODULE Home Featured Products -->

 

As I thought I woud have to past my html code which I have already created:

 

 

 

<!-- scales showcase -->
<div id="p_showcase1">
<div id="subtitle">
<p>TOP 10 DIGITAL SCALES:</p>
<img src="_img/2_body/title_underline/underline_scales.png" alt="digital scales underline" />
</div>

<!-- first row of top 10 digital scales -->
<div id="p_box_left">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>

<div id="p_box">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>

<div id="p_box">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>

<div id="p_box">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>

<div id="p_box">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>

<!-- second row of top 10 digital scales -->

<div id="p_box_left">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>

<div id="p_box">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>

<div id="p_box">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>

<div id="p_box">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>

<div id="p_box">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>
</div>

<!-- banner segment -->
<object>
</object>

<!-- other products showcase -->
<div id="p_showcase2">

<div id="vapo">
<div id="subtitle">
<p>TOP 5 VAPORIZERS:</p>
<img src="_img/2_body/title_underline/underline_vaporizer.png" alt="vaporizer underline" />
</div>

<!-- top 5 vaporizers -->

<div id="p_box_left">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>

<div id="p_box">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>

<div id="p_box">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>

<div id="p_box">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>

<div id="p_box">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>
</div>

<div id="grinder">
<div id="subtitle">
<p>TOP 5 GRINDER:</p>
<img src="_img/2_body/title_underline/underline_grinder.png" alt="grinder underline" />
</div>

<!-- top 5 grinders -->

<div id="p_box_left">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>

<div id="p_box">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>

<div id="p_box">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>

<div id="p_box">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>

<div id="p_box">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>
</div>

<div id="stash">
<div id="subtitle">
<p>TOP 5 STASH:</p>
<img src="_img/2_body/title_underline/underline_stash.png" alt="stash underline" />
</div>

<!-- top 5 stash -->

<div id="p_box_left">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>

<div id="p_box">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>

<div id="p_box">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>

<div id="p_box">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>

<div id="p_box">
<div id="p_box_image">
</div>
<div id="p_box_price">
<div id="p_box_info">
</div>
<div id="p_box_cart">
</div>
</div>
</div>
</div>
</div>
</div>

 

 

Any hint how I should do this correctly?!?!

Would this work with the module if in a future if I want to add a new product?!!?!

 

Greetings and thanks,

 

Dani