Thesis full-width headers 101

I recently ported my blog to Thesis by DIYthemes.

Thesis has excellent SEO, and with it you can choose the number of sidebars that you want and their position, you can adjust the widths of content and sidebars, and you can change fonts across the webpage… all from dropdown options in the admin area. There are a bunch of other options allowing you to change the nav menu, size of gravatars, comment count, author link, category, date and tag display, and more. If you’re not a coder you can receive assistance with custom CSS and PHP hooks on the forum.

For those reasons and a few others I am now using Thesis. The new full page framework makes it fairly easy to have full-width headers and footers. In this post is a how-to on customising your header.

Full page framework

The first step of making a full-width header and footer is to choose the Full-width framework from the Design Options page.
NB if you have done the coloured background thing with the page framework, selecting full-width will mess it up. You’ll need to rearrange your CSS a bit. The following assumes you haven’t modified much of your design yet.

Prepare header and navigation

The easiest way to swap the positions of the header and navigation is as described in the Thesis documentation, by adding code to custom_functions.php.

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'thesis_nav_menu');

Doing that makes the header area structure,

• div#header_area
  • div.page
    • div#header
    • ul#tabs

Which basically means that div#header_area spans the full width of the page and everything else is inside that.

On the Tip’d blog Chris has created new divs, which make it easier to give the header and nav different backgrounds. If you do that with custom_functions.php I don’t think it’s possible to remove the #header_area. However, for this demonstration I’m going to do it anyway and just hide #header_area with CSS.

Place the following at the very bottom of custom_functions.php.

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
remove_action('thesis_hook_header', 'thesis_default_header');

function full_width_header() { ?>
	<div id="nav_area" class="full_width">
		<div class="page">
			<?php thesis_nav_menu(); ?>
		</div>
	</div>
	<div id="title_area" class="full_width">
		<div class="page">
			<div id="header">
				<?php thesis_default_header(); ?>
			</div>
		</div>
	</div>
<?php }
add_action('thesis_hook_before_html', 'full_width_header');

This adds the nav above the title, or you can take the whole nav_area and move it below the title and before <?php }, to have the nav below the header.

Styling the header with CSS

All your CSS should go in custom.css.

Remove unwanted styles

There are a bunch of borders and related styles that we don’t necessarily want in our new header, so I’m going to remove them. I’ve done it in a specific way that should allow you to add some back in if you want to.

.custom #header_area{display:none;}

.custom #nav_area ul {border-bottom:none; border-left:none;}
	.custom #nav_area ul li {border-width:0; margin-bottom:0; padding-bottom:0; background:none;}

.custom #header {border-bottom:none;}

These styles hide the original header (unfortunately the empty div is still in the markup); remove borders, padding and margin from the nav that were mainly related to current page styles; remove the header double border.

Add some new styles

Now we’re set to add some backgrounds and some more space for the nav, which feels a bit squished up the top, as well as some borders, which just make things feel much more complete. Building on the previous CSS:

.custom #header_area{display:none;}

.custom #nav_area {background:#c3d9d6; padding:0.5em 0; border-bottom:1px solid #ddf;}
	.custom #nav_area ul {border-bottom:none; border-left:none;}
		.custom #nav_area ul li {border-width:0; margin-bottom:0; padding-bottom:0; background:none;}

.custom #title_area {background:#de6a61; padding:1em 0; border-bottom:1px solid #c55;}
	.custom #header {border-bottom:none;}

I like to use background images to spruce things up, then hide the title and description. In thesis you can opt not to show them, but I like to leave them in and hide them in case someone loads the page without CSS and because Google bots don’t care about CSS.

.custom #title_area {background:#de6a61; padding:1em 0 0.5em; border-bottom:1px solid #c55;}
	.custom #header {border-bottom:none; height:150px; padding-top:0; padding-bottom:0; background:url(images/header.png) center left no-repeat;}
		.custom #header #logo {display:none;}
		.custom #header #tagline {display:none;}

Coffee cup is from OpenClipart.org.

The other option is to replace the default title and description in custom_functions.php.

<div id="title_area" class="full_width">
	<div class="page">
		<div id="header">
			<p id="logo"><img src="<?php bloginfo('template_directory') ?>/custom/images/header.png" alt="<?php bloginfo('name') ?>" /></p>
		</div>
	</div>
</div>

The process to customise your footer is similar, but even easier since there is only the one footer element, as opposed to both the title and nav bar. I’ll follow up with a post about footers in due course.

Questions?

If you have any questions, ask away! There is a forum thread so other thesis users can discuss it too.