↓Update 18 May 2010: Although the title is “in Thesis 1.5″ this tutorial is still relevant. I have made a couple of updates since it was first written to accomodate more recent changes in Thesis, but really this tutorial is for Thesis 1.5 and beyond!
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 #nav_area .page {background:transparent;}
.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;}
Update 12th May 2010: Added CSS for .custom #header_area .page to work with the new CSS in Thesis 1.6 related to the colour Design Options.
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 [↩]
{ 224 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/2008/11/thesis-footers-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/2009/02/how-to-use-firebug-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 1x1px 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/blog/aviator90/aviator90-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
Rod — It depends what you are trying to do. As far as colours go, it’s pretty easy to change the header, it’s 3 lines of CSS right at the start of this tutorial. If you want to do more it takes more effort.
If you want something really easy then WordPress.org may not be the right thing for you. Over its evolution it has become easier to use and more user friendly, but still has a real sense of DIY. I haven’t used Squarespace, but I get the impression it’s a bit more drag-and-drop than most WordPress themes/sites.
In the past the problem with WYSIWYG editors and things that makes it easier to change the look of sites has been that they output dirty, unsemantic code: not good for cross-browser compatibility or SEO. The only solution was to code it yourself. That’s changing now, but only gradually, not really at a rate that suits the number of people wanting to run their own site.
I would be so happy if you could add code to this for moving the search box to the nav menu and place it either straight to the next to the nav men or to the far right.
Brian — That would probably be a bit beyond the scope of the post itself and there are other posts on it, but it’s a useful bit of code and most other posts make it more complicated than it needs to be:
function add_search_nav() { ?> <li class="search"><?php thesis_search_form(); ?></li> <?php } add_action('thesis_hook_last_nav_item','add_search_nav');That goes in custom_functions.php, and the following in custom.css.
.custom ul.menu li.search {float:right;}You may also need to give the form some margins and padding to sit nicely in the nav bar.
Thank you so much. I know, but really appreciate you taking time to help out within the scope. I’ve been browsing around the web like crazy trying to find out a working solution combining the two. No luck untill you struck. Thanks again!
Kristarella: is it possible to make this kind of full width header clickable? Mine isn’t clickable for some reason. I have the header and strapline set to show in Thesis options but set out the left so they aren’t visible using this code in custom.css:
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }This technique works with the page framework, but doesn’t appear to with a full-width header. Is there an alternative for making the header clickable? Or have I simply messed something up?
Simon — you also need
.custom #header #logo a {width:100%; height:100px;}(or whatever the height should be) to make it clickable.Thanks Kristarella, though that doesn’t seem to work for me for some reason. If I take out the text indent, then the hidden text logo becomes visible again, and then it is clickable (though obviously the whole thing looks a mess). When I send it back off to the left with the -9999 then the header is no longer clickable. The full code I’m using is:
.custom #header_area {height: 137px; background:url('images/top-rpt.png') repeat; outline: none;}
.custom #header_area .page {background:transparent;}
.custom #header {border-bottom:0;}
.custom #header_area .page {height: 137px; width: 97.7em; background: url('images/WMT.png') no-repeat; outline: none; }
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }
.custom #header #logo a {width:100%; height:137px;}
Simon — Sorry, you need
display:block;, I thought about it and thought I’d typed it, but apparently not..custom #header #logo a {display:block; width:100%; height:137px;}Kristarella: perfect, thanks – it’s fixed. You deserve a medal.
Hey Krista,
Thanks for the quick response. I have used wideget sidebar Text option to function as click able images. However I am struck @ Sidebar1 background and Content background. Is there a way to make them (Sidebar as well as Content )transparent.
Joshua — Assuming you’re using the full-width framework,
.custom #content_area .page {background:transparent;}will make the content background transparent.Yep It worked !!! That was an easy fix. Thank you for that !!!
Excellent article. I would have paid for this honestly. Too good
love
Vish
Hey Krista, I have used the following code to make my header area transparent. But then can I still make it clickable to site url.
body.custom { background: url(‘../lib/images/images/qm_background1.jpg’) 50% 0 no-repeat;
}
/* header BG Image */
.custom #header {border-bottom:none; height:150px; padding-top:0; padding-bottom:0;}
.custom #header #logo {display:none;}
.custom #header_area .page{background:transparent ;
}
/* Content Area Transparent */
.custom #content_area .page {background: transparent;}
i need to make my header area page clickable !! Any thoughts ??
Never Mind !! Itried to play with Simons Code and it worked !!!
Vish — You’re always welcome to use the donate link below ;-)
Hey Kristarella,
I added the code from 131 for adding a search area in the right hand corner of the navigation bar.
The problem is that the box is too small (I need at least 30 digits worth of space), too thin and is misaligned with the rest of the nav bar.
My questions are:
1. How do I fix the alignment and/or add padding to the search box?
2. More importantly, how do I replace that with a google custom search box similar to the one you have on your home page (I currently have it as a widget in my sidebar but it takes too much space there)
3. Can you please refer me to other posts or resources on that topic?!
Thank you very, very much in advance for your help!!!
Nikola — To fix the alignment etc you need to use CSS to change the padding of the menu item and the search box, and its width I guess. Try the following, play with the numbers until it’s right:
ul.menu li.search {padding:0.5em 0.5em 0 0;} ul.menu li.search input {padding:0.5em 0.25em; width:10em;}You might like to try using Firebug to investigate CSS problems like that. And here’s a link to W3 Schools’ info about CSS padding to understand the different ways you can write it out.
To have a google search box you need to create a Google Custom Search Engine and get the form code from them.
Hi Kristarella,
Thank you very much for your prompt help answer. The code that you have supplied works great and by playing around a bit I managed to position it on the right of the NavBar.
Now, I do have Google Custom Search Engine already and I am currently using it in the side bar so what I am trying to figure out is how to replace the default WordPress Search box with the Google Custom Search code which I already have.
Any ideas?!
Thanks a million again!
Nikola — Replace
<?php thesis_search_form(); ?>with your GCSE form code (which you probably have pasted in the sidebar widget).Thanks again!
It works. The only problem is that now I have the search button to the right of the Google Custom Search box and I do need that button there anymore… How do I get rid of it?!
Nikola — If you change the last input from type “submit” to type “hidden” the form should still work by typing and hitting enter.
Thank you very, very, very much! You are so amazing!!!
Hi. I don’t really know what I’m doing, but I tried to follow this tutorial. I was able to do the deader part in the custom.css file. But things went wrong for me in doing the nav bar part in the custom_functions.php file. Now when I go to my site’s address, the site doesn’t come up. Instead I get:
Parse error: syntax error, unexpected ‘.’ in /home2/georgi15/public_html/barashlegal.com/wp-content/themes/thesis_17/custom/custom_functions.php on line 68.
Any way you can tell what I did wrong? Thank you so much. (At first I could get back in the file and I think I removed the code, but now I can’t get anything by the parse error message. )
i meant the “header” part (not “deader”). (sp) thx
Jon — The error means that on line 68 of your custom_functions.php file there is a full stop/period that shouldn’t be there (or should have something else before it). In PHP a full stop can have special meanings depending on where it is.
Beyond that I can’t tell you what the problem is, but if you copy your custom_functions.php file to Pastebin and give me the link I can try to troubleshoot it for you.
Hi Kristarella – I’m working on a site header and have run into a snag. Was hoping you might be able to offer some advice. I added the code you suggest for the full nav and header. Works fine except for a white area in the nav bar that I can’t get rid of/change the color of. The code is below, and the site is: http://healthconvo.com. Any thoughts? Appreciate it!!
.custom #header_area {background:#ffffff;
border-bottom: solid 10px #669682;
border-left: solid 0px #000000;
border-right: solid 0px #000000;
border-top: solid 0px #000000;
font: normal ‘Arial’, Times, serif;
letter-spacing: 0.4em;
margin: 0;
}
.custom #header_area .page {background:transparent;}
.custom #header {border-bottom:0;}
.custom #nav_area {background:#E6DEC0; border-bottom:1px solid #DBD4B7; padding-top:10px;}
.custom ul#tabs {border-bottom:0; border-color:#ffffff;}
.custom ul#tabs li {border-color:#DBD4B7; background-color:#E6DEC0;}
.custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {background:#000000;}
Katie — You’ll need
.custom #nav_area .page {background:transparent;}as well.Thank you!!
Hi Kristarella,
Your information has been very helpful. I’m using a Thesis template for the first time. I have a question. I downloaded the OpenHooks plug in. I would like to add an image underneath the header. When I put the code in the plug in, it shows the code on the home page. Do you have any suggestions?
Thank you,
Bonnie
Bonnie — It’s hard to say just from a description, I’m not sure which code you are using… to add an image below the header with OpenHook you should be able to add just
<img src="http://www.example.com/image.jpg" alt="" />to thethesis_hook_after_titlebox. If there is code showing up on your page I would imagine it’s because you’ve pasted PHP in there without checking “execute PHP in this hook” option, or your HTML entities are encoded.Kristarella,
Thank you so much! It’s working!
Bonnie
Wow… The tutorial is great and worked like a charm! I just have one question…
WHEN ARE YOU GOING TO MAKE A TUTORIAL ON HOW TO DO A NAV MENU LIKE YOU DID!
I have been looking forever to try and find someone who has done the look you did, because I wanted something similar on my site.
Now I have, but it seems a little to complicated to decode using firebug, put it all together and then apply it to my site. I am just not at that coding level yet.
Please let me know, I need to know! LOL
Thanks,
Brandon
Brandon — Do you mean the nav I have now with icons or the previous nav I had with non-dropdown hierarchy?
Hi Kristarella,
I was wondering if you could help me with a problem I’m having. I keep getting the background color of the page in my navigation bar. I would like to get rid of white bar and let the tan full frame header show through. Here is a link to my site. I just bought thesis and I’m trying to get the hang of it.
http://shawnherbertdesign.com/practice/
Hi Kristarella,
I figured out my problem. You have a great site! Can you tell me how you made your header have a cool gradient with the knockout text.
Thanks, Shawn
Shawn — The gradient is a transparent background image on
#headerand the text is using the CSS3text-shadowproperty.Hi Kristarella,
I added the code in Step 2 (with a change to the color), and the background is now full width but the rest is not. Any suggestions?
Also, how do I change the text in the header?
Thanks,
Susan
Susan — I’m not sure what you are looking for in terms of “the rest” being full-width.
The header text shows the title of the site and the description/tagline as set in WordPress Settings > General. You can select whether to show both, either or neither of these in the Thesis Site Options. To change the entire contents of the header you need a custom function such as:
function custom_header() { if (is_home()) echo '<h1 id="logo"><a href="/">My custom header text</a></h1>'; else echo '<p id="logo"><a href="/">My custom header text</a></p>'; } remove_action('thesis_hook_header','thesis_default_header'); add_action('thesis_hook_header','custom_header');Thanks Kristarella! Would I make a similar change to replace the tagline?
Hey Kristarella,
Can you explain to me how I would go about switching the header and nav content. I would like the nav content to come first before the header. Would you be able to explain that to me?
Thanks, Shawn
Whoops, here is the link to view what I am talking about.
http://shawnherbertdesign.com/practice/
Shawn — It says it in the post, but you need to use
thesis_hook_before_htmlinstead ofthesis_hook_before_content_areato add the full-width nav above the header.Hi Kristarella
I would like to know what do I need to do in order to make my header look a like
http://amanda-marie.com I would like my top menu to blend in with the background as well as my logo and bottom menu. My logo is getting cut-off and stretches only as far as the sides of the menus.
Ejaz — From what I can see on your site you haven’t implemented anything from this tutorial. Almost everything you need is in the post. Feel free to ask follow-up questions when you’ve attempted to apply the information in the post to what you’re trying to do.
In making my header full-width, I see from the code you gave it fills in on either side of my banner with the chosen color. Is there a way to do this using a gradient or pattern instead? I’m assuming there is because the header on this site is done like that, i.e. it’s not a flat color. I’m not up on php or css so it may be simple but I wouldn’t know.
Jan — To add a pattern or gradient you can add a CSS background image as well as colour. For a gradient the image you should use the
repeat-xproperty to get it to repeat horizontally, for a seamless pattern you can just userepeatand it will fill the area.I got onto this today by fooling around. I keep a test installation of WP and Thesis for my experiments. I think I’d lose all my website visitors if I tried any of this live. I made the header as a gif, and then added a link to a small square of the same pattern (instead of plain color) to fill in the full-width. It worked alright but I don’t know if it’s the ‘correct’ method.
Jan — It seems correct from what you’ve said. If it works, I would say that it’s not incorrect.
Now that I’ve got that down, my imagination is going a little wilder. Is there any way to make a single image go full-width? It seems I have to fill the space with either a flat-color, a pattern or a gradient. I’ve seen some sites where an image goes to one side or the other, or extends down below the header area. It looks very ‘free-form’ but I’m sure it takes some planning.
Jan — unless you make the image as wide as the largest monitor you can’t guarantee a full-width background with a single image. There may be ways to make it appear like one image when it’s actually two. If you give me examples I could have a look and see how those sites do it.
There was an example given by one of your commenters but I’d have to go through all your tutorials to find it again. It was a yellowish background with a tree on the right side and the yellow background extended a ways down the left side of the content area. It looked very complicated to accomplish.
I think with my paltry skill-set I can still be creative enough custom-designing a header with text and images on top of a background pattern. The possibilities seem endless. I stayed up late looking around to see what other people are doing and didn’t come across anything that I could show you as an example,so perhaps it’s not being done as much as I imagined.
A simpler place to start might be how to put, for instance, RSS and RSS Email buttons on top of the header and, of course, still be clickable? As I look around at other sites, I’m taking note of things I might want to incorporate.
Jan — I went through all the commenters’ sites, but didn’t see anything matching your description, but I did demonstrate how you can create a single image illusion is comment 77. :-)
Thanks. I can see how that would work with a certain type of image so I’ll have to think about using a different photo or graphic in the middle. I ended up doing a vignette (that only looked good in white) to get rid of the squared off edges of the banner, so I had to create the full width effect using the navbar. It’s cold looking (for a casual friendly blog) with all that white but I’ll work on it again probably. Another late-at-night in this part of the world.
Jan — Yes, that’s another way to do it, is to fade out the edges of the image. That tends to depend on the type of photo as well.
Hi – Thanks for putting this up, your instructions are very clear. Unfortunately I tried doing this on a Wordpress 3.0 blog and while the first half worked well (putting the full sized header in) the second half (putting a full sized nav bar below the header) crashed my blog twice in a row. I cut and pasted the code you have above and made sure they were in the right files after it crashed the first time, but I got the white screen of death both times.
I can’t even find the files on my FTP site to edit with dreamweaver, so I’m going to have to do a clean install of Thesis again…but I won’t be trying to put in the header until I talk to you.
Thanks.
Steve — I’m sure all the code in the post works. Make sure you only post the PHP bits in custom_functions.php (the first chunk of code under step 2), and not the CSS (the second and last bits of code are CSS and need to go in custom.css). I would generally recommend avoiding using the built in editor to edit custom_functions.php, but rather using a text editor on your computer and uploading via FTP, or at least having the FTP handy in case something goes wrong. It’s easy — even for me — to forget a semicolon or something and get the white screen, so that even the dashboard can’t be accessed.
Out of curiosity, how will you reinstall Thesis if you can’t find custom_functions.php via FTP? It’s in the Thesis custom folder, and won’t you need to be able to find the Thesis folder via FTP to reinstall it?
I believe I followed your very clear instructions for a full-width header, yet I don’t seem to have one. Where did I go wrong?
Sonster — If you mean on the GaGa sisterhood site, you would need to give
#header_areaa background colour that’s different from the body background colour to make it appear full-width. If you mean on another site, then I have no idea where it could have gone wrong.Yes, now the header is full width for that website, but the footer isn’t showing full width.
Sonster — The background colour needs to be applied to
#footer_area, instead of, or as well as,#footer. My video on the fullwidth framework might shed more light on it for you.Thanks so much for your excellent help. I’m now a subscriber and a follower.
Hi Kristerella – try to implement your code for the full width nav bar (as above) with Thesis 1.7. It doesnt work. I get thiserror message: “Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, ‘full_width_nav’ was given in /www/htdocs/w00ba1bb/UPR/wp-includes/plugin.php on line 339?. I have checkd the code for spelling mistakes and the right position in the right files.
Even if I do not make use of the “full_width_nav” function, colors for the “#header_area” do not show up. I am not really familiar with using Thesis – but this looks like getting into coding very deeply; actually my goal is publishing content – if I can get the layout done… Would you suggest to go back to an earlier version of Thesis? Any hints are more than welcome! I´ve also found these functions on “artofblog.com” – but this doesn´t work either. Hope you find the time to give a hint. Thank you!
Mario — I don’t think the version of Thesis will make any difference in this situation. This code does work. I just pasted the first chunk of code in step 2 into custom_functions.php and the second bit in step 2 into custom.css of a Thesis 1.7/WP 3.0 install and all worked as expected, no errors.
It’s possible that you have a plugin that is duplicating the function name
full_width_nav, or interrupting it in some way, in which case changing both instances of “full_width_nav” to “custom_thesis_nav”, or something like that might help. If not, please paste your whole custom_functions.php into a pastebin so that I can check for errors.Hello Kristarella, thank you very much for the unbelievable fast reply. I hate to say that, but “shame on me”! Your suggestions where the reason I´ve tested what you have written, and by doing that, going through the code of both files again and again. Long story short: Your code works! After rearranging some of the commands I realized I had deleted a character which commented out some text in the “custom_functions.php” . That caused the error message. Really own you a favour. Thank you very much for being so supportive! You have a new regular follower of your Blog – have a nice day!.
Mario — Glad you found it! You have a nice day too!
Hi Kristarella – You have some wonderful tutorials here, but I am stuck on this one. I somehow have two navbars. The one I made with your help that spans across my page (THANK YOU), and my old one. I can’t find the old code to get rid of it. Do you know how I can go to only one?
Thanks for the great tutorial.
Sheri — Can’t see your site at the moment due to a PHP error (which I believe is caused by you having two functions named “custom_footer” in you custom_functions.php file). To get rid of the other nav bar make sure you have the line
remove_action('thesis_hook_before_header','thesis_nav_bar');somewhere in custom_functions.php, and if you have Thesis OpenHook installed, make sure no checkboxes are checked that are adding the nav bar in somewhere and make sure the nav function (thesis_nav_bar();) is not being called somewhere in OpenHook.Hi Kristarella – I moved on to my footer and was called away when my daughter began drawing on my couch – lol. I have it back up. Would I know if I had OpenHook installed (very new to WP and Thesis, sorry)
Sheri — OpenHook is a plugin, you would have to install it, unless someone else is using your site too and didn’t tell you you should know about it. Now that I see it, the line you will most likely need to remove from custom_functions.php is actually
add_action('thesis_hook_after_header','thesis_nav_menu');.Thanks Kristarella – I figured it out. I put the add_action(‘thesis_hook_after_header’,'thesis_nav_menu’); in the functions.php folder by mistake and forgot to remove it.
I’m having trouble with my nav bar. I want it to fit to the content rather than stretching across the screen, and I want it to be beside the title. Nothing I do seems to be working and the nav bar is stretching off the screen. Thank you very much!
http://www.thehorseandhabit.com
Hi all.
Sorry, this is not exactly on-topic for “full width headers”, but it’s related so I hope I’ll be forgiven.
WordPress 3.0 – Thesis 1.7.
My dilemma is how to determine the exact width to make a header graphic, so it neatly fits the width of the blog.
For example, let’s say I’m using a two column design, content=500 and sidebar=420. What I need to know is:
Is there a rule of thumb for an amount to add to the sum of the column widths, in order to determine the resulting blog width? Just adding 500+420=920 leaves the graphic not wide enough, so apparently there has to be an allowance added for whitespace.
If it matters, I have the following settings…
Design Options –> Site Layout –> HTML Framework
“Full-width framework” selected.
Site Options –> Display Options –> Header
“Show site name in header” is checked.
“Show site tagline in header” is checked.
Thanks for any help you can give.
Gail — Each column width set in the Design Options is the usable width of that area, then there’s padding and margins as well. So, with your settings, posts can have contents up to 500px wide and widgets can have contents up to 420px wide, then there’s the padding around those things. I believe the padding is affected by the font size for the site (the first font-size thing on the design options page, which is 14px by default). At the default 14px font size each sidebar has 1.1em (11px) padding on either side, so one single sidebar set to 420px will be 442px wide. The posts have 1.1em on the left and 2.3em on the right, so the total for 500px contents will be 524px. There are no other margins or padding except for the outer page padding, so the width of your header should be content + 34px + sidebar + 22px.
The other way to find out is to use Firebug, or if you use Chrome or Safari you can use webkit inspector (right click on the page and select “Inspect Element”), both have a “layout” or “metrics” dialogue showing the width and padding of the selected element. Below is a screenshot of Webkit Inspector, looking at my site’s header metrics.
I have done everything you said to do and for some reason my header won’t stretch the full width of the browser :(
http://billlymcgovern.com
Never Mind! Sorry for the two comments! You can delete them if you want, I figured it out.
http://billymcogvern.com
Thank you very much Kristarella, for the great info on working out page widths.I’m not quite there yet, as it doesn’t seem to be exactly right to a very critical eye, but it’s certainly very close and I think you’ve put me on the right track. I’m still trying to get my head around how to use Firebug properly.
I think it’s just great how you go out of your way to help us novices. Your knowledge of this topic is quite astounding!!!
If it’s not out of order, there’s something else I haven’t been able to get a clear answer to via Google searches.
Is it possible to have different Media Box contents on different pages, or even no Media Box on selected pages?
For the site I’m working on I want to have a short movie in the Media Box on the home page, but I don’t want it to appear repeatedly on every page. It would be really excellent to be able to have various different Media Box content on various different pages.
Gail — It is possible to have different content in the multimedia box on different pages by adding the image URL, or video code, or whatever is needed in the Multimedia Box field on the post or page editing page. However, I don’t think there’s a way to have it showing only on the home page and not any other pages. I.e., it’s possible to have it not show up at all and then show custom content for certain pages, or have it show the same thing on every page, except when custom content is specified and then it’ll show that. I think it would be simplest in your case to select “do not show box” and then add it to the homepage via custom_functions.php.
To do so, try adding the video to the MMbox, copy the code that is generated (for the whole box) when you view the page (either right click and inspect element, or view source, to get the HTML) then put it in a function like
function home_mm_box() { if(is_home()) { ?> COPIED HTML GOES HERE < ?php } } add_action('thesis_hook_before_sidebars','home_mm_box');Hi there!
Great blog – I have a really silly question.
I have instructions about how to do a custom photo header. Here’s step 1.
1. Open a new blank document in the size of your header area (use 72dpi for web resolution)
I have thesis 1.5.1 on my site. How do I determine the size of my header area? Thank you.
Linda — Have a look at comment 202.
Thanks Kristarella for making that video on using the full width framework. It was needed.
But got a question how are you using to firebug to make those changes permanent? Are you using a text editor or are you going into the files inside your server and making the changes. I am trying to learn web development and this has helped.
I’m wondering how I could go about adding a stripe to my header background color that would span the entire width of the full width framework. I have it part of my current logo (green stripe), but would like it better if it was part of the background and across the whole width. I hope that makes sense.
Thanks for all the great information.
C. Gene — I think I mentioned in the video that the changes in Firebug are temporary so you need to duplicate them in your CSS file. That can either be done by changing a local copy of the file and uploading it via FTP, or by using the built in file editor in Thesis. I prefer the former because you can always undo changes you make on a local file while it’s still open, but not when you edit directly on the server. Theres no other big trick to transferring the changes from Firebug to the file, I generally just type them out in the CSS file. Some text editors might have autocomplete for CSS properties, which makes it a bit quicker to type CSS (I use Coda for that).
Sarah — For your header I think the best way would be to cut off a sliver of the header image from the side and save it as another image then apply that as a background to
#header_areawith the background repeat set torepeat-x. Then you should get the blue/green/blue stripes repeated across.Thanks Kristarella. I’ll give that a try.
First, thank you for all of your excellent tutorials, you’re amazing. I have a few questions. (I’ve been “out of Thesis practice for a few months, so this may be a simple issue)
1. my nav bar doesn’t seem to stretch the width of the screen even though I believe I have all the code in correctly. I notice that your nav&header go on forever if I zoom out mine are not doing that.
2. I’d LOVE to add a medium brown line above and below the nav bar, is there an easy way to do this?
Donna — Your background colours are not applied to any of the full-width elements on the page. Following the steps in this tutorial should produce what you need.
And once you’ve done that, add
border:solid #530; border-width:2px 0;to the CSS for#nav_areato get top and bottom borders on the full-width nav.Hi Kristarella and other folks.
WordPress 2.8.5 + Thesis 1.6
I’ve been sitting here wracking my little brain for an hour and groping around inside WordPress/Thesis configuration and I just can’t find what I’m looking for.
My default layout is three column, but some time back I set up some static Pages (About, Contact, Privacy Policy etc.) that had no side columns and a few other bits different.
Now I can’t for the life of me remember how I did that, but I’m fairly certain I didn’t get involved with Custom Page Templates or anything techo like that.
I’ve got it in my head that there is somewhere I can change such layout/appearance settings for each individual page.
Can someone please give me a kick start?
TIA
– Rosie
Rosie — For starters, upgrade WordPress! Staying on old versions of WP is a security risk.
As for the no sidebars, you can do that by selecting the No Sidebars page template on the right hand side of the page editing screen. If there are no page templates in the dropdown box activate the default WP theme and then reactivate Thesis, they will show up then.
OK Kristarella, you badgered me into it :-)
I’ve been hesitant to upgrade for fear of losing my customizations. But I needn’t have worried because after upgrading both WordPress to 3.0.1 and Thesis to 1.7 everything seems to have come out just fine.
And after the upgrade the No Sidebars template appeared where you said it would.
Thanks VERY much your assistance. Fantastic job you are doing here. Might be time for a Kristarella Forum ???
Hugs,
- Rosie
Rosie — Glad the upgrades went smoothly :-)
I’ve thought about a forum before, but I can’t keep up with my email at the moment, let alone a forum. Will just have to stick with the DIYthemes forum I think ;-)
Hi
Thank you for all the great work you have been doing here ..
I want to extend the green bar in the nav menu to the full extent on the browser.keeping the menu items in line with the content .
Tried with all the code available on full width frame work.
Can you please help me out …
Regards
Navin
Navin — This tutorial should let you do exactly that. If you can tell me how it didn’t work when you tried it then maybe I can help you fix that. But my instructions on doing it from scratch are already in the blog post above.
Hi Kristarella, can you teach me how to put my header image just on the right site. So half of the header will be for the image on the right side . Thanks Filipe
Filipe — Most of your CSS is correct for making the background image right-aligned, just remove the
margin-right:200px;.Thanks for this. We are playing around with it for a clients’ site. Cheers!