Header [row with links]

[Yakje]

Hello,

 

I am using PrestaShop v1.6.0.9, currently this is what my site looks like:

http://goo.gl/RqgDpw

Now i want to customize the header part to achieve the following (highlighted red in the image[made this in photoshop])

I figured i had to edit the header.tpl, but i have no idea what and where to add certain code?

Any ideas on how i will be able to achieve this will be highly appreaciated!

 

Edited March 13, 2015 by Yakje (see edit history)

[jgamio]

HI

 

why you didnt use the topmenu ?

 

You need these on home on all pages ?

 

 

I think the header.tpl is the correct place but these is just html or you want create a module

[Yakje]

What do you mean with topmenu? my intention is to get it the way i made it in photoshop

A module would be nice, but i think that is kinda out of my reach, just some html code would be fine 

[jgamio]

You need just put your html on the header.tpl

[Yakje]

That is exactly how far i got, as i said in my first post

 

I figured i had to edit the header.tpl, but i have no idea what and where to add certain code?

[jgamio]

When did you ask

 

where to add certain code?

 

Wich code you need add

[Yakje]

Look at my start post in this topic   .

The thing is, i don't have any code to achieve the row with links.

I would like to know what code i should use and where exactly in the header.tpl i should add this.

[jgamio]

Ok let me see

 

You need look on the header.tpl -> these file is a template and you can put any html you want

 

After you need to know 2 things

 

Prestashop use hook to put info on the pages you can see

 

{hook h="displayBanner"}   

{hook h="displayNav"}

{$HOOK_TOP}

 

Now what the display. Easy you go to the back office select modules position and there look for displayNav , displayTop then you know where the data come from.

 

In your case you need to put the html after {hook h="displayNav"} 

 

after <div class="nav"></div> you can add your div to put your html

 

after that you need to use some smarty (template engine) to use the links example you dont use <a href="..."> you need to put for example {$link->getCMSLink('number', 'seo-link')} to link a cms page where number is the number of the page an seo-link your seo link of the cms

 

 

These is what are you lookig for ?

[Yakje]

Yes, this is exactly what i was looking for!

I will try to implement it tomorrow and let you know if it works

Thanks Jgamio!

[Yakje]

I tried to implement it today, and am pretty pleased with the result:

although it is looking good at the website, it does not show up as nice on mobile devices:

the same goes for when you zoom in/out on the web page or when i make my browser window smaller. It all seems to fall out of line.

 

This is the code i am currently using:

 

Header.tpl

<div class="cta">
  <div>

    <i class="icon-check"></i><a href='https://anylink'>Webwinkel keurmerk</a>
					
    <i class="icon-time"></i><a href='https://imkershop.nl/content/15-levering-en-verzending'>14 dagen bedenktijd</a>
					
    <i class="icon-truck"></i><a href='https://imkershop.nl/content/15-levering-en-verzending'>Verzonden met PostNL</a>

  </div>
</div>

Global.css

.icon-check
{
margin-right: 0.5em;
}

.icon-time
{
margin-left: 2em;
margin-right: 0.5em;
}

.icon-truck
{
margin-left: 2em;
margin-right: 0.5em;
}

.cta a:hover
{
color: #f8b40f;
}

.cta
{
padding-right: 5px;
padding-bottom: 5px;
font-size: 110%;
font-weight: bold;
padding-left: 370px;
position: absolute; 
bottom: 0;
}

Any ideas how to make it show up correctly on all devices?

Edited March 17, 2015 by Yakje (see edit history)

[jgamio]

To do responsive you need work with the bootstrap framework

 

you need read goto to the  bootstrap grid   page

 

read about 

[Yakje]

I changed my mind and only want it to show on desktops. So make it invisible on mobile devices, is there an easy way to achieve this in my current code?

Another thing, i would like my links to be relative, any ideas? 

[jgamio]

I talk you you need read the bootstrap grid

 

 

Ok not 100% sure but is something like these

 

<div class="col-lg-12 hidden-xs"> YOUR HTML </div>

 

We create a columna of 12 ( the max on boostrap by default ) on  lg Large Sizes take all the width

and hidden in xs  xsmall devices

[Yakje]

I now know how to hide it for mobile devices, thanks!

Still struggling to get it at the position i want though.

 

To show the row with links nicely in the grey box i changed the following code in global.css 

  header .row {
    position:relative; } 

I deleated "position:relative;" in the above code. At first this looked good, but later i noticed it made other theming elements go out of place. So i had to change it back. But now it looks like this again:

 

Any ideas how i could get it shown at the position i want?

 

Code i added

The div

<div id="cta">
<div class="header-container">
<ul>
<li><i class="icon-check"></i><a href="https://www.webwinkelkeur.nl/popup.php?add_review&id=3984">Webwinkel keurmerk</a></li>
<li><i class="icon-time"></i><a href="../content/15-levering-en-verzending">14 dagen bedenktijd</a></li>
<li><i class="icon-truck"></i><a href="../content/15-levering-en-verzending">Verzonden met PostNL</a></li>
</ul>
</div>
</div>

Global.css

.icon-check{
margin-right: 0.5em;}

.icon-time{
margin-left: 2em;
margin-right: 0.5em;}

.icon-truck{
margin-left: 2em;
margin-right: 0.5em;}

#cta a:hover{
color: #0A6E00; 
}

#cta{
padding-bottom: 6px;
text-align:center; 
position: absolute;
font-weight: bold;
font-size: 110%;
bottom:0;
left:0; 
right:0;
margin: 0 auto
}

#cta ul {margin: 0;}
#cta ul li{
display:inline;}

.header-container {
position:relative;
background:#fff
}

You can take a look at my live site to inspect elements:

http://goo.gl/RqgDpw

Edited March 19, 2015 by Yakje (see edit history)

[picrasma]

Ok let me see

 

You need look on the header.tpl -> these file is a template and you can put any html you want

 

After you need to know 2 things

 

Prestashop use hook to put info on the pages you can see

 

{hook h="displayBanner"}   

{hook h="displayNav"}

{$HOOK_TOP}

 

Now what the display. Easy you go to the back office select modules position and there look for displayNav , displayTop then you know where the data come from.

 

In your case you need to put the html after {hook h="displayNav"} 

 

after <div class="nav"></div> you can add your div to put your html

 

after that you need to use some smarty (template engine) to use the links example you dont use <a href="..."> you need to put for example {$link->getCMSLink('number', 'seo-link')} to link a cms page where number is the number of the page an seo-link your seo link of the cms

 

 

These is what are you lookig for ?

Hi i have a very special case here with hook_top and the above didnt help. Everything worked fine until a div with id "newsletter_block_left" appeared in my header and i have tried all kinds of things to get rid of it with no luck. How can i get the HTML page where this is so that i can delete it?

[jgamio]

Yakje I can see your menu did you delete ?

 

picrasma you need to know Prestashop use modules and hooks to put elements on you  store you dont have a html were is all

 

if you have to get ride off newsletters you go to your backoffice look for modules look for the newsletter module and disable there 

[picrasma]

Yakje I can see your menu did you delete ?

 

picrasma you need to know Prestashop use modules and hooks to put elements on you  store you dont have a html were is all

 

if you have to get ride off newsletters you go to your backoffice look for modules look for the newsletter module and disable there 

Yes jgamio i have done that already and i still have that funny div there at the header and footer. you might want to have a look to see what am saying www.styleplaygroundng.com

 

pls see image in inspector

Edited March 22, 2015 by picrasma (see edit history)

[jgamio]

 I cant access your store from my country

[picrasma]

 I cant access your store from my country

Oh snap!! is there something i should/could enable on my store to make it accessible?

[Yakje]

Ye i disabled it, because it still ain't the way i want it to be.

Enabled it on my test site, you can visit it at the following link:

http://goo.gl/0japhM

 

Username: test

Password: test1234

[jgamio]

Try these look the header.tpl

 

each row in the header is

 

<div class="row"></div>

 

try to put your code inside these after the last <div class="row"></div> on your header

[Yakje]

Not sure if this is what you meant? i attached the header.tpl (in .html format, since .tpl is not permitted as atachement)

I tested it like this, but still the same result.

header.html

[Yakje]

Ok, i managed to get it at the right position, but now the links are not working anymore, what could be causing this?

 

This is my code:

Global.css:

.icon-check{
margin-right: 0.5em;}

.icon-time{
margin-left: 2em;
margin-right: 0.5em;}

.icon-truck{
margin-left: 2em;
margin-right: 0.5em;}

.cta a:hover{
color: #0A6E00; }

.cta{
padding-bottom: 6px;
text-align:center; 
position: absolute;
font-weight: bold;
font-size: 110%;
bottom:0;
left:0; 
right:0;
margin: 0 auto}

.cta ul {margin: 0;}
.cta ul li{
display: inline;  }

Header.tpl:

 

Underneath 

<div class="header-container">

i put:

<div class="cta">
<ul>
<li><a href="https://www.webwinkelkeur.nl/popup.php?add_review&id=3984" target="_blank"><i class="icon-check"></i>Webwinkel keurmerk</a></li>
<li><a href="../content/15-levering-en-verzending"><i class="icon-time"></i>14 dagen bedenktijd</a></li>
<li><a href="../content/15-levering-en-verzending"><i class="icon-truck"></i>Verzonden met PostNL</a></li>
</ul>
</div>

You can see it on: http://goo.gl/9zPC7G

Username: test

Pass: test1234
 

[Yakje]

Fixed it, issue was the 

z-index:

All working now