I want to use a larger header than the space allowed in the theme I am using allows. I would like to remove the top line of date and post comments in the header space and use that space to expand my header to the top of the page.
How can I get this done?
Thank you for taking the time.
edit header.php (?) and remove the full (from <div id="topnav"> to </div><!-- end #topnav --> both inclusive)
edit style.css;
find:
#header {
width: 960px;
height: 110px;
margin: 0 auto 0;
padding: 0;
}increase the height to the height of your new header image.
still in style.css, find:
.header-image #header #title-area {
background: url(images/logo.jpg) left top no-repeat;
}that is the style for your header background image.
either enter a new header image name;
or, if you keep the same image name, simply edit/exchange the logo.jpg in the images folder of the theme.
don't forget to make backup copies of the theme files before editing(untested)
I don't have a header.php???
you can do it with css as well;
simply add the usual 'display: none;' to the style of #topnav:
#topnav {
width: 960px;
height: 35px;
color: #FFFFFF;
margin: 0 auto 0;
padding: 0;
text-transform: uppercase;
}the rest is as before.
(i always feel it is a waste of bandwith and server resources, to create some stuff first, only not to show it in the browser.
i am not too familiar with the genesis framework to help otherwise.)
can you get support from the theme seller?
I am not sure what your meaning is here? Can you expand on this?
(i always feel it is a waste of bandwith and server resources, to create some stuff first, only not to show it in the browser.
i am not too familiar with the genesis framework to help otherwise.)
i did not mean to confuse you - i am just rambling (http://www.thefreedictionary.com/ramble - definition nr. 4):
it means, that i would rather delete the html/php in the template files (if i would know where to look) than removing the output from the browser, using css 'display:none;'
if one leaves the html/php code to create the output first, it needs to get transported over the web to the browser of the viewer, only to get told (by the css) that it should not be shown on the screen.
------
this has nothing to do with the feasibility of the suggstion - it should work.
NOt quite there yet.
I added the 'display:none;'
#topnav {
display: none;
width: 960px;
height: 35px;
color: #FFFFFF;
margin: 0 auto 0;
padding: 0;
text-transform: uppercase;
}
Adjusted the size of the logo.jpg to the size of my image:
#header {
width: 960px;
height: 202px;
margin: 0 auto 0;
padding: 0;
}
I created a subdomain to test this out:
http://education.arizonahomegroup.net
Thanks so much for the help.
Since you using Genesis frame work as parent and then have you theme as child you should have theme options where you can configure your theme.
i got the background image location wrong:
move it from where it is now:
.header-image #header #title-area {
background: red url(images/logo.jpg) left top no-repeat;
}to the #header style:
#header {
width: 960px;
height: 202px;
margin: 0 auto 0;
padding: 0;
background: red url(images/logo.jpg) left top no-repeat;
}see if @govpatel's suggestion can be useful for your modifications.
Genesis does not allow me to re-congifure the header. Some child themes have a header.php which makes it a little easier, The education child theme does not and I have to do it in style.css which is not my strong point.
Do you have any suggestions about the style code I added in my last post? I have already been down the road with the Genesis theme options.
Uh oh...problems. the image is inserted, but I lost all the formatting for the page????
http://education.arizonahomegroup.net/
/***** Header ********************/
#header {
width: 960px;
height: 140px;
margin: 0 auto 0;
padding: 0;
background: url(images/logo.jpg) left top no-repeat;
Uh oh, this is not working. The header image is inserted, but I lost the formatting on the page.
minor mistake - where you removed the background image, you removed a closing bracket } of the style as well:
/***** Image Header - Partial Width ********************/
.header-image #header #title-area {
.header-image #title-......should be:
/***** Image Header - Partial Width ********************/
.header-image #header #title-area {
}
.header-image #title-......That did it!!! Thanks so much.
This topic has been closed to new replies.
