HEADER IMAGE

Hi, where (how) can I change height of that header image, can't find it in any of css files... i want to have 50% of that in default template.

Hi

The height is being calculated by template scripts, but You can override it by using css code and change the height value for specific screen widths:

Code: Select all

@media screen and (min-width: 1920px) {
#gkHeaderMod, .blog-page > .header, .single-page > .header {
    height: 920px !important;
}
}
@media screen and (max-width: 1920px) {
#gkHeaderMod, .blog-page > .header, .single-page > .header {
    height: 800px !important;
}
}
@media screen and (max-width: 1440px) {
#gkHeaderMod, .blog-page > .header, .single-page > .header {
    height: 600px !important;
}
}
@media screen and (max-width: 1040px) {
#gkHeaderMod, .blog-page > .header, .single-page > .header {
    height: 480px !important;
}
}
@media screen and (max-width: 840px) {
#gkHeaderMod, .blog-page > .header, .single-page > .header {
    height: 440px !important;
}
}
@media screen and (max-width: 640px) {
#gkHeaderMod, .blog-page > .header, .single-page > .header {
    height: 360px !important;
}
}


Thank You.

Hi, after I changed the header height - at certain resolutions picture does not fill the entire frame. Is SHOULD change the aspect ratio pictures? Is there anything in css?

http://ph.madness.net.pl/

Hi

Ok. Let's try something different. Edit file http://ph.madness.net.pl/templates/gk_q ... mplate.css go to line 156 and change the class You see there to this:

Code: Select all

#gkHeaderMod img {
    height: auto;
    left: 50%;
    max-width: none !important;
    top: 50%;
    width: 100%;
}


than replace in override.css line 9 class to this:

Code: Select all

#gkHeaderMod, .blog-page > .header, .single-page > .header {
    height: auto !important;
}


Sorry, this isn't working right...

Hey madmips,

I like your black footer (quark) can you share the code ??

Thank you

Hey,

Code: Select all

#gkFooterNav {
border-top: 0px solid #e5e5e5;
margin: 0 auto;
padding: 70px 0;
}

#gkFooter {
background-color: #222;
color: #26292b;
font-size: 14px;
font-weight: 300;
line-height: 2;
padding: 0;
text-align: center;
}

I changed the proportions of the images and match the design height in css, now it is ok. But at lower resolutions menu disappears and the logo I do not know why.

thanks dude

I completed the code

Code: Select all

#gkFooterNav {
border-top: 0px solid #e5e5e5;
margin: 0 auto;
padding: 70px 0;
}

#gkFooter {
background-color: #000;
color: #26292b;
font-size: 14px;
font-weight: 300;
line-height: 2;
padding: 0;
text-align: center;
}
#gkFooter a {
    color: #fff;
    font-size: 18px;
    padding: 0 !important;
    text-transform: none;
    font-weight: 300;
}
#gkFooter a {
    color: #fff;
    font-size: 18px;
    padding: 0 !important;
    text-transform: none;
    font-weight: 300;
}
#gkFooter a:hover {
    color: #fff;
    font-size: 18px;
    padding: 0 !important;
    text-transform: none;
    font-weight: 300;
    text-decoration: underline;
}

try to set padding to 40px (now is 70), for me it's works better

Sorry, this isn't working right...

Hi

Just tell me what is not right. We probably have a different views on that.

Sorry, this isn't working right...

Hi

Just tell me what is not right. We probably have a different views on that.

I found a solution, thanks. By changing the height of the image, you must also change the height and width proportions.

Hi madmips,

I was lost with your solution, did you add code to override.css or to template.css file?

I'm looking your work with Quark template and it's nice. Congratulations.

Isma.

Thanks, continues to develop the project. I did change the override.css and modified the template with K2 - removed header generated from the image of the article (instead intercede module - custom html - so I can add text in the header).

Hi

@madmips thank You for explanation.

@gravitoso You need to place all css modifications in override.css file. So during template update You will only need to keep one file from being overwritten.