Build Your Own Business Website header image

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.

Lesson 8 – Part 3 – Add a Header Image Using the Thesis Header Image

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Using Thesis Header Image Function

The first thing we’re going to do in styling this is to add a Header Image using the Thesis Header Image function. If you come over here and look at the Thesis menu, consider it has this “Header Image” function. This is the tool that you use to add the Header Image to your site.

Notice that this says, “Based on your current layout settings, the optimal header image is 1021 pixels”. If you imagine the Header Image spans from edge to edge and is a very clear demarcation on the left and on the right, then you definitely want to respect this number, right? You want to make sure that your Header Image is actually 1021 pixels.

We are going to talk about Image Editing and Preparing Images for Use on the Web on Monday. I’m not going to dive into it very much at the moment but this gives you a clue of how wide it should be. If you really are in a situation where you have a 1000 pixels not 1021 and it has a strong line on the other side, the easy thing for you to do here is simply to reduce the size of one of your columns.

For example, if we come over here back to Design Options and to one of our columns, we can take out 21 pixels out of this and make it 299 pixels then come back over to Header Image. Now you see, the Optimal Header Image width is 1000 pixels.

Those of you who are really good at Math will have noticed something. That is, our column widths do not add up to 1000. If we look over here again, we have 2 columns. Our columns widths are 640 and 299 and that’s not 1000 pixels.

The difference between that 1000 pixels or the 1021 pixels and the column width here is the margin that goes in between the columns. What happens is we’ve specified the internal width to our columns, how wide we actually want our columns to be. And what Thesis does is it adds margin and padding to the outside of those which ends up making the page wider than the sum of these two numbers.

Right Size of Header Image In Thesis

If we “Save”to  those two numbers and we come back again to where we were, we’re back to 1021. You’ll notice it says, “If your image is wider than this, don’t worry-Thesis Theme will automatically re-size it for you.” What we’re going to talk about next is the right size of header image in Thesis.

If we select our Header Image, it brings up a dialog for your computer because you’re going to upload this directly from your computer. This is header-transparent.png and here’s my header. It doesn’t have any background color to it, it’s clear but it has the “Rick Anderson Architects” and the little tagline. That is actually 1021 pixels long from one edge to the other.

We’ve selected the Header Image, look it’s even told us that we’ve done an awesome job so we can come back over here and refresh this and see our Header in action. There is the “Rick Anderson Architects Demonstration Site for Professional Services Company”. That’s what it looks like when it’s the right size.

What does it look like when it’s not the right size? Well, first off let’s remove the Header Image, we hover over that red thing, button that showed up there. Now let’s select the one that’s smaller. Notice, it’s really less than half of the size of the other one, it’s just the “Rick Anderson Architects” and what’s going to happen is, it’s just going to make this image go float to the left.

If we come back over and refresh this, it’s just here at the left and the rest of the space is blank and that can be just fine, right? That can be what you want to do with your header image.

HTML Scaling of Images

The alternative is what happens if it’s too big? We’re going to remove the image now by clicking on that link. We’re going to select the Header Image, the one that’s too long and quite a bit longer than the original, 500 pixels longer than the original ones. If we come over and take a look at it, you can see what it has done. It shrunk the image down so that it’s no more than 1012 pixels.

You may or may not be able to tell this but this is a little fuzzier than it used to be. One of the reasons is that, HTML scaling of images is not entirely satisfactory especially when you’re talking about text. Really, the best thing to do is to create that image the right size rather than allowing it to be too large and then letting Thesis scale it down because Thesis Theme uses standard HTML to scale it down and that is not the most satisfactory thing especially with text.

Let’s go ahead and remove that image and put the image in that’s the right size. Refresh and here we go, we’ve got our Header in at the right size.

Clickable Header Image

In order for the header image to be clickable, you have to make sure that you have a “Settings” set a specific way that is back under Thesis Design Options. You have to make sure that under Header, you have checked, “Show site name in header”. If you uncheck that, you won’t be able to click on this to go back to the Homepage.

Right now, if you click on this image, it’ll take you back to the Homepage but if we uncheck that and refresh this, you can see it’s no longer clickable. If you don’t want your header to be clickable, that’s fine, then you can leave that unchecked but most of you want the Header Image to be clickable so you need to say, “Show site name in Header”.

Site Name and Header means that you actually want the text for this Site Name in the Header but it’s probably a little less than perfectly self-explanatory but nevertheless, that’s what you do. Make sure that that is checked. If that is checked, this logo image that you insert using the Thesis Header Image function will remain clickable.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment