Build Your Own Business Website header image

Thesis 2.0.1 How to Add a Clickable Header Image

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

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.

In this session we show how to add a clickable header image for Thesis theme 2 using a text box in the HTML editor. We also discuss how to make the image not clickable and how to create a different header image for other pages.

Video Transcript

Rick:  Okay well the background image isn’t there.

Member:  Okay.

Rick:  And which is fine actually because that’s really how you want to put in the image in there anyway. So go hit cancel. The way you really want to put a header image in is to use the text box. So go back to HTML.

Member:   Okay alright.

Rick:  And then scroll down to the… keep going down to the toolbox, yeah. So add a box…

Member:  And we’ll get a textbox?

Rick:  Yeah. So add type of box and you’re going to choose textbox. Okay and just call it header image and add the box. And then in a new browser window… actually yeah, let’s just drag it up there and drop it into the header.

Member:  Okay.

Rick:  And then in a new browser window, let’s open up a page. It doesn’t matter what page.

Member:  Okay.

Rick:  But I’m talking about on the admin side so edit a page or create a new page or something like that.

Member:  Oh you mean, over…

Rick:  Yeah. We’re going to create some HTML here, yeah.

Member:  Okay so add new?

Rick:  Add new page, yeah.

Member:  Okay, alright.

Rick:  And then down inside the content area, put your mouse inside the content area and then click upload insert and select that file. Do you have it already installed there someplace?

Member:  Well, I thought I did. Why wouldn’t it be here that’s in the…

Rick:  Because it’s a whole different storage location so pick it from your computer.

Member:  Alright.

Rick:  See the thing is that if you put it in css, it’s a background image and background images aren’t clickable.

Member:  Okay.

Rick:  So…

Member:  I’m trying to find the one I had just yesterday.

Rick:  It doesn’t really matter. Just pick one though because the point here is how to do it, not necessarily what you‘re doing with it.

Member:  Alright.

Rick:  So just grab any of those pictures.

Member:  Open. Oh, totally the wrong one.

Rick:  So now scroll down there and in the title, say go back to our home page.

Member:  Go back to our home page?

Rick:  Yeah.

Member:  Okay.

Rick:  That’ll be the text that shows up when somebody hovers over this.

Member:  Sure sure.

Rick:  And then under link URL down below, get rid of everything after Okay under alignment, select none and then choose full size and insert into post. Now copy that entire code. You don’t have to publish it. You’re just going to copy this code now and then go back over to the skin editor.

Member:  Okay.

Rick:  Yeah, click the gear for the header image.

Member:  Okay.

Rick:  And paste that and then save it. Just go up and save the template. And now you have a clickable header image in your header.

Member:  Oh, here’s the original one. What? I thought I had a black one, a black version of this one I uploaded just now. But this is…

Rick:  No, the thing is that WordPress chokes a little bit on transparent pngs. And so it sometimes shows the background as black instead of being transparent. That’s why it looked like it was black when it was doing that.

Member:  Not the original one because all this padding that’s going on here.

Rick:  Sure. But what you now know how to do though is you know how to take an image and make it into a clickable like using that text box.

Member:  Okay so if I don’t want it clickable, in this case I don’t, I’m just going to go ahead and upload it as a header image… header background.

Rick:  Well, you could do that but what I would do instead is just when you insert it, tell it that you don’t want there to be a link at all.

Member:  Okay.

Rick:  That’s a standard function of the image… insert image function.

Member:  Oh right, from the dialog box.

Rick:  Yeah, you just say you know, instead of image URL, link URL just say no link URL and then it’ll take that out entirely.

Member:  I gotcha. Alright so any reason why this weird thing is happening when this looks different on every other page?

Rick:  My guess is that you have something that is specific to the homepage happening there. And that… my guess is that there is a style associate with that home page that’s making it italic. I mean, we can go look at your css again if you want.

Member:  Well, I did go into here and then I tried to go like this and just copy this from say page.

Rick:  Yeah but you don’t want to do that with the home page.

Member:  You don’t.

Rick:  No, you don’t want to do that with the home page because if you do that then you’ve got to go back and reassemble the home page loop and everything else. So…

Member:  Now what if I want a different header on every other page than this one page? Because right now, obviously that lipstick and rouge is populating on every page and that’s just meant to her blog.

Rick:  Yeah so you just choose that header image box you know, change the name of it to blog header image and then make sure that it’s only on the blog page.

Member:  Okay. It seemed I wasn’t having luck with that before but I’ll…

Rick:  Well, go ahead and do it right now.

Member:  Okay so…

Rick:  Close your… go to the… yeah, open up your header right now, here now.

Member:  In Page? Okay.

Rick:  Because you don’t want it here, right?

Member:  Yeah, I don’t want it here. That’s correct.

Rick:  So close that though. You’re not looking at it there. What you want to do is there. See, it’s not there. It’s not on the page now and it won’t show up on the page.

Member:  Okay, okay. Oh yeah.

Rick:  We’ve only put it in one template. I don’t know what that template was but…

Member:  Right. I didn’t know where that… it was this. It was the blog. Okay.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one