In this session we troubleshoot header images in the Agility Skin for Thesis 2 by checking the options for typical header and find that the header image URL doesn’t resolve because it no longer exists. We show how to replace that with the new image and give the background image a size so that it only fills the space available.
Member: So I’m very new to all this but I’m enjoying your course really so much, it’s helping me a lot. I managed to put a header image in and I’m a little puzzled because I set in the size that I thought would be narrow enough but the bottom portion of the header seems to be cut off or it’s covered over by some white.
Rick: Can you give me a URL?
Member: Well, I don’t know if it’s live. If you can see my desktop, I have it up on my desktop right now.
Rick: Sure. Okay, let’s see.
Member: I actually have two monitors set up.
Rick: So I’m going to make you the presenter.
Rick: So all you have to do is say, share your screen and we’ll be able to see it.
Member: Okay, I clicked that.
Member: Okay. Now, I have two monitors set up, can you see the screen that has the…
Rick: I see the one that has the GoToWebinar browser window. Yes, that’s what I see.
Member: Okay. Do I have to put my site in the same window as the GoToWebinar browser?
Rick: Well, let’s see, you may be able to choose the screen to share.
Member: Because I have the GoToWebinar browser and my site in two different windows.
Rick: Yes, why don’t you go ahead and move your site over to the other one, just drag it over.
Member: Okay. Let’s see if that works, does that work now? Do you see it yet?
Rick: Yes, that’s good. Yes.
Member: Okay, good. There we go. So here’s my header and I can show you in the Media Library but right down here, I have a sort of a tagline, it’s part of the image and that’s being covered over by white or it’s just not apparent and I increased the margin and the padding and that wasn’t originally that wide but I got it to be that wide by messing around with the padding and the margins, however, the little typing that’s part of the image still isn’t showing. Would you like to go to the Media Library and see what that image looks like?
Rick: Yes, okay.
Member: Okay, so let’s see, so that’s what I want to have shown, this little line of text. That’s just all part of an image and it’s 733×220.
Rick: Okay, so it would be helpful to me if you would go over to Thesis and just activate the skin that you’re working on right now so go to skins and let’s activate the current skin.
Member: Go to Thesis.
Rick: It’s going to be way easy for me to tell what’s going on, select skin.
Member: Select skin, okay.
Rick: And then right now, you’re previewing it so just activate it.
Member: Right here?
Rick: Yes. Now you are going to want to also update your Thesis Classic because it’s up to version 1.0.3 now and it definitely is going to want to be updated but we’ll come back to that.
Member: Alright, okay.
Rick: Okay, so I’m going to take over as the presenter here for a second and refresh that page, okay. So then, I’m just going to inspect this for a second, header area, page wrapper.
Member: Wait a minute, I’m not seeing what you’re doing. Okay, I think I’m with you now.
Rick: Okay, so your first problem and this is probably your big problem actually, is making this image a background of header area.
Rick: Now, did you want this to be clickable or are you putting something over the top of this?
Member: No, I wasn’t going to put anything over. I was just going to have that be the main header for the whole site on all the pages and then I was going to have a widget over here that signup for my newsletter. I have a 3 quarters, 1 quarter kind of setup.
Rick: Right, so the thing to do then is to add this header image to your header left column.
Member: To the header left column, okay so I put it in the wrong place, right?
Rick: Well yes, you made it a background image of header area, however, the Agility header columns has the ability for you to insert the image directly into it so I’m going to make you the presenter again here for a second.
Member: Okay, alright. So, where do we go to do that?
Rick: Okay, well you need to share your screen.
Member: I’m not seeing that dialog box, here it comes, there we go.
Rick: Okay, so now go over to the Skin Editor and then open up the header area.
Member: On the front page?
Rick: Yes but what you do right now is going to affect every page.
Member: Everything, okay.
Rick: Open up Header Area Page and then go to the options for Typical Header.
Rick: And so you’ve got two columns, 3 quarters and 1 quarter. Okay, so the problem is then that the header image you’ve put down there below doesn’t resolve because you’ve got this configured correctly, there’s just a problem with that URL.
Member: Okay, so I took the URL out of the Media Library, should I try that again?
Rick: Yes, you should try that again.
Rick: No, no I see, what you put in there was a logo, a transparent image or something like that, right?
Member: Say that again, I’m sorry.
Rick: Well, I think the image that you reference here doesn’t exist anymore, it’s called logo-transparent-320px?
Member: Right, I did delete that one.
Rick: Yes, so that’s why that one is not showing up there but what you want to do is you want to pick the real one you want to use so go ahead and do that.
Member: So okay, I’m going to go over here, go to the Media Library, this is the one I want to use.
Member: Okay, take this URL, copy, alright and now, come back over to Thesis Skin Editor. Alright, so down here I need to replace?
Rick: Yes with your new image, there you go.
Member: There we go.
Rick: Go ahead and close that and save the template.
Member: Close, save okay, view site, okay now we’ve got two.
Rick: Right so you’ve got your header image now in there where it belongs and so the next thing to get rid of that background image. So go back to your Skin Editor and we’ll remove the background image from that. Okay, go to the CSS and then once you’re there, on the righthand side, there is that header area package, no, you already have one created so it’s directly below page wrapper.
Member: This one right here?
Rick: Yes, that’s where you put it. So click on that, go over to background and delete it.
Rick: See, the thing is that background images don’t actually have any size so they will expand to fill the space that’s available to them.
Rick: But if the space isn’t as big as the image is, then the image will be cut off because unlike this kind of image which…
Member: So that place would be where I would put an image if I wanted a background image that was way all around here then.
Rick: Yes. Right, exactly.
Rick: Now, it looks to me like it’s a little off center, did you plan on a big white space on the left there?
Member: No, I think this is because I was in my efforts to make this show, I increased margins and I increased padding.
Rick: I see, okay.
Member: So I’m going to have to go back and change all that back to a more reasonable size so I think I can do that.
Rick: Sure, okay.