≡ Menu

My Thesis Full-Header & Custom Background

  • Share
  • CevherShare
  • Share

I have just spent the weekend setting up this site with the Thesis wordpress theme.  My challenge was to get the full-header to do what I wanted it to do and have the custom background act right as well.  It took most of the weekend to get the answers and maybe they can help you as well.

This is the first time I have actually purchased a theme . With so many free themes available it took me a while to pull the trigger.  I did some research prior to purchasing and after so many positive reviews I decided to go ahead and take the plunge.    I have set up about 10 other WordPress sites for myself, my small business and a few friends.   Since taking a class from Dr. Andy at EzSEOnews.com I have become pretty good at reworking the free themes to do what I needed them to do.  After I discovered WordPress and how easy it was to set up a site, I couldn’t stop talking about it and before I knew it I became the “go-to” guy for site building among my friends. I love it.

I certainly do not claim to be any kind of expert in WordPress, writing code or Thesis.  I have learned a lot from the course I took and from building the sites I mentioned but I am certainly no expert.  The reason I am posting this as my first real post to Sagacious News is after this weekend of searching for answers, I discovered a few tricks that were not in the mainstream of sites I used to help me in my initial setup.  I will list some sites I found to be helpful and go from there.  One site paymentsviews.com is a blog post of a play by play explanation of the experience of setting up WordPress and then the upload and setup of the Thesis theme.  I experienced some of the same things as this gentlemen did but wanted to tweak my site a little bit more than he did.

The other two sites I utilized in my setup were kristarella.com and onelinkatatime.com.  They are both big helps but as I explain here in a minute there seems to be a few details left out and I found it difficult to locate the answers.    Before I continue let me say,  Kristarella helped me big time.  I posted a message on her blog after trying to figure it out for hours and she responded with some suggestions and after many more hours of attempts, I re-responded with another question.  When I was at the end of all the things I could think of, she answered my post and gave me the answer I was looking for.  Very Cool. I live in Atlanta, Georgia – she lives in Australia. The power of the internet is just amazing and so many people are gracious with there time and knowledge. Thank you Kristarella.

First I will explain what I wanted to do.  As you can see my header spans the entire length of the page.  I have used this look on a website I created a few years ago, before I discovered WordPress.   I like the way it fills up the page.  The other thing I was trying to do is to have the background change color outside of the content box, seems simple enough – right.  That’s what I said.

First the Header.

As I scanned for information about customizing the header and found the “Full-Width Header” talked about I thought – SWEET – this is going to be easy.  I followed the instructions and went into the admin panel and changed the setting to full-width.

HTML framework Thesis

I then utilized  filezilla – my ftp program – which is free by the way,  to get to the custom.css and custom_functions.php files.  These two files are the sole editing files for changing code within Thesis.  This is pretty slick because the other themes I have used required you to hack multiple files to create the look and function you are going for.  This can get confusing and tedious.

When I found Kristarellas code I studied it for a bit and when I had an idea of what was going on with the Thesis way of doing things, I copied and pasted this code into the custom_functions.php file.

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

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

I wanted my nav_area below the header so I cut and paste the div id=”nav_area” and inserted it between the </div> and the <?php } at the bottom of the code block.

The next thing I needed to do was to add some CSS code to the custom.css file

.custom #header_area{display:none;}

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

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

This changed the nav_area and the title_area colors and created some borders but I needed to add this code below to bring in the graphic.  This code replaces the .custom #title_area line in the above code block.

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

Upload your graphics file you are using for your header to the images folder in the custom folder of your Thesis theme.  I created this graphics header by cropping a picture and adding the Yin Yang graphics and text with my image editing software.  I made my graphics  1500px X 150px so it would span the entire length of the screen.

Insert your graphics file name where header.png is.

.custom #header {border-bottom:none; height:150px; padding-top:0; padding-bottom:0; background:url(images/header.png) center left no-repeat;}

Now for the background.

I utilized the onelinkatatime.com site and also the diythemes site for custom backgrounds.  They both give basically the same code.

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;
}

I copied and pasted this code into my custom.css file under the previous code I had pasted into the file.

Here is where the problems began.  When I tried the site with my new updates the header went into place but the entire background of the body was the color of the background.  I had lost my white content box.  Now the header was in place but it did not expand across the whole page.  It still had margins – they were just colored now.  The first thing I did was to turn off the full-width framework and that actually solved the background problem but it gave me two headers now.  One that actually spanned the entire width of the page like I wanted it to and another that was down below the actual header area but smaller with the margins to the right and the left.  I turned the full-width back on and went to work trying to find the solution.

The first thing I fixed, which was by accident, was the header.  I solved that by moving the class=”full_width” tag from the title area and inserting it behind the <div id=”header”>.   This is in the custom_functions.php file.

Here is my custom_functions.php file.

function full_width_header() { ?>
        <div id="title_area">
            <div class="page">
                <div id="header" class="full_width">
                    <?php thesis_default_header(); ?>
                </div>
            </div>
        </div>

            <div id="nav_area" class="full_width">
                <div class="page">
                    <?php thesis_nav_menu(); ?>
                </div>
            </div>
<?php } 

add_action('thesis_hook_before_html', 'full_width_header');

The background problem was another story.  I tried so many things its ridiculous and I won’t bore you with the details but the solution finally came from Kristarella.  It was a little piece of code I was missing. I had gotten close but it still was not working like I knew it should. I had searched and searched for the solution but could not seem to find the answer.  Well – here it is.

.custom #content_area .page {background:#fff;}

Insert this code underneath the body.custom

line in the custom.css file. It can actually go anywhere but that is a logical place for it.

And there you have it “’voila” the background borders remain whatever you choose them to be and the content area remains the color of choosing as well.

/*  Header CSS   */ 

.custom #header_area{display:none;} 

.custom #nav_area {background:url(images/Gratebg.jpg) repeat; padding:.5em 0 .5em; border-bottom:1px solid #ddf;}     .custom #nav_area ul {border-bottom:none; border-left:none;}
        .custom #nav_area ul li {border-width:0; margin-bottom:0; padding-bottom:0; background:9a4118;} 

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

  /* Footer CSS  */ 

.custom #footer_area {background:url(images/shadowbg.jpg) repeat; padding:0.5em 0; border-top:1px solid #bbd; }
    .custom #footer {border-top:0;}
        .custom #footer a:hover  {color: #00f; } 

/* Body Background & Content Area CSS  */ 

body.custom {
    background: url(images/shadowbg.jpg) repeat
 } 

.custom  #content_area  .page {background:#fff; margin-top: 0.5em;}

Here is my custom.css file.  Notice I have used a graphics file for both the  body background and the nav_area background.  Very easy to do – you just need to upload the graphics file to your images folder inside of your custom folder and insert your file name where mine are.

If this helps you or if you have questions or some insight of your own – please drop me a comment and share your experiences.   Happy Blogging.

{ 17 comments… add one }

  • Elliot August 24, 2009, 9:16 pm

    This is a great tutorial. Got me going quickly Todd was reachable and helpful. Thank you Todd.

  • Mark August 29, 2009, 4:00 am

    Todd this tutorial is both informative and amazing! Lots of work went into this – I know I’ve been trying to all this for 3 days now, 12hrs a day.

    1. Make a logo/header in Photoshop
    2. Working out how to show it up in WP.

    Getting there – this has helped.

    thanks

    Mark

    • Todd August 29, 2009, 4:58 am

      Mark,

      Thank you and glad it is helping you. Let me know if you have any questions, I’ll be happy to help.

      Todd

      • Lisa August 22, 2011, 1:39 pm

        I have a question I’m hoping you may know how to fix. I have Thesis 1.8 installed and cannot view any comments people post to my Wordpress site. I get an error code showing up in the Admin panel under Design Options-Comment Body area, it says: Warning: Invalid argument supplied for foreach() in /home/talyasb/public_html/wp-content/themes/thesis_18/lib/classes/options_design.php on line 1430.

        I’m not sure what to fix in the php file? Any ideas of how to get comments to show up on my blog? I deactivated the plugins and that didn’t do a thing.

        Thanks!

        Lisa

        • Todd August 22, 2011, 7:34 pm

          Lisa,

          a couple of questions. have you ever had comments working on your blog. if you have when did they stop working. make sure you have comments turned on within the thesis dashboard — Love your blog by the way.

  • Sebastian September 26, 2009, 9:50 pm

    Thank you for that tutorial, Todd. I was searching for how to customize my Thesis background on Google and you were in the Top 5 search results!

  • Todd September 27, 2009, 12:53 am

    Sebastian,

    Good to hear about my rankings, let me know if you have any questions.

  • Karl Hadwen October 15, 2009, 12:41 pm

    Great, Thanks.

  • thais November 5, 2009, 1:33 pm

    hi there! I need help! It’s really silly but I can’t find my custom folder so I can upload my image. all tutorials tell me to save the graphics on the /custom/images folder so I can customize my background but I simply can’t locate it. could you help me? thx a lot.

  • Vaibhav Kanwal December 28, 2009, 11:40 am

    Hi

    This is a great tutorial. Helped me get the look withing minutes. Thanks!

  • Nick June 16, 2010, 5:19 pm

    Hi,

    I created a custom background & header which show up fine in Internet Explorer. But the background does not appear in Firefox, Safari or Google Chrome. Any ideas how to fix that? Thanks a lot.

    • Todd June 16, 2010, 5:36 pm

      Many times it is the other way around. All the other browsers are ok and internet explorer is the problem. I would start with your plug ins. turn them all off and see if it shows up in internet explorer. If it does then you know one of them is causing the problem.

  • Fareed November 18, 2010, 3:49 am

    Thanks for this tutorial, its working 100%

  • chris garber March 10, 2011, 6:23 pm

    hi,
    I have been asked by a friend to work on their blog,.. they just installed the thesis theme version 1.8.
    How do center the header image?
    thanks,  chris

    • Todd March 12, 2011, 3:52 am

      Chris, Not sure what you are asking. The header should stretch the entire length of the screen with this tutorial. You notice I do not do this anymore on this blog. A lot has happened with Thesis since writing this tutorial. One of the biggest changes is the ability to load the header image automatically from the Thesis menu options. It is much easier and cleaner that way. Give me the link to the site you are building so I can take a look at it.

  • Milind November 7, 2011, 6:08 pm

    Hello
    Your tutorials, your writing style is attractive and easy. I liked Kristarella’s way of full textured header background. But I could not get a reply from her, hence searched my way and landed here.

    I have brought the MM box up, but the header background stops where MM box begins. I want it to extend to extreme right. Can you please help me out?
    Thanks

    • Todd November 7, 2011, 6:35 pm

      Milind

      Not exactly sure what you are trying to do. I have never seen the box brought up into the header area. Is that the look you are going for or was that an accident. How fare do you want the header to go. Across the full width or not?

Leave a Comment