Issue with the Steakhouse Logo
- GK User
- Mon Oct 13, 2014 6:33 pm
Hi,
I'm configuring the SteakHouse template.
I would like to add a bigger logo (for example 640x250) on the header page. So I altered the size of the logo in the template.css file. I also removed the default "h1" and "h2" headings in the header module, as I only want to show the logo and the icons buttons. I played around with the logo-size so that the logo and icons are on the page. Perhaps not the most efficient way to do this? ... but it looks ok
However I'm having some layout problems... When resizing the browser window the header page is not being scaled correctly. It has something to do with the logo and heading changes, as it is correctly working with the default logo and headings.
Thanks for your input.
Regards,
Koen
I'm configuring the SteakHouse template.
I would like to add a bigger logo (for example 640x250) on the header page. So I altered the size of the logo in the template.css file. I also removed the default "h1" and "h2" headings in the header module, as I only want to show the logo and the icons buttons. I played around with the logo-size so that the logo and icons are on the page. Perhaps not the most efficient way to do this? ... but it looks ok

However I'm having some layout problems... When resizing the browser window the header page is not being scaled correctly. It has something to do with the logo and heading changes, as it is correctly working with the default logo and headings.
Thanks for your input.
Regards,
Koen
-
- Junior Boarder
- teitbite
- Mon Oct 13, 2014 9:39 pm
Hi
Please show me Your site.
Please show me Your site.
-
- Moderator
- GK User
- Mon Oct 13, 2014 10:32 pm
teitbite wrote:Hi
Please show me Your site.
The site is not published yet.
You can easily simulate this by using a larger logo size (wide & height; for example take the original size of steakhouse logo) in template.css, and removing the h1, h2 and discover button from the the header module. So only logo and widget icons are shown.
When resizing the browser, with the larger logo, the dimensions are a bit stragen.... with the original data this works perfectly (small logo, with h1, h2 and discover button). Normally the widgets are nicely kept on the same position and the background is also well rescaled...
Regards,
Koen
-
- Junior Boarder
- GK User
- Tue Oct 14, 2014 8:08 pm
Hi,
Is it clear? Can you help me?
Is it clear? Can you help me?
-
- Junior Boarder
- teitbite
- Thu Oct 16, 2014 1:29 pm
Hi
I'm afraid I do not get same result when I'm trying to mimic this. Please ignore the problem for now and get back to me when it will be online.
I'm afraid I do not get same result when I'm trying to mimic this. Please ignore the problem for now and get back to me when it will be online.
-
- Moderator
- teitbite
- Sun Nov 02, 2014 12:43 pm
Hi
I can finally see Your site, but what help do you want from me? I think Your logo look perfect like it is now.
Anyway the code to resize it for a desktop layout only and leave the smaller logo for mobile will be:
I can finally see Your site, but what help do you want from me? I think Your logo look perfect like it is now.
Anyway the code to resize it for a desktop layout only and leave the smaller logo for mobile will be:
- Code: Select all
@media only screen and (min-width:650px) {
#gkLogo.cssLogo {
height: 250px;
width: 600px;
}
}
-
- Moderator
- GK User
- Sun Nov 02, 2014 7:21 pm
teitbite wrote:Hi
I can finally see Your site, but what help do you want from me? I think Your logo look perfect like it is now.
Anyway the code to resize it for a desktop layout only and leave the smaller logo for mobile will be:
- Code: Select all
@media only screen and (min-width:650px) {
#gkLogo.cssLogo {
height: 250px;
width: 600px;
}
}
I just want the logo to be bigger (to compensate the text and button that i removed) AND nicely fill up the browser window, just as with the steakhouse setup. With the steakhouse quickstart setup the header page is always nicely resized to the size of the browser.
-
- Junior Boarder
- GK User
- Mon Nov 03, 2014 10:30 pm
teitbite wrote:Hi
I can finally see Your site, but what help do you want from me? I think Your logo look perfect like it is now.
Anyway the code to resize it for a desktop layout only and leave the smaller logo for mobile will be:
- Code: Select all
@media only screen and (min-width:650px) {
#gkLogo.cssLogo {
height: 250px;
width: 600px;
}
}
Hi,
I managed to solve the problem. Thanks for pointing me in the right direction...
-
- Junior Boarder
- teitbite
- Wed Nov 05, 2014 11:58 am
Hi
No problem. Can you tell us the correct solution? Just in case someone will need it.
No problem. Can you tell us the correct solution? Just in case someone will need it.
-
- Moderator
- GK User
- Wed Nov 05, 2014 7:45 pm
Sure.
So i removed the h1, h2 and button from the header module. Then changed the css logo and css resizing dimensions. The result is that i have now a header page with a larger logo that is still nicely resizing to used browser-size.
Following was added to override.css
/* Override template.css: change CSS logo margins and height*/
#gkLogo.cssLogo {
margin: 100px auto 0 auto;
height: 485px;
width: auto;
}
/* Override gk.stuff.css: change header dimensions*/
#gkHeaderMod .gk-short-menu {
margin: 580px 0 150px 0;
}
@media (max-height: 1400px) {
/*#gkHeaderMod .gk-short-menu { margin: 300px 0 150px 0; }*/
#gkHeaderMod .gk-short-menu { margin: 500px 0 130px 0; }
}
@media (max-height: 1300px) {
/*#gkHeaderMod .gk-short-menu { margin: 250px 0 100px 0; }*/
#gkHeaderMod .gk-short-menu { margin: 400px 0 130px 0; }
}
@media (max-height: 1200px) {
/*#gkHeaderMod .gk-short-menu { margin: 150px 0 50px 0; }*/
#gkHeaderMod .gk-short-menu { margin: 310px 0 120px 0; }
}
@media (max-height: 1100px) {
/*#gkHeaderMod .gk-short-menu { margin: 130px 0 50px 0; }*/
#gkHeaderMod .gk-short-menu { margin: 210px 0 120px 0; }
}
@media (max-height: 1000px) {
/*#gkHeaderMod .gk-short-menu { margin: 80px 0 50px 0; }*/
#gkHeaderMod .gk-short-menu { margin: 190px 0 110px 0; }
/*#gkLogo.cssLogo { margin: 30px auto 0 auto; }*/
#gkLogo.cssLogo { margin: 80px auto 0 auto; }
#gkLogo.cssLogo { height: 435px; }
}
@media (max-height: 900px) {
#gkHeaderMod .gk-short-menu { margin: 120px 0 110px 0; }
#gkLogo.cssLogo { margin: 70px auto 0 auto; }
#gkLogo.cssLogo { height: 415px; } /*180*/
}
@media (max-height: 800px) {
/*#gkHeaderMod .gk-short-menu { margin: 32px 0 50px 0; }*/
#gkHeaderMod .gk-short-menu { margin: 140px 0 110px 0; }
#gkLogo.cssLogo { margin: 60px auto 0 auto; }
#gkLogo.cssLogo { height: 395px; } /*180*/
}
@media (max-height: 700px) {
/*#gkHeaderMod .gk-short-menu { margin: 20px 0 50px 0; }*/
#gkHeaderMod .gk-short-menu { margin: 105px 0 110px 0; }
#gkLogo.cssLogo { margin: 40px auto 0px auto; }
#gkLogo.cssLogo { height: 350px; } /*180*/
}
@media (max-height: 600px) {
#gkHeaderMod .gk-short-menu { margin: 108px 0 110px 0; }
#gkLogo.cssLogo { height: 285px; } /*150*/
}
@media (max-height: 500px) {
#gkHeaderMod .gk-short-menu { margin: 66px 0 110px 0; }
#gkLogo.cssLogo { height: 240px; } /*120*/
#gkLogo.cssLogo { margin: 30px auto 0 auto; }
}
So i removed the h1, h2 and button from the header module. Then changed the css logo and css resizing dimensions. The result is that i have now a header page with a larger logo that is still nicely resizing to used browser-size.
Following was added to override.css
/* Override template.css: change CSS logo margins and height*/
#gkLogo.cssLogo {
margin: 100px auto 0 auto;
height: 485px;
width: auto;
}
/* Override gk.stuff.css: change header dimensions*/
#gkHeaderMod .gk-short-menu {
margin: 580px 0 150px 0;
}
@media (max-height: 1400px) {
/*#gkHeaderMod .gk-short-menu { margin: 300px 0 150px 0; }*/
#gkHeaderMod .gk-short-menu { margin: 500px 0 130px 0; }
}
@media (max-height: 1300px) {
/*#gkHeaderMod .gk-short-menu { margin: 250px 0 100px 0; }*/
#gkHeaderMod .gk-short-menu { margin: 400px 0 130px 0; }
}
@media (max-height: 1200px) {
/*#gkHeaderMod .gk-short-menu { margin: 150px 0 50px 0; }*/
#gkHeaderMod .gk-short-menu { margin: 310px 0 120px 0; }
}
@media (max-height: 1100px) {
/*#gkHeaderMod .gk-short-menu { margin: 130px 0 50px 0; }*/
#gkHeaderMod .gk-short-menu { margin: 210px 0 120px 0; }
}
@media (max-height: 1000px) {
/*#gkHeaderMod .gk-short-menu { margin: 80px 0 50px 0; }*/
#gkHeaderMod .gk-short-menu { margin: 190px 0 110px 0; }
/*#gkLogo.cssLogo { margin: 30px auto 0 auto; }*/
#gkLogo.cssLogo { margin: 80px auto 0 auto; }
#gkLogo.cssLogo { height: 435px; }
}
@media (max-height: 900px) {
#gkHeaderMod .gk-short-menu { margin: 120px 0 110px 0; }
#gkLogo.cssLogo { margin: 70px auto 0 auto; }
#gkLogo.cssLogo { height: 415px; } /*180*/
}
@media (max-height: 800px) {
/*#gkHeaderMod .gk-short-menu { margin: 32px 0 50px 0; }*/
#gkHeaderMod .gk-short-menu { margin: 140px 0 110px 0; }
#gkLogo.cssLogo { margin: 60px auto 0 auto; }
#gkLogo.cssLogo { height: 395px; } /*180*/
}
@media (max-height: 700px) {
/*#gkHeaderMod .gk-short-menu { margin: 20px 0 50px 0; }*/
#gkHeaderMod .gk-short-menu { margin: 105px 0 110px 0; }
#gkLogo.cssLogo { margin: 40px auto 0px auto; }
#gkLogo.cssLogo { height: 350px; } /*180*/
}
@media (max-height: 600px) {
#gkHeaderMod .gk-short-menu { margin: 108px 0 110px 0; }
#gkLogo.cssLogo { height: 285px; } /*150*/
}
@media (max-height: 500px) {
#gkHeaderMod .gk-short-menu { margin: 66px 0 110px 0; }
#gkLogo.cssLogo { height: 240px; } /*120*/
#gkLogo.cssLogo { margin: 30px auto 0 auto; }
}
-
- Junior Boarder
10 posts
• Page 1 of 1