#header / #sidebar-header

This area of the site code is a bit tricky. Sure you have the standard CSS that goes with it. First there’s no default height or width in the header and the generic height is dependant on the page title – tagline.

#header {}
	#header h1 a {}
	#header .description {}

If the Plugin Wonderful plugin is active and you set one of your ads as ‘header’ then it will open up another CSS element.

	#header .headerpwad {}

Also if you decide to put anything into the Header sidebar area it will open up another css element inside of #header. Which doesn’t have any default styling.

#sidebar-header {}

[member]
Companion / Child Theme Tips
There are several ways of adding an image to the background of the header, the simplest way is with CSS. This will place a background image behind the h1 a, and .description text that appears.

#header {
	background: url('http://path/to/image.ext') top center no-repeat;
	width: 980px;	/* width of your #page or #page-wide - stay consistant*/
	height: 80px;	/* height of your background image */
}

Just because this is the easiest, it doesn’t mean it’s the best. Most users want to create their own click able back to home header without the default h1 a, .description text on top of it. This bit of code will do that. What this CSS says is set the background into the #header space. Remove the padding from H1, set the H1 A to a block encompassing the height and width of the header and overlay it on top of #header and throw the text for it off the screen and just don’t display the .description at all. Because the h1 a is still active and the text is just thrown off the screen and it’s set to the height and width of the background if you click anywhere in it, it will return you to the home page.

#header {
	width: 980px;
	height: 80px;
	background: url('http://path/to/image.ext') top center no-repeat;
}

	#header h1 {
		padding: 0;  /* Remove the padding from the h1 */
	}

	#header h1 a {
			display: block;
			width: 980px;
			height: 120px;
			text-indent: -9999px;
	}

	#header .description { display: none; }

[/member]