Banner in my home page

Skarlet · February 27, 2012

Hi to all...

I have a problem, some time ago a created a store using prestashop, in that moment I could set up a banner in the top of the web page (using the header.tpl), but now I have tried for 2 days I have couldn´t. I know that Prestashop has have many changes and maybe for this reason I haven´t could do what I want,

Please check the file that I attached or check this site http://www.3gstore.de/.... that is what i need to do

Thank you for your help

Regards

BWT · February 27, 2012

You can do a few things, in my store I have a header module you can add just about anything to it to create the look you want for your shop, or you can add something like this in the header.tpl file of your theme

<div id="center_column">
 {if $page_name == 'index'}
  <div class="banner">
		  <a href="#"><img src="{$img_dir}image.png" alt="description"></a>


  </div>

Skarlet · February 28, 2012

Thank you Tjg for your answer.... I tried what you said but I don´t know what I doing wrong .... here is the header.tpl. can you please check it and say me what is wrong, please

Regards,

BWT · February 28, 2012

It would be like this...note you might need a bit of code in the css to position the sub-banner if you wanted to use one. If you just want to use the main banner then delete the sub-banner section at the end from <--sub-banner--> <div> to <div>

{*
* 2007-2011 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-2011 PrestaShop SA
*  @version  Release: $Revision: 9140 $
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">
<head>
 <title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
 <meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
 <meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />
{/if}
 <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
 <meta name="generator" content="PrestaShop" />
 <meta name="robots" content="{if isset($nobots)}no{/if}index,follow" />
 <link rel="icon" type="image/vnd.microsoft.icon" href="{$img_ps_dir}favicon.ico?{$img_update_time}" />
 <link rel="shortcut icon" type="image/x-icon" href="{$img_ps_dir}favicon.ico?{$img_update_time}" />
 <script type="text/javascript">
  var baseDir = '{$content_dir}';
  var static_token = '{$static_token}';
  var token = '{$token}';
  var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
  var priceDisplayMethod = {$priceDisplay};
  var roundMode = {$roundMode};
 </script>
{if isset($css_files)}
{foreach from=$css_files key=css_uri item=media}
<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
{/foreach}
{/if}
{if isset($js_files)}
{foreach from=$js_files item=js_uri}
<script type="text/javascript" src="{$js_uri}"></script>
{/foreach}
{/if}
 {$HOOK_HEADER}
</head>

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
   {if !$content_only}
 {if isset($restricted_country_mode) && $restricted_country_mode}
  <div id="restricted-country">
  <p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
 </div>
 {/if}

<div id="page">
    <div id="center_column">
	 {if $page_name == 'index'}
	  <div class="banner">
			  <a href="#"><img src="{$img_dir}banner.png" alt="description"></a>
	  </div>

  <!-- Header -->
  <div id="header">								 
 <a id="header_logo" href="{$link->getPageLink('index.php')}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
 <img class="logo" src="{$img_ps_dir}logo.jpg?{$img_update_time}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />

   </a>

		    <div>

   <div id="header_right">
		    {$HOOK_TOP}
   </div>
</div>
  <div id="columns">
   <!-- Left -->
   <div id="left_column" class="column">
 {$HOOK_LEFT_COLUMN}
   </div>
   <!-- Center-banner -->
   <div id="center_column">
 {if $page_name == 'index'}
  <div class="main-banner">
		  <a href="YOURLINKHERE"><img src="{$img_dir}NAMEOFIMAGEHERE.jpg" alt="YOURDESCRIPTIONHERE"></a>
  </div>
  <!-- sub-banner -->
  <div class="sub-banner">
   <ul>

    <li class="sub-banner9"><a href="#"><img src="{$img_dir}#.jpg" alt="SUB-BANNER_IMG"></a></li>
   </ul>
  </div>

 {/if}

{/if}

Skarlet · February 28, 2012

Hi Tjg, thank you for your answer

I copied and pasted the code that you sent me into the header.tpl but I don´t see any banner, I´m sure about the name and also I remonved the sub-banner in order to test .... but I can´t see anything.... Any ides why ?

Regards and thank you for your help

BWT · February 28, 2012

Down the bottom of the code I wrote YOUR LINK HERE and YOUR DESCRIPTION HERE you have to upload a image to your server and write the name.jpg and YOUR LINK if you want to link to it. In the 3rd section would be a "HOVER" decription.

you wouldn't see any changes if you didn't add the image take a look at the highlighted RED parts. The highlighted gold part allows prestashop to find your image without writing the whole path.

Skarlet · February 29, 2012

Hi tjg

Thanks you again for your help....

I did what I you said me, I changed the information as you told me, check it

{if $page_name == 'index'}

</div>

<ul>

</ul>

</div>

I copied the "baner_tienda.jpg" in the img folder but I can´t see anything.... You know.... I just saw something... I using Dreamwaver and I just see an error that Dreamwaver mark in yellow, take a look to the images that I attached, the error is in the yellow part... I think that is the problem or part or the problem.... what do you think

Thank you again for your help

BWT · February 29, 2012

Did you put it in the theme img folder? also you'll need to refresh you page maybe even open a new window. I can't open the thumbnail you attached for some reason??

I can't see the thumbnail I guess prestashop forum has a problem with it add it as a download so i can see the error

Skarlet · March 1, 2012

Hi tjg

Thank you again for your help.....

I put the image in the img folder., I attaced a pictures, please check it, also I attached the previous image again

Thank you

BWT · March 1, 2012

The thumbnail images cannot be open prestashop knows about this issue and is working on it. maybe you can post a link i can visit the site, or add the images as a download so i can see both of them. If I can help i am more then happy to do so.

Skarlet · March 1, 2012

Thank you .... I just sent you a PM, can you please check it

Mark Hesketh · March 2, 2012

Could it be that the performance / cache settings are turned on and need clearing to see your changes?

This is done in the back office > preferences > performance option, turning Force Compile: Yes and Cache: No (full details in this post). You may need to clear the /tools/smarty/cache/ and /tools/smarty/compile/ folders also.

Apologies if you've already done this but if your changes arent appearing, this is usually the reason.

Mark

BWT · March 2, 2012

It's possible, make the changes suggested and re-fresh the browser or open a new one.

Skarlet · March 4, 2012

Hi Mark Hesketh and Tjg..... thank you for your help ... I will do waht you said and let you know the results

Thank you

Skarlet · March 6, 2012

Hi Tjg and all of you

^{I upload the the store and you can check it in this}^link, as you can see, I could down the header using css but the image doesn't appear, the banner is on the right folder, http://www.publiwebcr.com/oscar/themes/prestashop/img/baner_tienda.jpg and the code is this

{*

* 2007-2011 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]>

* @version Release: $Revision: 9140 $

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

* International Registered Trademark & Property of PrestaShop SA

*}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

<title>{$meta_title|escape:'htmlall':'UTF-8'}</title>

{if isset($meta_description) AND $meta_description}

{/if}

{if isset($meta_keywords) AND $meta_keywords}

{/if}

var baseDir = '{$content_dir}';

var static_token = '{$static_token}';

var token = '{$token}';

var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};

var priceDisplayMethod = {$priceDisplay};

var roundMode = {$roundMode};

</script>

{if isset($css_files)}

{foreach from=$css_files key=css_uri item=media}

{/foreach}

{/if}

{if isset($js_files)}

{foreach from=$js_files item=js_uri}

{/foreach}

{/if}

{$HOOK_HEADER}

</head>

{if !$content_only}

{if isset($restricted_country_mode) && $restricted_country_mode}

<p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>

</div>

{/if}

{if $page_name == 'index'}

</div>

<a id="header_logo" href="{$link->getPageLink('index.php')}" title="{$shop_name|escape:'htmlall':'UTF-8'}">

</a>

<div>

{$HOOK_TOP}

</div>

{$HOOK_LEFT_COLUMN}

</div>

{if $page_name == 'index'}

</div>

<ul>

</ul>

</div>

{/if}

Thank for your help

BWT · March 6, 2012

Actually I changed the setting to "FORCE COMPLY" and "CASHE" to OFF and the front end went blank on his site for some reason, version 1.4.7.0, Also I didn't realize jamarchi you were using the default prestashop theme so in that case the code needed to be added to the CSS to add the image. I removed the code from the header.tpl file and added the appropriate code to the .CSS file to display the header image. I also re-sized the image so that the banner would be the smae size as the head section.

Banner in my home page

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites