Homepage + Top Banner

andrewb84uk · April 6, 2010

Hello, I saw a site on here and I love the banner with the top looking like the following what file do I modify to start and create something like this; I think the site is http://www.soulbeat.co.uk/presta/

http://img16.imageshack.us/img16/5223/99428360.png

Thanks

Sri Wulandari · April 6, 2010

all is in your theme's folder, if you are using the default theme then find "header.tpl" in yoursite/themes/prestashop
and find "global.css" in yoursite/themes/prestashop/css

Step 1 > In header.tpl, find this :

<!-- Header -->



                   {$HOOK_TOP}

Replace with :

<!-- Header -->


                   {$HOOK_TOP}

Step 2 > Create the banner and name it like "banner.jpg" with this dimension : 980 x anysize you want and put it in yoursite/themes/prestashop/img/

Step 3 > In "global.css" find this:

#header {
   float: left;
   width: 71%;
   text-align: right;
}

Replace with

#header {
   background:url('../img/banner.jpg') no-repeat;
   float: left;
   width: 100%;
   text-align: right;
}

andrewb84uk · April 6, 2010

Thankyou so much, greatly apreciate your reply. Many Thanks. If there was virtual cookies I would give you five.

jeroendielemans · April 7, 2010

I don't get this...
All I get is a Hook something, theres nothing more in my Header.tpl ???

jeroendielemans · April 8, 2010

{if isset($meta_description) AND $meta_description} {/if} {if isset($meta_keywords) AND $meta_keywords} {/if} {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} {if !$content_only}
   •    {l s='This shop requires JavaScript to run correctly. Please activate JavaScript in your browser.'}

{$HOOK_TOP}
{$HOOK_LEFT_COLUMN}
{/if}

is what I get when I open header.tpl

Sri Wulandari · April 9, 2010

hi jeroendielemans,

I don't know how you get that. This is the default header.tpl, copy and paste it:

>
<html >
   <head>
       <title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
       <meta name="description" content="{$meta_description|escape:htmlall:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
       <meta name="keywords" content="{$meta_keywords|escape:htmlall:'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" />
       <link rel="shortcut icon" type="image/x-icon" href="{$img_ps_dir}favicon.ico" />
{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}
       <script type="text/javascript" src="{$content_dir}js/tools.js"></script>
       <script type="text/javascript">
           var baseDir = '{$content_dir}';
           var static_token = '{$static_token}';
           var token = '{$token}';
           var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
       </script>
       <script type="text/javascript" src="{$content_dir}js/jquery/jquery-1.2.6.pack.js"></script>
       <script type="text/javascript" src="{$content_dir}js/jquery/jquery.easing.1.3.js"></script>
       <script type="text/javascript" src="{$content_dir}js/jquery/jquery.hotkeys-0.7.8-packed.js"></script>
{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}
</pre>
<ul>{l s='This shop requires JavaScript to run correctly. Please activate JavaScript in your browser.'}</ul>
<br><div>

           <!-- Header -->



                   {$HOOK_TOP}



           <!-- Left -->

               {$HOOK_LEFT_COLUMN}


           <!-- Center -->

   {/if}
<

jeroendielemans · April 9, 2010

thank you, I will try that though my webshop is fully working without it!

PS: why are there a few [removed] is your code? is that something I have to fill in myself or just leave it?

rocky · April 9, 2010

The forums automatically replace script code with [removed]. You should not copy this code, since it won't work. I'll fix the code above by entering <script> instead of <script>.

jeroendielemans · April 9, 2010

The forums automatically replace script code with [removed]. You should not copy this code, since it won't work. I'll fix the code above by entering <script> instead of <script>.

thank you for this!

jeroendielemans · April 9, 2010

Ok guys, did the following:
Made a backup from Global.css and Header.tpl

Replaced the code in header.tpl with the code posted in this topic.
Then edit a part of the code as described in this topic.

Then edited Global.css as described in this topic.

Then deleted my browsercache and went to my webshop-url.
Nothing but a white screen there...

So I restored my backup from header.tpl and the shop is back.
Only problem is that the banner is on the background and the blocks are not lowered...

see the screenshot (sorry guys, but the name has to remain secret)

Can somebody help me with this?

jeroendielemans · April 9, 2010

I also want te get rid of the small logo in the leftuppercorner....

Vostick · April 14, 2010

Hello,

doesn´t work to me , but i use another theme instead of default, could be a problem ?

jeroendielemans · April 20, 2010

very stange,...
It worked on Windows, but on apple it won't..

So Vostick, if you're on an apple, go to an PC and try the above!

hunter204 · June 17, 2010

what if I want to insert an html instead of swf? how to code the html that it will be display as a banner? thnx

jeroendielemans · June 17, 2010

I dont work with SWF, I've just edit the logo-file, made it a bigger logo...
If you want to you can make an image and replace it.

Then modify some extras in the files mentioned before...

I don't remember exactly what I've done... But it's working now!

shopav · February 1, 2012

Hi,

How to the centre the slider, can any 1 help,,Please

http://shopav.co.uk/prestashop/

Homepage + Top Banner

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