Build Your Own Business Website header image

How to Create a Full Width Skin in Thesis 2.0 – Part 7 – Style the Header and Backgrounds

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

We add a clickable header image to our skin in Thesis 2 while maintaining the use of the tag line. Then we begin adding background images to the skin. We are using a combination of layered background images to produce a semi transparent page that allows the background to show through.

The next thing to do is to start styling the full width template in Thesis 2. And so we’re going to go back to CSS and the very first thing we’re going to do is add a background image to our body.

Add Background Image to Body

Come over here to images and we’re going to choose a file and pictures… there we go. We’ll use it to set a background image. Add that image, come back over to our CSS. We still need to grab the URL of that image. Come back over to CSS, open up our body style which is one of those single element styles.

Go into options and come down here to background and paste the URL in there. Now we don’t want these extra codes. We have to delete that. It has to just be the address information. Background for this is going to be center. It’s going to be fixed so it won’t scroll. It’s not going to repeat and we’re going to hit save. And that’s what this background looks like now.

Add a Background To Page Area

The background looks pretty cool but you can’t really read the text through it very well. So the next thing we’re going to do is add a background to this. We’ll come back to our images and I’m going to upload a semi-transparent image.

Let’s see, I’ve got to go choose it first. We’re going to upload 60% white. This is a semi-transparent white image, open that up, add that image and then copy the URL, come back over to CSS, go into our page wrap. Select the options, background and paste the image.

Background position doesn’t matter. The default is fine but we are definitely repeating in both directions so we don’t have to set any of those settings. But we do have to hit save and now, you can see the page has a semi-transparent white layer over it.

Add Header Image

We are going to add a header image to this and so we’re going to be creating a new box to create that header image. Come over to this box and the kind of box we’re going to create here is a text box. The text box in Thesis 2 essentially acts just like a text widget except it’s not a widget. You can put any kind of HTML in this text box so we’re going to go ahead and add that text box.

Add Image HTML to the Text Box

Then I’m going to come back over to the site to my dashboard and I’ve created this sandbox page which you folks are undoubtedly familiar with, if you’ve watched me before. Go to the sandbox page and I’m going to insert an image that I’ve already uploaded to my media library and in fact, it’s in the gallery.

It’s the smaller image so I’m going to show that and the title’s going to be ‘Go back to our home page.” The alternate text would be “high adventure getting our friends high for 15 years”. I want it to be centered in the space and I want it to link to my homepage. So I’m making a link URL and now all I’m going to do is just insert it into the sandbox post which generates all the HTML I need. Now I’m going to copy it, come back over to the skin editor, open up the header image and paste that.

And that’s what I’ve just done is I’ve just pasted this HTML which is essentially an image link into this box. I don’t really need to style it at all so I’m not going to bother with that. I’m just going to put it there and then I’m going to expand headerarea.page. I’m going shift drag it into header and then I’m going to shift drag site title out.

Review the Header Changes

So we’ve got our header image and our site title and if we save our template, come over and take a look at it, now we’ve got our header image sitting here. But this isn’t blissfully beautiful. I guess I need to make that smaller. Maybe, 280 by 280 or something like that.

Style the Tagline

So next I’m going to style this tagline. So we’ll just come back over to the CSS editor here and that tagline is the site tagline. I’m going to select that, come over to my options. My font settings, I’m going to select Arial black for this and the font size is going to be 24.

I’m going to turn off the line height. It doesn’t really matter. And then I don’t need anything special there but my text color, I want to be really dark blue. And let’s see if I have that color someplace here… I do. I want that text color to be this really dark blue.

It doesn’t need any background although we certainly could give it a background image, couldn’t we? No, not that one though. We’ll do a background. We are going to center align it and I think we probably want to give it a little bit of top and bottom margins. Let’s give it 20 pixels of top margin and 20 pixels of bottom margin.

Let’s hit save to that, come back over and look at it… 24 is too big so let’s change that down. Back to our site tagline, options, font settings. Let’s take it down to 18, save, look at it. Yeah, that’s better. So we’ve got our logo, our header image. We’ve got a tagline in here. And the next thing I want to do is edit this menu.

4 Comments… add one
4 comments… add one
  • slstay October 31, 2012, 11:56 am

    In this video you have a new css package called “Page Wrap” that I don’t see in any of the other videos. Was that previously called “Page Width”? Or is it a new package you created?

    • Rick Anderson November 1, 2012, 5:08 am

      Yes, I switched from Page Width to Page Wrap. This is a compilation of classes that I taught. In the first class I erroneously used .page as the selector for Page Width. That is an automatic body class that WordPress uses that threw off the design. I switched to .page_wrap to avoid that problem.

  • Ruby Javaid August 23, 2013, 8:11 pm

    How do you add a full-width background to the header and/or footer if you’re using Classic Responsive? I believe you are doing this using Classic regular, right?

    • Rick Anderson August 25, 2013, 6:20 am

      Ruby – This series is indeed about Thesis 2. You could do something similar in Classic Responsive but you would need to preserve the responsive structure in each area. This essentially means using the same named containers as exist currently in the skin.

Leave a Comment