I was thrilled to be invited to speak at the East Bay WordPress Meetup at Tech Liminal in Oakland, CA on March 28, 2010. Anca Mosoiu and Sallie Goetsch (rhymes with 'sketch') organized a flawless meeting that included Meetup members showing off their favorite themes.
Here's a slidecast of the meeting - enjoy!
Use CSS for Robust Headers in Thesis
NOTE: The CSS for this tutorial has been updated in the April 7, 2010 post Update – Use CSS for Robust Headers in Thesis.
While I was crafting my header for this site, I noticed my fixed width header looked perfect in Safari, but truncated in IE 8 and Firefox.
“Alright” I mused, “Let’s see what happens if I repeat the image on the x-axis”. Luckily my background image could be easily repeated with a few minor tweaks and rendered correctly in IE 8 and Firefox.
I love simple designs, but thought the header was looking stark, so I hit the Thesis support forums for inspiration. I found some great examples and added a second image to my header leaving the site title in place. The result is displayed in header of this page. :)
An additional benefit of repeating the image on the x-axis was that no changes were necessary when I change my layout from two to three columns.
Here are the screenshots of the browser “issues” and the CSS code I used to create a robust header with two images. Please comment if you have any questions, I look forward to hearing how this works for other people.
Update: December 6, 2009
BEFORE you implement the CSS code below be sure you have the “Show site name in header” and “Show site tagline in header” options checked under Thesis Options > Display Options > Header.
CSS
/* custom header with rounded corners*/<br />
.custom #header{<br />
background-color: #cccccc;<br />
height: 150px;<br />
padding: 40px 0px 0px 0px;<br />
/*IE hack to fill in gap in box*/<br />
border-bottom: 1px #cccccc solid;<br />
/*rounded corners for Firefox and Safari Browsers*/<br />
-moz-border-radius-topright: 20px;<br />
-moz-border-radius-topleft: 20px;<br />
-webkit-border-top-right-radius: 20px;<br />
-webkit-border-top-left-radius: 20px;<br />
}<br />
/* header logo*/<br />
.custom #logo {<br />
display: block;<br />
padding: 0px 50px 0px 0px;<br />
text-indent:150px;<br />
position:absolute;<br />
height: 100px;<br />
background: url('images/logo2_web_wp.png')<br />
center left no-repeat;<br />
}
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p>/*header repeating image*/</p>
.custom #header #tagline {<br />
display: block;<br />
height: 100px;<br />
background: url('images/logo_web_wp.png')<br />
repeat-x;<br />
outline: none;<br />
background-color: #cccccc;<br />
}
Screenshots
Fixed Width Header Image in Safari.
Safari Fixed Width Background Image
Fixed Width Header Image Truncated in FireFox and IE 8:
Fixed width image Firefox
Fixed Width Logo IE
Repeating Header Image in FireFox and IE 8:
FireFox Repeating Banner Image
IE 8 Repeating Banner Image
Ann Zerega Design – New Portfolio & Blog
I’d like to thank Adrienne Tange for her guidance on WordPress, the Thesis Theme and blogging. I’d also like to thank my husband Garth Cummings for all of his support in my new design venture – you’re the best honey!