How to call a new css style to be used on a page or block?

[Nick20000]

Hi.

 

if i want to add a new css code to my Home Featured Products block, how do I call for it to use my custom css style file? if i have a css custom file named homefeatured2.css how do i apply it to be used on this block?

 

the reason i ask is because i have 2 homefeatured blocks that i want to have different looks.

 

this is my code below to my homefeatured tpl coding.

 

 

thank you.

 

..............................................................................................................................................

 

{*

* 2007-2013 PrestaShop

*

* NOTICE OF LICENSE

*

* This source file is subject to the Academic Free License (AFL 3.0)

* that is bundled with this package in the file LICENSE.txt.

* It is also available through the world-wide-web at this URL:

* http://opensource.org/licenses/afl-3.0.php

* If you did not receive a copy of the license and are unable to

* obtain it through the world-wide-web, please send an email

* to [email protected] so we can send you a copy immediately.

*

* DISCLAIMER

*

* Do not edit or add to this file if you wish to upgrade PrestaShop to newer

* versions in the future. If you wish to customize PrestaShop for your

* needs please refer to http://www.prestashop.com for more information.

*

*  @author PrestaShop SA <[email protected]>

*  @copyright  2007-2013 PrestaShop SA

*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)

*  International Registered Trademark & Property of PrestaShop SA

*}

 

<!-- MODULE Home Featured Products -->

<div id="featured-products_block_center" class="block products_block clearfix">

{if isset($products) AND $products}

<div class="block_content">

{assign var='liHeight' value=229.78}

{assign var='nbItemsPerLine' value=5}

{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}

{math equation="(total%perLine)" total=$smarty.foreach.homeFeaturedProducts.total perLine=$nbItemsPerLine assign=totModulo}

{if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if}

<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} {/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - $totModulo)}last_line{/if}">

<a href="{$product.link|escape:'html'}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}</a>

<p class="s_title_block"><a href="{$product.link|escape:'html'}" title="{$product.name|truncate:50:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:26:'...'|escape:'htmlall':'UTF-8'}</a></p>

<div>

{if $product.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}<p class="price_container"><a class="lnk_more" href="{$product.link|escape:'html'}" title="{l s='Shop now' mod='homefeatured'}">{l s='Shop now' mod='homefeatured'}</a><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}

 

{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')|escape:'html'}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to Basket' mod='homefeatured'}">{l s='Add to Basket' 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}

</div>

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

[moy2010]

Ain't it easier to create duplicated classes such as "block_2", "products_block_2", etc. ?

[Nick20000]

Ain't it easier to create duplicated classes such as "block_2", "products_block_2", etc. ?

hi.

 

what would i need to change? if my file is called homefeatured2.css how would i have this new custom css linked to that tpl? what exactly would i need to change and how?

 

thank you.

[Paulito]

Hello

 

As moy2010 says just add a class to the second block/module, for instance:

 

.myhomefeatured { background: blue;

                            color:red;

                            padding: 0 0 12px 0;

                           }

 

etc etc

 

Paul

[Nick20000]

Hello

 

As moy2010 says just add a class to the second block/module, for instance:

 

.myhomefeatured { background: blue;

                            color:red;

                            padding: 0 0 12px 0;

                           }

 

etc etc

 

Paul

hi paul.

 

my real problem is this. it has been driving me crazy. my product list.tpl shares the same tpl file coding as homefeatured.tpl for easy grid view. so as the product list.tpl shares its coding from the homefeatured.tpl file, any changes made on homefeatured.css effects changes on both files, understand? so how can i come up with a solution so that any changes i make on the homefeatured.css file to be separate? that's why i need to make a new css file for product list with the same content layout as homefeatured. if i make a new file called newproductlist.css how would i make the coding inside the shared homefeatured style call inside of the newproductlist file?

 

thank you.