Build Your Own Business Website header image

Add a Large Clickable Image to the Thesis 2 Classic Skin Header

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 large clickable image to the Thesis 2 Classic skin header by making it an actual HTML image, placing it inside of a text box and dragging it into the header.

Video Transcript

Member: It basically, the header area box, it’s in Thesis Classic is so small and I would just like to make it bigger so it has the whole picture in it.

Rick: What’s the URL?

Member: It’s eclecticwinecellars so I’ll take it for you.

Rick: eclecticwinecellars?

Member: Yeah.

Rick: Okay. So what you tried to do is to make it a background image of the header. My recommendation would be instead to make it an actual HTML image sticking inside of a text box and drag it into the header instead.

Member: Okay.

Rick: So for example, we’re just going to do this as an example here. So I’m going to go to my skins and I’m going to activate Thesis Classic and then go to the Skin Editor, okay. And then let’s see what I have in my Media Library. Okay, well let’s just pretend  for a moment that this image here is a header image that I want to include on my header. Obviously it isn’t but we’ll pretend it is and so it’s in Media Library and I’m copying its URL right here and then with that, I come over to my Pages and I always have a Sandbox page that I use for this purpose and I just select Edit and I’m going to delete all the miscellaneous stuff here now but I’m going to Add Media and let’s see, what image was it? Let’s see, if I do full size, it’s 950×320 okay so that’s what I’m going to do. I’m going to insert that, I’m going to link it to my home page so I’m going to do that but then I’m going to… That’s fine, we can leave it there. Alignment of none and the title will be, “Go back to our home page” and insert it into the page. Okay, with that inserted into the page, I’m just going to come back to the link here and get rid of the attachment so that the link actually just goes directly to lesson3.responsiveskin.com and then I’m just going to copy this little piece of HTML, come back over to the Thesis Skin Editor, add a text box, we’ll call it Header Image, add the box, I’m going to drag that box up into the header and then open it and paste that HTML there, we’ll call it header_image for the class. Actually, you know what, we don’t need any HTML wrapper around this at all, we won’t put an HTML wrapper in there, we’re just going to put the link there and then I’m going to drag Title and Tagline out so now it’s just the Header Image, come on. And I think I’ll drag the Nav Menu down below the Header Image, save the template and if this were a header image, there it is sitting inside my header.

Member: Okay. The one part that I got confused about was when you’re making the HTML to put in the text box, you just use the regular URL or did you change it?

Rick: Well, are you comfortable with HTML?

Member: Oh, no.

Rick: Okay. You know, when you insert media, that insertion down here gives you a chance to insert a link to it. Now, it automatically links to its attachment page but you could easily say, “Link to none” which is what you generally ought to do inside of a post or you could link it to a custom URL at which point you would type it in. It’s easier for my standpoint since I want to go to the home page, just to go ahead and accept the attachment URL because I can just go in here and change it so then I just insert it in the page and then what I do is, here’s the link and I just took out the part of the link that wouldn’t take you to the home page. So the link is lesson3.responsiveskin.com.

Member: But if I just did “None” then I wouldn’t have to do that?

Rick: Well, if you just did “None”, you wouldn’t have to do that but somebody clicking on the image wouldn’t go back to your home page.

Member: I don’t need to make it a clickable image, I just need it to be up there, you know what I mean?

Rick: Okay, but the only difference between it being clickable and not is you selecting the URL and you could easily just type your home page URL in there as well.

Member: Okay.

Rick: Right? Just type in eclecticwinecellars.com I mean, I would definitely. People are going to expect it to be clickable so I’d make it clickable.

Member: Okay, so you’re basically saying just scrap the way I was doing it and just put text blocks in there and put the picture in there and that’s fine.

Rick: Yes.

Member: So then my other question is, I think I can handle that because I did do a bunch of clickable images today, I was very proud of myself without your help so…

0 Comments… add one

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

Leave a Comment