Comments on: Full-width headers in Thesis 1.5 http://www.kristarella.com/2009/04/full-width-headers-in-thesis-15/ Blog of design-loving, photo-taking, Mac-using, Christian molecular biologist and qualified geek. Fri, 12 Mar 2010 15:44:24 +0000 http://wordpress.org/?v=2.9.2 hourly 1 By: kristarella http://www.kristarella.com/2009/04/full-width-headers-in-thesis-15/#comment-66466 kristarella Tue, 09 Mar 2010 00:50:13 +0000 http://www.kristarella.com/?p=3491#comment-66466 <a class="comment_link" href="http://www.kristarella.com/2009/04/full-width-headers-in-thesis-15/#comment-66464" rel="nofollow">Simon</a> --- Which version of IE? I believe IE7 and 8 should do transparency (unless there's something a bit wrong with the javascript rendering of the IE7 install). Your two best options (in my opinion) are using javascript to render the image in IE6 or using a GIF with transparent background. I've had the most luck with the <a href="http://www.dillerdesign.com/experiment/DD_belatedPNG/" rel="nofollow">DD_belatedPNG</a> javascript, and I also have a tutorial for making a <a href="http://www.kristarella.com/2007/09/transparency-and-gifs/" rel="nofollow">GIF of your logo</a> without the dirty edges (since GIFs don't have alpha transparency, the pixels are either fully opaque or fully transparent). If you follow that GIF tutorial you would place your logo over the repeated background and then use the fuzzy select. Simon — Which version of IE? I believe IE7 and 8 should do transparency (unless there’s something a bit wrong with the javascript rendering of the IE7 install).

Your two best options (in my opinion) are using javascript to render the image in IE6 or using a GIF with transparent background. I’ve had the most luck with the DD_belatedPNG javascript, and I also have a tutorial for making a GIF of your logo without the dirty edges (since GIFs don’t have alpha transparency, the pixels are either fully opaque or fully transparent). If you follow that GIF tutorial you would place your logo over the repeated background and then use the fuzzy select.

]]> By: Simon Townley http://www.kristarella.com/2009/04/full-width-headers-in-thesis-15/#comment-66464 Simon Townley Mon, 08 Mar 2010 23:05:27 +0000 http://www.kristarella.com/?p=3491#comment-66464 Darn it - I had it all sorted and done - using a transparency created in photoshop to put my logo over the repeater. It worked in all my browsers on my mac. Then I heard that IE doesn't support transparency. I checked and sure enough, it doesn't work in IE. I get a nasty blank patch where there should be lovely colour. Darn it – I had it all sorted and done – using a transparency created in photoshop to put my logo over the repeater. It worked in all my browsers on my mac.
Then I heard that IE doesn’t support transparency. I checked and sure enough, it doesn’t work in IE. I get a nasty blank patch where there should be lovely colour.

]]> By: Simon Townley http://www.kristarella.com/2009/04/full-width-headers-in-thesis-15/#comment-66423 Simon Townley Sun, 07 Mar 2010 18:41:04 +0000 http://www.kristarella.com/?p=3491#comment-66423 Thanks Kristarella: watched your excellent video on how to use firebug, and now I think I'm getting there. Good idea, that video :) Thanks Kristarella: watched your excellent video on how to use firebug, and now I think I’m getting there. Good idea, that video :)

]]> By: Simon Townley http://www.kristarella.com/2009/04/full-width-headers-in-thesis-15/#comment-66422 Simon Townley Sun, 07 Mar 2010 16:12:27 +0000 http://www.kristarella.com/?p=3491#comment-66422 Thanks, great video, very useful. It seems to play overly fast but that might be a browser or flash glitch. Maybe you just speak very, very quickly! Your suggestion works for me. My (.custom #header) area sits lower than my (.custom #header_area .page) area. Something is pushing it down but I can't work out what it is. Where should I start to look? Thanks, great video, very useful. It seems to play overly fast but that might be a browser or flash glitch. Maybe you just speak very, very quickly!

Your suggestion works for me.

My (.custom #header) area sits lower than my (.custom #header_area .page) area. Something is pushing it down but I can’t work out what it is. Where should I start to look?

]]> By: kristarella http://www.kristarella.com/2009/04/full-width-headers-in-thesis-15/#comment-66410 kristarella Sun, 07 Mar 2010 01:39:44 +0000 http://www.kristarella.com/?p=3491#comment-66410 <a class="comment_link" href="http://www.kristarella.com/2009/04/full-width-headers-in-thesis-15/#comment-66399" rel="nofollow">Simon</a> --- To get a header in the full-width framework that is still surrounded with the site background, but without white space on the edges, add the repeating background to <code>.custom #header_area .page</code> and then the header bit that goes on top add to <code>.custom #header</code>. See my <a href="http://www.kristarella.com/2009/05/thesis-full-width-framework/" rel="nofollow">full-width framework video</a> for more info. Simon — To get a header in the full-width framework that is still surrounded with the site background, but without white space on the edges, add the repeating background to .custom #header_area .page and then the header bit that goes on top add to .custom #header. See my full-width framework video for more info.

]]> By: Simon Townley http://www.kristarella.com/2009/04/full-width-headers-in-thesis-15/#comment-66399 Simon Townley Sat, 06 Mar 2010 17:46:35 +0000 http://www.kristarella.com/?p=3491#comment-66399 Kristarella, I hesitate to ask for your help because you give so much of your time already. But if I don't ask you, I don't know where to turn. When I set up my blog several years ago, I did so using the Copyblogger theme, and used your post, on personalising the theme, to get my header set up. It uses a fancy background, and the text stays centred no matter how wide the browser goes, and uses a repeater to full in the full width. I hope I'm making sense. I've now bought Thesis, and I'm about to implement it on my blog. I'd like to use a similar header image. I'll remake it. But I want to use the same background which has a stripe of dark blue and one of lime green. I'm open as to whether it is full width, or simply fills the whole of the header area in a page framework, perhaps with a dark background container around a white content area. I'm really not sure how to do any of this, however. I know I'm not even explaining this very well. Do you know if there is a way to make a header image in photoshop and insert it into the thesis header area so it will fill it, with no white borders? Or, if I go the full width route, is there a way to use a repeater to fill up all the white space? The repeater I use at present is just the dark blue with lime green pattern. Of course, I can't even remember how I achieved the header solution in the copyblogger theme. I don't really want to replicate exactly what I have at present. I actually want to have a dark background container, as a border around the site, and then a header logo that fills all the header area. It seems surprisingly hard to achieve that, from what I've attempted so far, which is why I've been looking at the full width header route. Can you point me in the right direction. Any help or advice you can give is much appreciated. Kristarella, I hesitate to ask for your help because you give so much of your time already. But if I don’t ask you, I don’t know where to turn. When I set up my blog several years ago, I did so using the Copyblogger theme, and used your post, on personalising the theme, to get my header set up. It uses a fancy background, and the text stays centred no matter how wide the browser goes, and uses a repeater to full in the full width. I hope I’m making sense.
I’ve now bought Thesis, and I’m about to implement it on my blog. I’d like to use a similar header image. I’ll remake it. But I want to use the same background which has a stripe of dark blue and one of lime green. I’m open as to whether it is full width, or simply fills the whole of the header area in a page framework, perhaps with a dark background container around a white content area.
I’m really not sure how to do any of this, however. I know I’m not even explaining this very well.
Do you know if there is a way to make a header image in photoshop and insert it into the thesis header area so it will fill it, with no white borders?
Or, if I go the full width route, is there a way to use a repeater to fill up all the white space? The repeater I use at present is just the dark blue with lime green pattern. Of course, I can’t even remember how I achieved the header solution in the copyblogger theme.
I don’t really want to replicate exactly what I have at present. I actually want to have a dark background container, as a border around the site, and then a header logo that fills all the header area. It seems surprisingly hard to achieve that, from what I’ve attempted so far, which is why I’ve been looking at the full width header route.
Can you point me in the right direction. Any help or advice you can give is much appreciated.

]]> By: Clay http://www.kristarella.com/2009/04/full-width-headers-in-thesis-15/#comment-66098 Clay Wed, 24 Feb 2010 21:44:33 +0000 http://www.kristarella.com/?p=3491#comment-66098 Kristarella, I'm just now getting back to your comment on Jan 27th. Anyway, thanks. Changing the #nav_area .page to transparent worked. Clay Kristarella,

I’m just now getting back to your comment on Jan 27th. Anyway, thanks. Changing the #nav_area .page to transparent worked.

Clay

]]> By: Chris http://www.kristarella.com/2009/04/full-width-headers-in-thesis-15/#comment-65060 Chris Tue, 16 Feb 2010 00:48:50 +0000 http://www.kristarella.com/?p=3491#comment-65060 I'll have to ask Alex how to fix that. Thanks again! I’ll have to ask Alex how to fix that.

Thanks again!

]]> By: kristarella http://www.kristarella.com/2009/04/full-width-headers-in-thesis-15/#comment-65057 kristarella Tue, 16 Feb 2010 00:29:57 +0000 http://www.kristarella.com/?p=3491#comment-65057 <a class="comment_link" href="http://www.kristarella.com/2009/04/full-width-headers-in-thesis-15/#comment-65056" rel="nofollow">Chris</a> --- The breadcrumbs are positioned absolutely with CSS 283px from the top of the page. There isn't a very straight forward way of repositioning them only on pages with videos. I think it would be better to hook them into the top of the content box, rather than after it. I guess that has to do with the Blogussion skin, if that's what you're using, or the breadcrumbs plugin. Chris — The breadcrumbs are positioned absolutely with CSS 283px from the top of the page. There isn’t a very straight forward way of repositioning them only on pages with videos. I think it would be better to hook them into the top of the content box, rather than after it. I guess that has to do with the Blogussion skin, if that’s what you’re using, or the breadcrumbs plugin.

]]> By: Chris http://www.kristarella.com/2009/04/full-width-headers-in-thesis-15/#comment-65056 Chris Tue, 16 Feb 2010 00:19:06 +0000 http://www.kristarella.com/?p=3491#comment-65056 SICK! I got it to work! The only thing I need to fix now is the text that is showing up over the top of it, and maybe increase the padding so there's more of the 'gray'. Zero padding will work too. I'm making the donation now. If you have any tips on the above, I'd appreciate it! SICK!

I got it to work!

The only thing I need to fix now is the text that is showing up over the top of it, and maybe increase the padding so there’s more of the ‘gray’. Zero padding will work too.

I’m making the donation now.

If you have any tips on the above, I’d appreciate it!

]]>