I previously published a tutorial on full-width headers in the Thesis theme.
It wasn’t the easiest thing to do in Thesis, prior to version 1.5, to make a full-width navigation area beneath a full-width header. Now thanks to a new hook, thesis_hook_before_content_area, it has become significantly easier and way better!
The code in the previous tutorial had us make a new title area in order to place the nav area wherever we wanted. However, that created some invalid code, by duplicating div id="header"1. We don’t need to do that anymore!
Step 1 — Full-width framework
In the Thesis Design Options you need to set your framework to full-width.
This produces HTML that look like:
<div id="header_area" class="full_width"> <div class="page"> <ul id="tabs"> ... </ul> <div id="header"> <p id="logo"><a href="http://snoopy.local/mu">Snoopy Test Sites</a></p> <h1 id="tagline">Just another Snoopy.local weblog</h1> </div> </div> </div>
With that in place you can create a full-width header background with CSS.
This goes in custom.css
.custom #header_area {background:#213C63;}
.custom #header_area .page {background:transparent;}
.custom #header {border-bottom:0;}
Update 25th February 2010: Added CSS for .custom #header_area .page to work with the new CSS in Thesis 1.6 related to the colour Design Options.
Step 2 — Full-width nav area
The code you need for a full-width nav area goes something like…
This goes in custom_functions.php
function full_width_nav() { ?>
<div id="nav_area" class="full_width">
<div class="page">
<?php thesis_nav_menu(); ?>
</div>
</div>
<?php }
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_before_content_area', 'full_width_nav');
The line remove_action('thesis_hook_before_header', 'thesis_nav_menu'); removes the nav menu from its default position, allowing us to reinsert it wherever we want.
add_action('thesis_hook_before_content_area', 'full_width_nav'); adds the new navigation area after the full-width header area. If you’d like it to go before the header, use add_action('thesis_hook_before_html', 'full_width_nav'); instead.
The rest of the code gives us a nice bit of HTML, similar format to the other full-width areas of Thesis, which we can style with CSS.
.custom #nav_area {background:#F0ECDB;}
And here’s just a bit more CSS to make it look prettier…
.custom #nav_area {background:#F0ECDB; border-bottom:1px solid #DBD4B7; padding-top:10px;}
.custom ul#tabs {border-bottom:0; border-color:#DBD4B7;}
.custom ul#tabs li {border-color:#DBD4B7; background-color:#E6DEC0;}
.custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {background:#fff;}
Check out my previous tutorial, or CSS custom headers for info about adding images to your header. Also see Thesis nav menus for more info about the navigation code.
- you’re not supposed to have two elements with the same ID on a web page [↩]
{ 15 trackbacks }
{ 128 comments… read them below or add one }
Great post. I think just about every design we’ve done has been with the full-width framework, and now it’s even easier to use!
The final look you’ve shown looks sweet too.
Thanks for the update! Much easier indeed. I love the full width framework too!
Hi Kristarella,
Nice tutorial. I’m just about to install the Thesis v 1.4.2. (I do not want to go for the 1.5 beta yet since it looks like there still are some bugs) I was about to follow your previous tutorial on how to make a full-width header with v 1.4.2. Right now I’m just concerned about what will happen the day I’m upgrading to 1.5? Will I then loose the full-widh header customization? Or will I have to do it all over again?
Stian, you won’t lose any changes that you make in 1.4.2, but I’d really recommend waiting on making a full-width header until 1.5 because the old method is longer, trickier and less semantic.
I decided to go with the 1.5 beta version instead, and I agree, it was way easier to make a ‘full-widht header’ in 1.5 :)
Am I allowed to ask you one more question?
I’m trying to add an additional menu in the header:
/* Additional menu in the Header */
function additional_menu() {
?>
Home
About
Archives
Contact
<?php
}
add_action(‘thesis_hook_header’, ‘additional_menu’);
This function gets the job done, but not exactly like I want it to. I would like the menu to be placed in the header, but a little bit further up (on the same line as the title). This is where my html and CSS knowledge stops:)
Do you have any suggestions on how to go forward to achieve this? Maybe this can be achieved with some CSS styling?
Stian — you might want to try
thesis_hook_before_titleand then float the menu to the right with.custom ul#additional_menu {float:right; width:500px; line-height:4em;}. You might have to play with the numbers to your liking.Thanks Kristarella, this turned out just like I wanted it to :)
Kristarella,
Nice, I went to the beta a while back however, when I view the various themes in wordpress admin preview section it still says 1.4.2? Is that right or did my upgrade attempt fail? :) Thanks,
-Mig
Miguel, it should say version 1.5 is active on the themes page.
Hey,
Yeah, it does now. :) Since the upgrade, I’m having Nav bar issues. Posted about it in the forum. Cheers!
-Mig
Took FOREVER to get my image into the header but can’t figure out now, how to deal with the headline and tagline issues I have. Can you help Kristarella? Have a look at my site and here is the code below.
What am I doing wrong? Thank you in advance!
Richard
*/
body.custom { background: #44443f; }
.custom #container { margin-top: 2em; margin-bottom: 2em; padding: 0.3em;
background: #33332f; border: 0.4em solid #3e3e3a; }
.custom #page { background: #fff; }
.custom #header #logo a { display: block; height: 152px; width: 168px; background: url(‘images/Picture2.png’) no-repeat; outline: none;
.custom #header #tagline { text-indent: 299px;}
.custom #header {text-indent: 299px;}
.custom a, .custom a:visited { color: #473C8B; }
.custom a:hover { color: #473C8B; }
Richard, you’re missing some crucial curly braces and
text-indentprobably won’t move the text the way you want it to,padding-leftis better.Your CSS should be more like:
body.custom { background: #44443f; } .custom #container { margin-top: 2em; margin-bottom: 2em; padding: 0.3em; background: #33332f; border: 0.4em solid #3e3e3a; } .custom #page { background: #fff; } .custom #header #logo a { display: block; height: 152px; width: 168px; background: url('images/Picture2.png') no-repeat; outline: none; padding-left: 299px; } .custom #header #tagline { padding-left: 299px; } .custom a, .custom a:visited { color: #473C8B; } .custom a:hover { color: #473C8B; }Kristarella,
Thanks SO much! You are too kind. I have to tweak my headline a bit still to get it on one line. ;) Care to weigh in? Bless your heart girl.
Richard
Richard, looks like you’ve got the title on one line now?
I do yes! But I’m trying to move that tagline up and or the headline down. Ideally, I’d like to have them meet somewhere in the middle. I appreciate very much the hand holding Kristarella. When I use firebug, it looks like the tagline element is way long – so wide it covers the entire width of the page which isn’t necessary. Number one, I don’t know how to move the tagline up or the headline down, and I’m concerned that the tagline element when it does get moved is going to interfere with my photo. Any help that you are willing to offer is deeply appreciated. I thank you in advance.
Richard, I’m not sure if it works in IE, but you can try
.custom #header #tagline {margin-top:-7em; margin-bottom:6em;}The reason it spans the whole width is because it is a paragraph and paragraphs are block level elements whose natural behaviour is to span the whole width of the container they are in. This is normal and quite correct, but can be fairly easily manipulated with CSS.
hmmm. Thank you. Tried it but the tagline just ended up all the way on the left under my pic. I’ll keep trying. Can’t thank you enough for helping me.
best,
Richard
I was actually just googling around looking for a WordPress theme with a full width header that I can tweek and mod and what do you know, here’s your Thesis article.
I can’t help but think I need to look at Thesis..grrr..
Now that I’m not going to be designing I’ve converted my blog back to a 2-column, simple as you like, blog and I’m trying to keep everything as simple as possible so I can just post my travel blogs and little bits of info. Maybe Thesis might be the way to go…
It worked! Thanks Kristarella. You come to Portland, I buy you lunch at http://laurokitchen.com!
Glad it worked Richard!
Mat, I find that Thesis is good for pretty much any project: simple or complex, static or dynamic. Some do find it takes some getting used to though, it does have a slightly different (but in the end safer and more efficient) way of doing things.
Kristarella,
Thank you for creating this tutorial.
I have done the following:
1. Edited “custom.css” and added the following:
.custom #header_area {background:#213C63;}
.custom #header {border-bottom:0;}
.custom #nav_area {background:#F0ECDB; border-bottom:1px solid #DBD4B7; padding-top:10px;}
.custom ul#tabs {border-bottom:0; border-color:#DBD4B7;}
.custom ul#tabs li {border-color:#DBD4B7; background-color:#E6DEC0;}
.custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {background:#fff;}
2. Using Thesis Open Hook, I added following to the section called, ” Before Content ” and checked the box called, “Execute PHP on this hook”:
function full_width_nav() { ?>
<?php }
remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
add_action(‘thesis_hook_before_content_area’, ‘full_width_nav’);
After saving everything and refreshing my site, I see the following error message:
Parse error: syntax error, unexpected ‘}’ in /home6/liberub1/public_html/wp-content/plugins/thesis-openhook/functions.php(293) : eval()’d code on line 7
You can see this on my site.
Thank you,
Matt
Matt — When you’re using OpenHook you don’t need to wrap the code in a function and use add_action or remove_action, that method is only for custom_functions.php and OpenHook does those bits automatically for you. Also I don’t think OpenHook has been updated to include thesis_hook_before_content_area: the Before Content box won’t give you a full-width header, so at this stage you need to use custom_functions.php until 1.5 final is released and OpenHook is updated.
Thank you Kristarella! Hope you have a great day.
Hi Kristarella,
I asked a dumb question before and you were kind enough to answer me, so here goes again! I’m trying to insert a graphic as a custom header using Open Hook. I am terrified of erasing everything ( like I already did) so now I’m confirming before trying :) I don’t know anything about code yet, so I copied something from the web and changed the image name
<a href="index.html"><img src="monk1.jpeg" width="960" height="300"
alt="panamom.com" border="0"></a>
But the image is not showing up, though the dimensions for the space are. Is this because the image is too large or because its not coded right? I put the image in the thesis- custom-image folder? I saved the image as a jpeg and a gif and neither one will show up.
If anyone at all would be so kind as to help with this, the blog is panamom.com
thank you!!
Pam
Pam, If you’re using OpenHook you need to use a different file path. When you just quote “monk1.jpeg” it assumes that the image is in the same folder on the server that you are current on. So when you’re on the home page at
http://www.example.comthe image must be athttp://www.example.com/monk1.jpegwhen you’re on the about page though, the image won’t show because it will think it’s athttp://www.example.com/about/monk1.jpeg. If you put a slash before it, it will think that the image is always in the home directory. If your image is in the custom/images folder use<img src="<?php echo THESIS_CUSTOM_FOLDER; ?>/images/monk1.jpeg".Same goes for the link, you’ll probably need a slash before it so that it always goes home and not just to the page you’re on.
hmm. That’s not working. When I cut and pasted your code it only shrank the size of the header ( I had 960 x 300 specified ) but still didn’t display the image. Is there another location I should be putting the image in? Is there a size limit for the image or will Thesis resize it regardless?
I did not check the “execute php” since i was using HTML, is it going to crash the site if I do that? :)
ps
love your header btw.
Pam, you should only have replaced the src=”" part of you code with what I gave you. I forgot to mention that you need to check the box that says “execute PHP” in OpenHook. However, I went to your site and tried every permutation of the image URL assuming the image was in your custom/images folder and I couldn’t find the image. You need to confirm where your image is on the server and you need to use its exact name. I.e., it matters whether the extension is .jpeg, .jpg, .JPG or .JPEG.
On IE my footer area gets cut off prematurely. Do I need to fix the height for that div?
Elliot, bit of an unrelated question on a post about headers…
Anyway, I think you need
.custom #footer {float:left; width:100%;} .custom #footer p {clear:left;}The reason is that divs don’t wrap around floated elements properly and because the widgets are floated to the left the background colour of the #footer isn’t going right around them in IE. However, floated divs do wrap around other floated divs.
Sorry I had multiple tabs open while looking through your site – I meant to post the comment here (http://www.kristarella.com/200.....ters-101/)! *embarrassed-smile*
Thanks for your reply!
Oh, haha. That’s cool, that’s a pretty good reason and understandable too. :P Glad you’re finding multiple posts of mine useful!
Hi! I’m new to your site. My site is upgraded to thesis 1.5 and I would like a full-width header. The only thing I’m a bit confused about is the size the header image needs to be to work. Thank you SO much!! Nina
Great tutorial! (As usual…)
One note for you that may help others with this though. I made a rookie mistake working on my third or fourth Thesis website — I couldn’t get your custom css to work after I installed 1.5. I banged my head for over an hour, reinstalling things, renaming folders etc. until I finally figured it out: I didn’t have the Custom Stylesheet option enabled in the Thesis Options!
(Perhaps the default for this should be set to “Yes”…?)
Thought I’d mention it because there are probably others out there who also forgot to check this after upgrading.
Now it’s chugging along…
~Graham
Nina — Welcome! The image can be as wide as you like, but the main content of it should probably not be wider than your content. Then the edges of the image need to blend out to a solid colour or a repeating background. Something that can span the width of the browser, no matter how wide it is.
Graham — I thought it was on by default, but that is a good thing to check for anyone having problems. Thanks for the heads-up.
Many Thanks…
Followed your instructions, so far so good… Can you tell me how to change the headline colour please?
Wayne
Got it sorted…
I use –
.custom #header #logo a {color: #ff6600;}
.custom #header #tagline {color: #fff;}
The top one changes the header logo colour and bottom one changes the tagline underneath..
Wayne
Quick question!
My page has the following syntax:
DIV –> ID HEADER_AREA
DIV –> CLASS PAGE
DIV –> ID HEADER
P –> ID LOGO
UL –> ID TABS
So the tabs are under the header logo. My issue is that between this logo and the tabs (nav), there is a small space filled with white.
Using inspector, I was able to find out that it’s because of this CSS in layout.css:
#header #logo
font-size: 3.6em
line-height: 1.167em
So I went in my custom.css and wrote:
.custom #header { font-size: 0em; line-height: 0em; }
.custom #logo { font-size: 0em; line-height: 0em; }
But when I check back in Inspector, the .custom style is beefed up and overwritten by the two lines up there.
How can I overwrite the layout.css?
Karim — it’s because when IDs are listed consecutively with a space in between like
#header #logothat is one style declaration for the element#logoinside#header. So, to override it you need to use one style declaration.custom #header #logo. However, if you don’t need the title (which has the ID “logo”), you can just uncheck the option to display it in the Thesis Options page under Display Options > Header.Thanks for the help.
The option is unchecked already in thesis options! Not sure why I see that anyway.
Actually, something weird. In IE, that little space is not there but in Chrome, it is!
Karim — I’m afraid I can’t give you anything more specific without seeing the problem, but it might help if you give something a height. Browsers have style default and I find sometimes a link can get a bit of extra space beneath it, so if you give a height to the div that surrounds that link it can help.
Actually your code worked! What I was saying was that before the fix, IE did not have this issue while chrome did! Anyway it’s fixed now! Thanks :)
After great success with these instructions on one site, I’ve implemented the full-width options for header and nav again. However, it’s come to my attention that in Firefox 3.0.6 the site is loading very strangely. Here is a link to my css.
It’s almost as if the “full width” isn’t taking effect … Thank you very much for taking a look!
Suzi,
Your site loads exactly the same in Firefox and Chrome on my PC!
Did you clear your cache (wild guess)?
Suzi — it seems right on my computer too, it looks good. I made a little note of anything I saw that was not quite right, but overall the full-width seems to be okay according to your stylesheet.
Thanks Kristarella and Karim – Browsers are picky things … but great to know the issue isn’t replicating … on to tweaking and getting her up! :)
Suzi,
What plugin (or script?) did you use for the flash slideshow under your header? Did you use jsquery?
I used SlideShowPro. I’m a huge fan mostly because of SlideShowPro director (a cms management tool). If you have FLASH it’s completely customizable ….
Hi Kristarella ;)
How can I make a second Full width navbar on top? I’m struggling at this for weeks with no luck. Could you help me?
:*
@estevaosoares
Estêvão — if you’ve got one nav at the top of the page using the full-width function then you can add another almost the same in there:
function full_width_nav() { ?> <div id="nav_area" class="full_width"> <div class="page"> <?php thesis_nav_menu(); ?> </div> </div> <div id="nav_area2" class="full_width"> <div class="page"> <ul id="tabs2"> <li><a href="">First item in 2nd nav</a></li> <li><a href="">Second item in 2nd nav</a></li> </ul> </div> </div> <?php } remove_action('thesis_hook_before_header', 'thesis_nav_menu'); add_action('thesis_hook_before_content_area', 'full_width_nav');You need to write a new unordered list for the second nav because
thesis_nav_menu();should only be used once. Then you will need to copy the styles forul#tabsand add them toul#tabs2.Hi, Kristarella,
I enjoyed your tutorial. However, I’m having a bit of a problem getting the headers for both my blog and my website to display correctly. One floats to the left, the other to the right. The strange thing is, I copied the code from one site to the other, so they should be exactly the same. Could you take a look and let me know what I’m doing wrong?
Many thanks!
Blog
Website
Deborah — I can’t really compare them at the moment because it looks like the header is showing on the blog, but there is no header showing on your site (custom.css seems to be empty). It’s not that the header is floating left or right, but it is the background of the wrong element. It kind of looks like you’ve combined several tutorials, including the old full-width header tutorial and a non-full-width header tutorial.
Hi, Kristarella,
I followed your latest tutorial and succeeded in getting the full width header. The problem I’m dealing with now is getting my logo image to display. It will flash up for a brief moment, and then disappear. Below is the code I used. Where do I place the image code so that it displays?
.custom #header_area {background:#651b1c;}
.custom #header {border-bottom:0; height: 150px; background:url(images/DeborahWoehrHeader.jpg) center left no-repeat;}
.custom #nav_area {background:#000000; border-bottom:1px solid #ffffff; padding-top:10px;}
.custom ul#tabs {border-bottom:0; border-color:#000000;}
.custom ul#tabs li {border-color:#000000; background-color:#000000;}
.custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {background:#000000;}
Thanks again for your help.
Hey Deborah,
As per the tutorial in this post, I think you should delete the stuff with
title_areain your custom header code, that is what is interfering. For the old tutorial we had to createtitle_areaand hideheader_area, but we don’t have to anymore because there are new hooks that we can use to put the nave wherever we want. That is probably why your logo flashes and then disappears, because there’s something funny going on with#header…Now that I’ve navigated to your blog it looks like you’ve managed to figure that out yourself. Good work! Sorry for the delay in my reply.
No, worries. :) I’m not sure what I did, but it worked. Looking forward to reading and learning from your other tutorials.
Hey Kristarella!
I’m having some trouble with the header viewed in Internet Explorer. The header will not display and just shows the alt text and a red x. I know I need a ie hack and have ut on in, but I am having trouble figuring out just what code to enter that will fix it. Any ideas? I know it has something to do with the size of the box that displays it, but I can’t seem to figure out what size that box should be.
As always, thank you so much for your help!
Ari
Ari — Sorry, but the header is showing up in my IE6,7 and 8 so the code must be fine. Maybe you had a temporary connection problem and the image didn’t load.
Is there a way to place different YouTube videos on the different pages of
my Thesis blog?
Eugene — Sure. You can use conditional tags. I have a post about adding different headers to different pages, which shows an example of using conditional tags.
how to remove default header from thesis, which is coming in source code but nothing has been written in custom.css file for the same.
Pooja — I’m not sure. I would need to see the site or the HTML you’re referring to to advise you properly.
Here in source code it’s showing 2 headers, but actually in CSS there is only one header,how to remove default header from thesis, which is coming in source code but nothing has been written in custom.css file for the same.
yeah sure, please check the site : http://www.tips4trade.com for details.
Pooja — custom.css does nothing to add or subtract elements from the source code. You must be adding an extra
<div id="header">...</div>via custom_functions.php (perhaps from following the old header tutorial?). Instead add the contents of your header to thethesis_hook_headerorthesis_hook_before_titlehook. Not adding in a whole new header div.Hi -
Thank you so much for the tutorial. I placed this on a new site that I’m doing and for some reason the CSS isn’t working all the way across or for the nav menu. I’m sure it’s a simple explanation. Using Thesis 1.6 if that matters. Site is travelgawker.com. Thank you!
Brendon — In 1.6 you need to use
.custom #nav_area .page {background:transparent;}(or the colour that you’re using for the whole nav_area instead of transparent). That’s due to the new design colour options assigning background colours that weren’t there in 1.5.Hi-
Is there an adjustment that needs to be used for Thesis 1.6? I’ve been trying to use the outline you provided above, but keep coming up with funky formatting. Site: http://member.hoopgainstraining.com/.
Thank You!
Ceasor — You need
.custom #header_area .page {background-color:transparent;}Thanks Kristella. Last question: Do I keep everything else the same in the tutorial to achieve the styling?
Ceasor — Everything else regarding the header should be fine. The CSS for the navigation menu is quite different; you might be able to just swap
ul#tabswithul.menu, but to make sure you should check out the video about the new nav controls on the DIYthemes site and also my Firebug video to learn how to easily inspect the CSS on your site.I will be updating my Thesis related tutorials for 1.6 compatibility, but I’m not sure when I’ll get around to it.
This is a great post. I have one question though and I am sure for a professional coder it is an easy one. What if you are using a header image for the header instead of just a colored background? How do I get the image to appear full width without the white space?
I am rocking Thesis 1.6 on 10 different sites. You can see an example at Organic Renaissance. I have it set to full-width framework and the page padding at 0.5 (even if I set this to 0.0 it doesn’t give me the header image at full width. The code for the existing header is in custom_functions.php and looks like this (after encoding):
remove_action(‘thesis_hook_header’, ‘thesis_default_header’);add_action(‘thesis_hook_header’, ‘custom_image_header’);function custom_image_header() {?> <p id="logo"><a href="<?php bloginfo(‘url’); ?>"><img src="<?php bloginfo(‘template_directory’); ?>/images/header.jpg" alt="<?php bloginfo(‘name’); ?>" title="<?php bloginfo(‘name’); ?>" width="100%"/></a></p><?php}?>
What am I missing to get it full width?
Any guidance is greatly appreciated.
Vincent — Unless you have a seamless repeating image, a single image will not be full-width of the browser (which is what the tutorial is about). If you have an image that you intend to go in the middle of a background colour that goes full-width, then that’s fine. What you’ve got on Organic Renaissance is pretty much supplementary to anything in this tutorial, it is replacing the title and tagline with an image, while the tutorial doesn’t really touch those things…
If you’re trying to get the header to be the full-width of the content (rather than the browser), you might need
.custom #header_area .page {padding:1.1em 0 0;} .custom #header {padding:0;}I.e., to remove the padding from the sides and bottom of the header so there’s no white bits, and the image would need to be at least 949px wide.
Kristarella:
Thank you for the prompt reply and information.
Yes, you are correct, I am simply trying to get the header to be the full width of the content (rather than the browser).
While I am somewhat familiar with HTML, CSS and some Java Script, I am a novice with PHP and Wordpress’ folder hierarchy, trying to learn more daily. Where does that code go?
I tried placing it in Custom_Functions.php and it had no effect.
Does it go in the custom.css or layout.css file?
The header image is 993X106 so per your specifications, we have a large enough image.
Thank you in advance for your guidance.
Vincent — that code should go in custom.css. I just remembered that removing the padding from the
.pagearea will reduce the width of that section so I think you will need to increase the width a bit:.custom #header_area .page {padding:1.1em 0 0; width:97.1em;} .custom #header {padding:0;}Also, I think you would be interested in my video on the full-width framework.
That did the trick! Thank you for the help!
OK, so riddle me this, Batwoman, I was able to update the headers across all 10 sites to be the full width of the content and they look so much better (thank you very much!)………BUT, what if I want to be supercool like you and use a different sized image than a 993X106 header?
So you don’t think I am lazy, I went through your complete tutorials on full width headers and Firebug (this was excellent because I wasn’t aware of all that Firebug can really do) and then I used some reverse engineering Firebug mojo on your main page to see how you got your header image to the size that it is. If I read the code correctly, it looks like you have a Feature Box. When I go into Thesis to activate a Feature Box I get a message that says that there isn’t really anything I can do with it ……”Right now, the only thing you can do with your shiny new feature box is access a hook, thesis_hook_feature_box. Expect your display options to improve dramatically in a future release!”.
What I am trying to replicate in Thesis is the exact look of the following website (which is easy with HTML and CSS):
http://www.financethedream.com which has a full width header and repeating image and the nav menu underneath. I am currently rebuilding this site with Thesis (presently, you cannot see the build externally due to a .htaccess file serving up HTML before PHP)
So you don’t think I am lazy, I rolled on over to DIYThemes and located the hooks to have the Nav Menu appear under the header but that still doesn’t explain how to get the Feature Box of the appropriate size, location and to include the full width repeating image.
What is the ancient Chinese secret to be able to do this in Thesis?
The reason for trying to replicate is because, due to the type of business it is and the inherent lack of professional web sites, we get mad props based on the elegance of the design and inherent professional look . This translates into quantifiable dollars and helps with reputation management because we don’t appear to be ham and eggers.
Also, is there/are there any books that aren’t outdated that you recommend to get someone up to speed on PHP and hooks?
Again, any guidance is greatly appreciated.
Vincent — The feature box doesn’t really factor into that sort of header. I only use the feature box on the home page, it’s not my real header area. To emulate that site you need a repeatable image to be the background of
#header_areaand then a main header image. I made an image demo to demonstrate what I mean:Vincent — forgot to answer your last question: Dave Wilkinson’s Hooks Tutorial is good and Tizag.com is good for beginner tutorials for CSS, HTML and PHP.
Kristarella:
Wow! Thank you again for the superb guidance. There is only one problem since I don’t fully understand the integration of Wordpress & Thesis and where everything is supposed to go. It reminds me of that scene in Finding Nemo:
Marlin: It’s like he’s trying to speak to me, I know it.
[to Squirt]
Marlin: Look, you’re really cute, but I can’t understand what you’re saying. Say the first thing again.
You are speaking perfect English, but I don’t have your skill level yet. I am a little confused as to where the code goes since the current Thesis headers are fed through Custom_Functions.php
Is that where this code would go or does it go in custom.css or layout.css?
Am I leaving the existing code for the header (the house and stars) in Custom_Functions.php or does it go somewhere else with your schema? And is there different code to serve up the header image?
Thesis and Wordpress are great but sometimes they make me want to bend steel at the ridiculous complexity for things that are so easy in HTML/CSS.
Of course, everything is easy when you understand it. Are you aware of anything that diagrams which file does what, e.g., custom_functions.php serves up the header image but custom.css specifies the width and padding but layout.css specifies changes to the CSS that overrides custom.css (I learned this yesterday thanks to your Firebug tutorial when I couldn’t get one of the headers to display at full width despite changing custom.css, a prior programmer had changed layout.css without telling me and I had to go find the change and correct it so custom.css would display the header correctly)???
I am going to go through the two tutorials you recommended.
Anyway, I am not trying to wear you out. You provide an unbelievable and invaluable resource and your time and thoughts are appreciated.
Hi Kristarella,
Do you know if I can make custom headers for each individual page in thesis? I would like to have a seperate header at the top of every page to make the pages unique. Is this possible? I have beem searching for days to figure it out.
Vincent — It doesn’t really matter whether the header code for the house bit goes in custom_functions.php or custom.css, as long as it works. The current method you’re using with custom_functions.php is fine, if you want to isolate the header changes to CSS you could instead do a image replacement on the default header with CSS like the ones in my CSS custom headers post.
A hint for determining if provided code goes in custom.css or not is if it starts with
.customand uses CSS syntax then it goes in custom.css. If you’re trying to insert HTML onto the page you need custom_functions.php.I don’t know of any diagrams or anything that explains the usage of these files, although these articles in the Thesis user manual might help, Customising Thesis with Custom.css and customising with theme hooks.
Nothing in layout.css should be over-riding custom.css if you have
.customin front of the selector in custom.css, unless there’s something with!importantin layout.css or if it’s a more specific style. (Article on CSS specificity) Also layout.css shouldn’t be edited directly, it’s for the Design Options to be written to.Hope that clarifies things a bit more.
Shannon — I have an article on page specific headers that should help you.
What were you searching for days using? It’s the first result on Google when searching “thesis page header”. If you were searching the forum I understand, it’s pretty hard to search stuff there.
When I do this , The default header is not getting removed . When i check my code using firebug , I can see two headers . The default header is not getting removed.
Manish
Manish — It sounds like you might have combined this tutorial with an old one because this tutorial doesn’t add or remove the header at all, it styles the default header while moving the nav menu.
Ok, what am I doing wrong? I inserted the code from your post #77 into the custom.css file. I am testing it on the blog here: http://www.financethedream.com/blog
I am not getting the repeating image and it appears that I am constrained by a container. The header image appears monstrous though it is the same exact image here: http://www.financethedream.com
Thesis Design Options indicates the maximum column size is 934 which is what I set it at assuming that it would give me the full page and allow the repeating image.
Any idea what the secret sauce is to correct this?
Ok, the repeating image now displays. I had the image in /images instead of /custom/images. I reset the content column to 580 and the sidebar to 195. Everything visually is out of whack. Any idea what needs to be done to match the images so we have the seamless image without the black border padding?
Any guidance is greatly appreciated. We are almost there.
Vincent — I think you’re main problem is padding. You need to remove the padding from the header and then you’ll need a bit of background position tweaking to get the images to line up because they’re not the same height.
If you’re not using Firebug or Webkit Inspector you definitely should be: http://www.kristarella.com/200.....g-for-css/
After trial and error work for the better part of the day, I finally got it lined up. Some of this stuff is finally starting to make a little more sense. Thank you for your help!
I have a little more work to do but it is starting to take shape.
Hi Kristarella,
thank you so much for your posts. I’ve recently installed Thesis 1.6 and am customizing currently. I have encountered difficulties with the full-page framework settings. When I set background colors, the main content seems to be “in front of “and unaffected by the background. It’s like the main conent is in a container and isn’t affected. have a look at http://www.piklawgroup.com. Any ideas? I appreciate it.
Pilawgroup — You will need CSS like in comment 66 and 68.
awesome! Thanks I must have been dozing off looking for the answers through the comments. Mucho appreciado! I’m sure you’ll hear from me again – great work!
Kristarella,
Thanks for the tutorial. Really cool. I got it to work on a site, but I seem to have a “section of white” in my nav bar that I can’t seem to shake. The website is veritaschristianschool.org.
Any ideas why this is happening?
Thanks again.
Clay
Hey Clay,
It looks like your background colour in the #menu or #nav_area is set to #ffffff (hard to tell where it is without looking at the css…). Look for a css attribute (in your custom.css file) in one of your menu/navigation tags that says “background: #ffffff;” If you can’t find it, it could also be a system default.
Either way, you should set the background to your border/button colour, which is #153294. I would try #menu first — just add:
background: #153294;
to .custom #menu in your custom.css file (or replace background: #ffffff; if that is the case).
If that doesn’t work, try it at .custom #nav_menu or other tags that are controlling the menu and navigation bar until you find the right one.
~Graham
Thank you for these tutorials – I feel like I’m learning a lot, as I blunder about!
I’ve got progress with my header and nav bar – but I’m wanting to repeat an image across as the background for the navigation – however its just showing up in one small area (an area that was staying stubbornly blank for a while)
Here’s the link (just a test page, as I’m learning):
http://onlinescratchpad.com/thesis/
and here’s my custom css file – any advice or suggestions would be greatly appreciated.
/*custom header snippet*/
.custom #header_area {background:#f9f7e8;}
.custom #header { background-color: #f9f7e8 ; }
.custom #header {border-bottom:0;}
.custom #header { background: url(http://www.onlinescratchpad.com/thesis/wp-content/themes/thesis_16/custom/images/header_machine.png) right no-repeat; }
.custom #header_area .page {background-color:#f9f7e8;}
.custom #nav_area {border-bottom:1px solid #7f111c;
background:url(http://orphicworkshop.com/images/nav_bg.jpg) repeat; background:#7f111c; padding-top:2px;}
.custom #nav_area .page {background:#7f111c;}
.custom ul.menu {border-bottom:0; border-color:#7f111c;}
.custom ul.menu li {border-color:#7f111c; background-color:#7f111c;}
.custom ul.menu li.current_page_item, .custom ul#tabs li.current-cat {background:#7f111c;}
ul.menu {background:url(http://orphicworkshop.com/images/nav_bg.jpg) repeat;}
Clay — You need
.custom #nav_area .page {background:transparent;}or the blue colour that you’re using both should work.Corie — Looks like the image is repeating fine, but it’s covered up by the backgrounds of the nav tabs:
.custom ul.menu li {border-color:#7f111c; background-color:#7f111c;}
.custom ul.menu li.current_page_item, .custom ul#tabs li.current-cat {background:#7f111c;}
You could change those to
background:transparent;if you want the image to show through.Thanks – I’m sure its getting closer, but its not quite there, I’m afraid. The red is still covering up the graphic. I now have:
/* nav bar color */
#nav_area.full_width {height:40px; background:url(‘http://orphicworkshop.com/images/nav_bg.jpg’) repeat;}
.custom #nav_area {border-bottom:0px solid transparent; padding-top:0px;}
.custom #nav_area .page {background:url(‘http://orphicworkshop.com/images/nav_bg.jpg’) repeat;}
.custom ul.menu {border-bottom:0px; border-color:transparent; background:transparent;}
.custom ul.menu li {border-color:transparent; background:transparent;}
.custom ul.menu li.current_page_item, .custom ul#tabs li.current-cat {background:transparent;}
Thanks again for your time!
Corie — If you’re using Thesis 1.6 you should use the Design Options as much as possible before using CSS, so forget any border CSS and set the borders to 0 in the Design Options for the Nav. Then, it looks like the link needs the transparent background, not the list item. So, the CSS should look like:
/* nav bar color */ .custom #nav_area.full_width {height:40px; background:url('http://orphicworkshop.com/images/nav_bg.jpg') repeat; padding-top:0px;} .custom #nav_area .page {background:url('http://orphicworkshop.com/images/nav_bg.jpg') repeat;} .custom ul.menu {} .custom ul.menu li a {background:transparent;} .custom ul.menu li.current a, .custom ul#tabs li.current-cat a {background:transparent;}Bingo!! Thank you so much!!
Hi I have used your tutorial for a couple sites. So thank you.
I have no issues with the header and content areas lining up in Firefox, only in IE. In IE, the header appears with the content area background showing up on the right side. If I resize the column widths, setting one 10 px smaller, I can get the background color to go away, but then my header appears too wide for the content. The header image is sized to 900 pixels wide.
http://www.oneilcreekwinery.com/wordpress/
Is there an easy solution?
Noah — Sorry, not really sure what you’re describing and I can’t see any problem with it in my IE8, so I don’t know.
Hey there! How would I add a full width video to a post, with this feature? I saw it done the other day when Chris Pearson was interview by some guy. It looked fantastic!
Can you give me an idea on how this would be done with something like Vimeo?
Chris — It looks like on that post Pearson is using the Feature Box to present the video and he’s not using the full-width framework, but has padding set to zero for the page. I’m not sure how he’s doing it, whether there’ll be a new feature box thing in 1.7 or whether he’s using his own custom fields. He’s using the feature box for the images on the front page too, so I guess the simplest way to do a similar thing is to activate the feature box and use the
thesis_hook_feature_boxto add your pictures and videos in. So you could have some default content like a picture in there and then you would specify your videos for each post. E.g.,function custom_feature_box() { if (is_post('ID')) echo 'VIDEO CODE IN HERE'; else echo '<img src="feature_image.jpg" alt="" />'; } add_action('thesis_hook_feature_box','custom_feature_box');You could do it with custom fields too. Not quite as simple, but maybe more future proof coz the video info is stored in the database with the post. You don’t have to have the image as a default in there, but if you don’t you should remove all padding and borders from the feature box so that it’s not obvious when there’s nothing in there.
Hey,
Thanks for the great reply. Here are the steps I took, but they didn’t work.
I enabled the feature box and had it placed full width before content and sidebars.
I then went into the post, added a custom function with thesis_hook_feature_box and then placed the code you provided into the ‘field’ area.
Hit Save, Refresh, and nothing.
Here is the code I punched in:
Please let me know if I’ve tried this correctly.
function custom_feature_box() { if (is_post('ID')) echo '<object width="900" height="506"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=9414247&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ff7300&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=9414247&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ff7300&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="900" height="506"></embed></object>'; else echo '<img src="feature_image.jpg" alt="" />';}add_action('thesis_hook_feature_box','custom_feature_box');Chris — You need to change
IDto the ID of the post andfeature_image.jpgto the URL of an actual image. I don’t know what would be going wrong if that code is in custom_functions.php it should work, in some way at least.You could try the following to see if the function is working at all.
function custom_feature_box() { echo 'Foobar'; } add_action('thesis_hook_feature_box','custom_feature_box');Placed thesis_hook_feature_box in the name and what you have above in the value, still no joy. Thanks for all the help!
Chris — I don’t know what you mean by placing it “in the name”. Copying and pasting the above in custom_functions.php should cause the word “Foobar” to appear in the feature box. If not, there could be a problem with custom_functions.php.
I must be putting it in the wrong place then, because I’m trying to add a custom field on the actual post, not add this to the custom functions.php
Chris — Yep, this has to go in custom_functions.php. What I meant about custom fields was that you might be able to add just the video code as a custom field t the post, but you would still need the function in custom_functions.php to add it to the feature box. The code is a bit more complicated, which is why I didn’t provide it at first. It would be more like the following (if the key of your custom field is “video”):
function custom_feature_box() { global $wp_query; $video = get_post_meta($wp_query->post->ID, 'video', false); if (is_single() && $video) echo $video; else echo '<img src="feature_image.jpg" alt="" />'; } add_action('thesis_hook_feature_box','custom_feature_box');This will show the video only on the single post page (hopefully). I haven’t tested it though.
You’ve been awesome. I plan on donating after we figure this out.
So I place this code in the custom_functions.php. Got that.
A few questions.
Do I need to add a new one of these for each post?
Where do I add my ‘video’ code within the code above?
Must I have an image there? Should it just be a blank image or a 1×1px image?
I think this will look super slick with what I have planned on my site, so I’m really keen to get it figured out.
Thanks for all you do.
Chris — The video code doesn’t go in the function anymore, but goes in a custom field in the post with a key of “video”. So, the above function goes in custom_functions.php and then
goes in the custom field when editing the post with key of “video” and value of the video code above.
The function will cause the video to show up when there is a custom field of “video” for the post, otherwise it won’t do anything, so you don’t need a new function for every post, it is automatic.
You don’t have to have a default image, you can remove the part that says
else echo '<img src="feature_image.jpg" alt="" />';if you want to.I’m trying this now! I’ll report back.
Alright,
Here’s what I did (and nothing more).
I added the code to custom_functions.php (above the very threatening line that says I shouldn’t put anything beyond it, unless I want to mess something up).
I added video as the name and the video code above in the value.
Here is what came up. It’s progress.
http://www.flyaoamedia.com/blo.....episode-7/
Chris — Progress indeed! Okie dokie, let’s change every instance of “video” to “feature_video” (in the custom fields and in the
get_post_metacall) because it looks like Thesis used to use “video” for the Multimedia Box. And also we need to change the lastget_post_metaattribute to “true”.So, the function should now be:
function custom_feature_box() { global $wp_query; $video = get_post_meta($wp_query->post->ID, 'feature_video', true); if (is_single() && $video) echo $video; } add_action('thesis_hook_feature_box','custom_feature_box');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!
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.
I’ll have to ask Alex how to fix that.
Thanks again!
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 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.
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 .pageand then the header bit that goes on top add to.custom #header. See my full-width framework video for more info.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 Kristarella: watched your excellent video on how to use firebug, and now I think I’m getting there. Good idea, that video :)
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.
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.
Hi Kristen
Thanks for this post – very useful – but I’m stuck on a niggly thing … a white gap along the nav menu – screencap at link below:
http://twitpic.com/18pki4
I’ve tried setting background colours to things that seem appropriate in Thesis Design Options > Nav Menu to no avail …
The site is not live, happy to send through code you might need to know :-)
Really appreciate any suggestions you might have.
Thanks
@noj
noj — Is the gap in the nav menu or the header? Have you tried using the highlighting feature of Firebug to see if any elements are larger than they should be? Is your header background tall enough?
Sometimes if I have a linked image I find there is extra space below it that I can only get rid of by giving the surrounding div a height, if you’re using an image rather than CSS image replacement for the logo that could be happening.
Thanks Kris – it was in the nav menu .. I fixed it with:
.custom #nav_area .menu {background:#000000;}
:-)
Wow! In the perfect world it would be wayyyyy easier than this to work with the header. ugh. I tried messing with the code once and wrecked the site. a little gun shy to even try. Appreciate the tutorial just wish life was easier