Different header height on homepage

Hi,
I want to to change header's height only on homepage ( ID=640) ( for example: header's image height in template settings is set to 500px, but on homepage I want to set height to 900px. If I modify height under template>images tabs, headers changes in all pages, what i do not want to. What I am looking for is separately change header's in homepage height. The code I was trying to assign to .fronpage suffix is:

Code: Select all

.frontpage #gkHeaderMod,
.frontpage .blog-page > .header,
.frontpage .single-page > .header,
.frontpage .search-page .header
{height:900px;}

Which do not work. What I have to add or change?
I have a open topic for this issue but i could not find a solution for this, I was suggested to add this code:

Code: Select all

#gkHeaderMod img {height:500px; top: 30% !important;}
.frontpage #gkHeaderMod, .frontpage .blog-page > .header, .frontpage .single-page > .header, .frontpage .search-page .header
{height:500px;}

After adding this code, the homepage looks like in attached image.
Web url: http://demo.macawlab.com/dukes/
Please help me with this issue, its very important to me.

Thank You!

Lets start by adding some unique homepage suffix (now you have noMainbody).
Please set homepage suffix to "noMainbody fixHeaderHeight" and write back.

Added

Well, the actual problem is with this override:

Code: Select all

#gkHeaderMod img {
    height: 500px;
    top: 30% !important;
}


which causes different display of image. Please remove the code and all should be fine.

Okay, now I have only this code:

Code: Select all

.frontpage #gkHeaderMod, .frontpage .blog-page > .header, .frontpage .single-page > .header, .frontpage .search-page .header
{height:900px;}


but it does not working...

Please clear cache, right now frontpage image shows correctly (fullscreen).

I cleared the cache, but it looks the same. You can see it in attached image...

Any particular browser? What browser version? Wha OS?

I am using windows 8.1 and was checking on these browsers: Firefox, Chrome and IE.

I bet it is some kind of cache. Please try incognito/private mode to be 100% sure.

Just tried on Firefox and Chrome incognito/private browsing, but it looks the same. I cleared cache couple times on all browsers...

I also checked on other computers and mac os, but everywhere it looks the same... any ideas what it can be?

I'll be shooting blind here, as still I see something else on my screen... Please edit this file:
templates/gk_quark/js/gk.scripts.js
and find this part of code:

Code: Select all

   // Fix for the containers width
   if(jQuery('#gkBg').outerHeight() < jQuery(window).outerHeight()) {
      jQuery('#gkBg').css('min-height', jQuery(window).outerHeight() + "px");
   }
   
   jQuery(window).resize(function() {
      if(jQuery('#gkBg').outerHeight() < jQuery(window).outerHeight()) {
         jQuery('#gkBg').css('min-height', jQuery(window).outerHeight() + "px");
      }
   });


Now change it to:

Code: Select all

   // Fix for the containers width
   if(jQuery('#gkBg').outerHeight() < jQuery(window).outerHeight()) {
      jQuery('#gkBg #gkHeaderMod ').css('min-height', jQuery(window).outerHeight() + "px");
   }
   
   jQuery(window).resize(function() {
      if(jQuery('#gkBg').outerHeight() < jQuery(window).outerHeight()) {
         jQuery('#gkBg #gkHeaderMod').css('min-height', jQuery(window).outerHeight() + "px");
      }
   });


It works! but it changed the header height not only on frontpage, but also on the Gallery page. Any ideas why?
http://demo.macawlab.com/dukes/gallery

If you would like to have it working only on homepage, you need to start with unique homepage suffix. Could you please add it and write back providing its name?

Oh, I thought it already has a suffix .frontpage, but I added a custom one, called .homepage
attached an image of my suffixes

This way it will not work, you need to add all suffixes for page id 640 in one line.

Ps - right now only first one works.

I did not knew that it works that way I changed it, like this is the right way?

Since the all other page's headers are okay, only the Gallery page header shows full screen. I checked with a firebug and I found this code:

Code: Select all

element.style {
    min-height: 971px;
}

and I cannot find the path to it's css file, because it says inline...

This code is set inline by Javascript.
Now while all suffixes are ok, please write again what needs to be done and where.

Everything is okay except Gallery page header. I need it to be the same height as all others ( height: 500px).
At the end:
home page-900px
All other menu items 500px ( gallery page still showing the same height as in the home page).

Or remove that script for gallery header

So basically, you want all headers, including gallery to have 500px and homepage header to be fullscreen?

Correct, that is all I want

Ok, so please revert previous change that you did in javascript, and change the code this way:

Code: Select all

   // Fix for the containers width
   if(jQuery('#gkBg').outerHeight() < jQuery(window).outerHeight()) {
      jQuery('#gkBg').css('min-height', jQuery(window).outerHeight() + "px");
   }

   if(jQuery('.fixHeaderHeight #gkBg').outerHeight() < jQuery(window).outerHeight()) {
      jQuery('.fixHeaderHeight #gkBg #gkHeaderMod').css('min-height', jQuery(window).outerHeight() + "px");
   }
   
   jQuery(window).resize(function() {
      if(jQuery('#gkBg').outerHeight() < jQuery(window).outerHeight()) {
         jQuery('#gkBg').css('min-height', jQuery(window).outerHeight() + "px");
      }
   });

   jQuery(window).resize(function() {
      if(jQuery('.fixHeaderHeight #gkBg').outerHeight() < jQuery(window).outerHeight()) {
         jQuery('.fixHeaderHeight #gkBg #gkHeaderMod').css('min-height', jQuery(window).outerHeight() + "px");
      }
   });


It works perfectly. Thank You a lot, saved my ass, you're the best!
regards,
Gedas

I'm glad we could solve it out .
Is there anything else I can help you with regarding this topic?