(SOLVED) Change header on each page

[doog_2019]

Hello, 

I am a new user of prestashop and am building my first website. I use the last version of prestashop and I work in localhost with MAMP.

I usually find all the answers of my issues on google but can't find a solution for the following one..

My problem: 

My header is always the same, on each page. I went in my custom.css file and I can see the path to my image but i don't know how I can have a different header on each page..

Hope someone can help me

Thank you

Edited April 4, 2019 by doog_2019 (see edit history)

[Rodrigo B Laurindo]

Hi, @doog_2019,

In your header.tpl you could try something like:

{if $page.page_name == 'index'}
   /*** header for index page */
{elseif $page.page_name == 'product'}
   /*** header for product pages */
{elseif ........

 

[doog_2019]

4 hours ago, Rodrigo B Laurindo said:

Hi, @doog_2019,

In your header.tpl you could try something like:

{if $page.page_name == 'index'}
   /*** header for index page */
{elseif $page.page_name == 'product'}
   /*** header for product pages */
{elseif ........

Hi, @Rodrigo B Laurindo, thank you very much for your answer, I will try this and let you know

Edited April 2, 2019 by doog_2019 (see edit history)

[doog_2019]

Hello @Rodrigo B Laurindo, 

Thank you for your help, it worked perfectly  

BUT now my images are not covering the integrality of the header.

Maybe I did something wrong ?

This is my header.tpl (you can see your code at the end):

{block name='header_banner'}
  <div class="header-banner">
    {hook h='displayBanner'}
  </div>
{/block}

{block name='header_nav'}
  <nav class="header-nav">
    <div class="container">
        <div class="row">
          <div class="hidden-sm-down">
            <div class="left-nav">
              {hook h='displayNav1'}
            </div>
            
          </div>
          <div class="hidden-md-up text-xs-center mobile">
            <div class="pull-xs-left" id="menu-icon">
              <i class="mdi mdi-view-headline" aria-hidden="true"></i>
            </div>
            <div class="pull-xs-right" id="_mobile_cart"></div>
            <div class="pull-xs-right" id="_mobile_wishtlistTop"></div>
           
            <div class="top-logo" id="_mobile_logo"></div>
            <div class="clearfix"></div>
          </div>
        </div>
    </div>
  </nav>
{/block}

{block name='header_top'}
  <div class="header-top">
    <div class="laber-header">
        <div class="container">
            <div class="hidden-sm-down laberLogo" id="_desktop_logo">
              <a href="{$urls.base_url}">
                <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
              </a>
            </div>
            <div class="dropdown js-dropdown right-nav hidden-sm-down pull-right">
                <span class="expand-more" data-toggle="dropdown">
                    <i class="icon ion-navicon"></i>
                </span>
                <div class="dropdown-menu">
                    {hook h='displayNav2'}
                </div>
            </div>
            <div class="laberdisplayTop">
                {hook h='displayTop'}
            </div>
            <div class="container_lab_megamenu hidden-sm-down">
                <div class="laberMegamenu">
                    <div class="container">
                        {hook h='displayMegamenu'}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
      <div id="mobile_top_menu_wrapper" class="row hidden-md-up" style="display:none;">
        <div class="js-top-menu-bottom">
          {hook h='displayMegamenuMobile'}
          {hook h='displayVegamenuMobile'}
          <div class="pull-xs-right" id="_mobile_user_info"></div>
          <div id="_mobile_currency_selector"></div>
          <div id="_mobile_language_selector"></div>
          <div id="_mobile_contact_link"></div>
        </div>
      </div>
    </div>
  </div>
  {hook h='displayNavFullWidth'}
{/block}


 {if $page.page_name == 'category'}
<img src="themes/laber_outstock1/assets/img/ban.jpg">
    {elseif $page.page_name == 'contact'}
<img src="themes/laber_outstock1/assets/img/banID.jpg">
{/if}

 

[Rodrigo B Laurindo]

Can you post your old code?

[doog_2019]

The old code of the file header.tpl is the same but without the code you gave me.

But I can see in the custom.css that the path of the header is here "(..img/bg_header.png)

/* header */
body{
	font-family: 'Poppins', sans-serif;
	color:#7b7b7b;
	font-size:14px;
	font-weight:400;
	line-height:25px;
}
main{overflow:hidden;}
a{
	color:#8c8c8c;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
p {
    color: #8c8c8c;
	line-height:25px;
}
#header a{color:#8c8c8c;}
.subpage #header{
	background:#f5f5f5 url(../img/bg_header.png) no-repeat center center;
	margin-bottom:60px;
}
a:hover,
#header a:hover{
	color:#bc8246;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
	font-family: 'Poppins', sans-serif;
	font-weight:600;
}
.container {
    max-width:1170px;
}

 

[Rodrigo B Laurindo]

Maybe you should modify, instead, your layout tpl.

 {if $page.page_name == 'category'}
      <header id="header myheader-category">
 {elseif $page.page_name == 'contact'}        
      <header id="header myheader-contact">
*****

In your css, section ".subpage #header", remove the background line.

Then create another section for each newly created id

.subpage #myheader-category {
    background:#f5f5f5 url(../img/bg_header_category.png) no-repeat center center;
}

Not tested...
 

[doog_2019]

Hi @Rodrigo B Laurindo, 

I tried this solution but it didn't work for me..

So after a day of hard working on that issue (yes I am slow, BUT I am a beginner 😂), I found a solution:

FIRSTLY: I used just a colored header to be in the background.

SECONDLY: I used the first code you gave me and I wrote it in the header.tpl.

I used png images with a transparent background.

 {if $page.page_name == 'category'}
<img src="themes/laber_outstock1/assets/img/ban.png">
    {elseif $page.page_name == 'contact'}
<img src="themes/laber_outstock1/assets/img/banID.png">
{/if}

THIRDLY and finally: In my layout-both-columns.tpl file, I commented this line:

   <header id="header">
      

        {block name='header'}
          {include file='_partials/header.tpl'}
        {/block}
		{if $page.page_name != 'index'}
			<!--<div class="laberBreadcrumb">
			{block name='breadcrumb'}
				{include file='_partials/breadcrumb.tpl'}-->
			{/block}
			</div>
		{/if}
      </header>

Thank you for your help, it is a big stepforward for me and my website
   

[Rodrigo B Laurindo]

I am happy to know you were able to solve your issue 😉