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 9 – Question and Answer

Difficulty Level -

That wraps up the material that I have to present today. Now I want to take questions.

And I’m going to start off with David Carnavale. Good morning, David. I’ve just unmuted your microphone.

David: Yes you did, Rick. Good morning.

Rick: Good morning. So you had a couple of questions for me.

Upgrading from Agility 1.0.1 to 1.0.2

David: Yeah I did. It’s sort of interesting that being a dumb user, I just overwrote, I guess, the version 1 with your version 1.02 and it seemed to work.

Rick: When you say overwrote, you mean… what do you mean by that?

David: I did not use the process you did. So you outlined a very good and safe process to make sure that things didn’t get messed up. I did back up my data but I didn’t delete the old version. I just uploaded the new version and it actually seemed to take.

Rick: With the upload button?

David: Yeah… which was really strange.

Rick: Oh you know, I didn’t know it would do that.

David: You should try it on something simple so you don’t mess up stuff you’ve done. But it didn’t like the hidden feature.

Rick: Let’s just go back to last week’s lesson, T7227. Where is it? Okay, hang on, try that again. T2 Lesson 7. Okay so we’re using 1.0. We’re going to choose a file and I’ve got that in my downloads folder. Did I organize this by date? I did, okay so there it is. Just open it up, add the skin. See, mine says the skin already exists.

David: Yeah, that’s… what was interesting is I have no idea… because that happened when I tried to repeat what I did. I have no idea. Maybe I just deactivated the skin and left it there. Anyway, I can’t retrace my steps because I… through the course of the lesson, did exactly what you suggested so it’s gone now. So it’s the right way.

Rick: Okay well let’s try that. I have now activated Thesis Classic and let’s try uploading a skin.

David: It shouldn’t allow you to do that.

Rick: Well, it’s true. It shouldn’t allow you to do it although it might be a feature. No, I’m serious. It’s always a possibility. Okay, select a file.

David: It’s interesting.

Rick: Waiting for Ajax to refresh is what’s happening there. Choose the file, we’ll do that one more time. Yeah.

David: Yeah so it could be because I’m on a Mac and using different stuff. But anyway, you suggested the right way and everybody should do it your way.

Rick: Yeah okay. So…

David: Sorry.

Rick: Well, I’m glad it worked though. I mean, it’s way better when it works than when it doesn’t.

David: Yes.

Rick: Okay.

Can We Add a Gradient in the Menu?

David: And so the second question is can we put a gradient in the menu? And if so, how do we do it? I know there are sites where you can go to where you can get all of the code for a gradient. Can you apply that to the menu so the menu bar looks slightly curved?

Rick: You could do that. So a specific site here would be… and this is not necessarily a real beginner’s task although it’s not particularly difficult. But a site would be… let’s see, it’s Colorzilla.

David: Yeah, that’s the one I use.

Rick: And the CSS3 Gradient Generator and I’m just going to make it a simple gradient. We’ll reverse the orientation. Where is that reverse? Okay so light top, dark at the bottom and copy that. Then you can come over to your css and say in your top menu area, you could go to options and let’s just get rid of the background first. That’s BC1 and then under additional css, you could paste that.

Let’s just paste it for a second here. You’d still need to use the correct selector. So it would be top menu area and then opening parenthesis and then come down to the bottom and closing parenthesis and hit save. Let’s see, let’s save the css then. Oh, wrong lesson. Not yet, what happened there? Top menu area, options, background… background color’s not there anymore. Additional css, top menu area. Oh I lost my… oh, I closed that out in the wrong spot so it fails. Close it out the right spot…

David: This is all still better than…

Rick: Yeah it is. Okay so now you’ve got the color there. Now you could go through and make these things, this background color transparent so that shows up. It’s a little bit more difficult to do the same thing here for the menu itself. But it’s relatively easy to make… I mean, what I would do actually, if I was in your situation, would be to… that is going to be… yeah, menu a. You know, I would probably just turn the color off myself.

David: What would you have to go through… out of each one?

Rick: Yeah. But go to top menu, go to link settings, go to link and instead of background color, you just say transparent. Oh because it also has it as a background of… well no, that should be working. That’s what you want to have happen, you want to have this background color to go away. And let’s see, menu background color… so if we come back over to our top menu, link settings, links… oh there we go. I have a little piece of custom code in here for the purpose of making the menu bar extend all the way across which is not part of Thesis. And so now you can put like a solid blue color in there if you wanted or something like that you know, for hover.

David: Sure. No, that’s great. Thank you so much.

Rick: Anything else?

David: Not for today. I’m great.

Rick: Okay great. You have a great day.

David: Thanks Rick.

Rick: Bye bye.

Can You Make the Front Page the Parent for Pages?

Okay so let’s see, next up is John Greg. Good morning, John. I’ve just unmuted your microphone.

John: Oh hi, Rick. Yeah so a couple of questions. Can you make the front page the parent for the pages?

Rick: No.

John: So they sort of follow the same… so in other words, if I design the front page and it’s looking how I want it, can I make it the parent of the page so that I don’t have to kind of redesign them? Or is it just a matter of copying what I’ve got on the front page into a page… I’m sorry, into a parent page and then it becomes the… then everything that’s underneath that… the child pages will then follow it?

Rick: Yeah, let me show you what you could do here. I’m going to create a new backup over IM here so pre mix up. You can’t actually change the parent child relationship. However, you can, without a lot of difficulty, you can nevertheless, do what you want to do though because what you can do then is come over to the page template and then select this copy from template and copy from the front page.

John: Alright, got it. Yeah.

Rick: And copy the template. Now this is going to destroy anything you’ve done on a page.

John: Right. Okay.

Rick: But now, your page template is the same as your front template. Now the chances are, you do not want your single template, your post, your home template or your archive templates to be the same as that though because those things generally contain a number of other things that are not on your page template like comments and comment response forms and all kinds of other stuff like that. So you’re not going to want to wholesale copy the front page template to everything else. But you certainly could do that with your regular pages because they often are… they can be identical.

John: It’s okay. But the home page is the blog page.

Rick: Right.

John: Yeah okay so then I need to design… can I… is it easy to copy elements from the front page into the home page?

Rick: Well, every element that you’ve created on the front page, if it’s not on the home page, it’s sitting over here on this box on the right.

John: Okay so then it’s just a matter of dragging it across.

Rick: Exactly.

John: Okay alright.

Rick: That’s the way these boxes are. Every box you create is either on a template or in the side over here.

John: Right, okay. So once it’s created, it’s going to sit there as a resource.

Rick: Right.

Making Changes to the Menu Styling

John: One of the things I’ve… well, it’s two questions. One is that can you… the menu style is obviously, at the moment, a box basically. Can you round them off and have them you know, a bit like the buttons on the page there? I mean, can you make them different or do they… are you limited to them being square?

Rick: No, you’re not limited to them being square but Thesis doesn’t have anything out of the box for you to make them round. And so at the moment, you have to do that using your own handwritten css. Now that’s not going to always…

John: You say css or is it… would you need to… okay.

Rick: It’s css. It’s not HTML, it’s css. And so you could come over here and go to your additional css and let’s see… what was that? That was BC1. I just want to get back to this for a second, if you don’t mind, get back to where I was. Save and then what else did I do here? Link settings, links, background color was BC1. Okay, back to my normal looking… not quite. And then my top menu area, background color was BC1. Okay so back to where we were.

Now yes, you could apply styles to these that would do it differently. So the way the menu currently works is that menu a is the selector that gets the color and yeah, menu a gets the color and menu LI… menu item, I think. I suppose, probably, that’s what you would do here is use the menu item class for that. So you come back over to your top menu and actually, you don’t have to do it there. You can do this in custom css if it’s easier for you and say you know, top menu area and then menu item. And then say margin left: 10px so you separate them a little bit. And then border radius 5px. Let’s just make it 10px, looks more pronounced.

Okay so there’s a little piece of css, custom css that will or should make these buttons round although at the moment, you’re not going to see that very well because they’re the same color as our background. Oh, it didn’t do it though. Let’s refresh that one more time.

Okay border radius 10 pixels. So that actually is happening but it’s not really where it should be. So what… it probably needs to be a .menu item. No, that’s not it either. You have to get the selector right, obviously. So let’s just say top menu item a and for the moment, let’s make the color different so you can actually see it. So see now your buttons are rounded.

So you can do that kind of thing by writing your own css. I am planning on creating packages for doing this kind of styling but I am not there yet.

John: Okay great. That’s brilliant.

Rick: Okay, anything else?

BlueHost’s Great Service

John: Yeah, just to say that Bluehost has been great. I had… somebody was looking after my website, I suppose, as a subservice provider on HostGator. So I wasn’t really managing it. I’m supposed to be backing it up… well, not so recently but fairly recently. And there was some problem at HostGator. My site was taken down and lost completely. And the person who I’ve been working with took the file that I’ve got because they didn’t have one and loaded it somewhere else in another host. And it’s not really running too well so I’ve decided just to take the file that I’ve had and go to Bluehost with it. And they really helped me out a lot, I must say. And although it’s… I’ve lost of the settings and everything, basically, my site’s you know, I’ve not lost everything. So given that I was upgrading it from 1.85 to 2, it’s probably not a complete disaster. But they’ve been really good. You can ring them and they’ll talk to you.

Rick: Exactly, yeah. That is very nice, isn’t it? I would encourage you not to wait for the thing I’m teaching about this. But to… since you already actually have a site, to go watch the seminar that I did recently on backing up and restoring. The seminar is down under Plugin Seminars so it’s down sort of towards the bottom. But it’s Backup, Restore, Clone and Migrate with Backup Buddy. This is the right way to handle those kinds of things. And by the time we get done with this class, I mean, on Lesson 14, we go through how to set up backups and that kind of stuff. But since you’ve already experienced problems, I would expeditiously watch this seminar and implement the stuff that I teach there so that you’re capable of recovering from errors easily. It’s… this Backup Buddy works very nicely on Bluehost and if you’d like a you know, if you’d like an evaluation copy for you to use and test out before you buy, just let me know and I’ll email you one. So send me an email.

John: Okay. Yeah, it would be great if you can do that, if you can send that to me. That’ll be great.

Rick: So send me an email asking though because I’m going to forget otherwise.

John: Yeah okay, I’ll do that.

Backing Up Skin Data

Rick: But I strongly encourage you to do that. Now you asked that question in the context of me backing up the skin data, right?

John: Yeah yeah, no. From what I… you were just showing it. I thought it was happening automatically. But no, you have to do it and you gave it a title and…

Rick: And it’s just the skin data too, right? It’s nothing else. So this is not really… I mean, this is a backup with a very small b, right? It’s just backing up…

John: If you couldn’t get on to your site then that backup wouldn’t do you any good anyway so…

Rick: No, which is why I had you export it. Once you made the backup then you exported it so you have a physical copy of it.

John: Right.

Rick: Okay. Anything else?

John: That’s pretty good for now, I think.

Rick: Okay.

John: Yeah. I think then I just need to get on with what I’m doing and I’ll have lots more questions.

Rick: Perfect, okay.

John: Well, thanks Rick. Thanks a lot.

Rick: You betcha. Good. Talk to you later, bye bye.

Setting the Menu Height

Okay next up is Sandy. And Elizabeth, don’t leave yet because I’m definitely going to help you solve that error. So don’t leave yet but… hi Sandy.

Sandy: Hey Rick, how are you?

Rick: I’m doing well. How are you?

Sandy: Good. I got a little bit lost during the whole menu part of it and I can’t seem to get the menu to be the right height. I’ve been playing while you guys have been talking but I’m still not there yet. I’m kind of confused between when I put padding in the header, when I put it in the menu… top menu area or otherwise. I’m lost.

Rick: Okay so why don’t I make you the presenter and so we just look over your shoulder then.

Sandy: Okay. Screen…

Rick: Yeah so all you have to do is share your screen. We’ll see it.

Sandy: Okay, did that do it?

Rick: Yeah.

Sandy: Okay so this is where I’m at right now.

Rick: So you’ve added padding… you’ve added top padding to your top menu area or you’ve added top padding to your menu, one of the two.

Sandy: I’m not sure. I’ve just been playing so I’m really lost now.

Rick: But were you trying to do what I was doing?

Sandy: Yeah. I was trying to make it look like your… oops, that’s not the one… your demonstration site there.

Rick: Okay so go ahead and let’s go back to the menu package, the top menu package that you were styling.

Sandy: So the top menu, not top menu area, right here?

Rick: Yeah, the top menu package, right. Oh actually, you know what? Yeah, go to the top menu right first. Let’s just look at that. Then go to options and open up menu item padding. Yeah so you’ve got… you put 40 pixels of top padding in there. Take that back down to 10 and hit save.

Sandy: Okay and then save css?

Rick: Yeah and then let’s take a look at it.

Sandy: I think that’s it there. Well, I was there once too and then I got confused again.

Rick: Okay so now go back and show me your top menu area.

Sandy: Okay so this one? Okay right and then options?

Rick: Yup and then go down… scroll down to padding and margin. Okay, show me additional css for a second. Okay go ahead and hit cancel.

Sandy: Okay.

Rick: Show me your page again. This is byob class custom websites Olympia. I’m going to go look it up myself for just a second. So, okay so… you know, the crazy thing is… oh okay, I know what’s going on now. I’m sorry, I’m just having a hard time visualizing what was happening there. So now go back and open up your header area.

Sandy: In here? This one?

Rick: Yeah and give yourself 25 or 27 pixels of bottom margin or bottom padding, I mean.

Sandy: And how much?

Rick: 27 bottom.

Sandy: Okay.

Rick: Hit save and go look at it again.

Changing the Background Area of the Menu

Sandy: There we go, that’s better. And then this area back here, I needed to change the background to the green, right? Over here in the top header area?

Rick: You can change the background color. Now what I did was change the variable. So I changed the color and the variable.

Sandy: Okay so you went… and that’s in the top menu area, that’s where that top background color goes, correct?

Rick: Yeah but look at the… the top menu area, I think, has a variable bc1.

Sandy: Where do I find that in there?

Rick: Scroll up a little higher. You’re down too low. There you go, background.

Sandy: Backgrounds, got it. Okay oh yeah, right. And so then you changed it in the variable down there, right?

Rick: Right. I changed BC1 to the green color and then everything that has BC1 becomes green.

Sandy: Okay so then I go down to BC1. Woah, it’s way down there.

Rick: Yeah, it’s down there at the bottom.

Sandy: Okay and then just change that right there, right? Okay and then back in there again and then refresh. I got lost, sorry. Okay, got it. And then I caught up with you once you’re down here and I figured out the whole footer issue. I got that so okay. I think I’m caught up with you now.

Rick: Excellent, okay. You have a great day.

Sandy: Alright, thanks. You too, Rick.

Rick: Bye bye.

I Can’t Access My Website or Dashboard

Alright, I have to make myself the presenter. Okay, so now we’re going to talk to Elizabeth here. And Elizabeth, I’m going to unmute your microphone if I can find it… there we go. Okay, good morning Elizabeth.

Elizabeth: Good morning.

Rick: So you uploaded Agility Nude and now you can’t access your website or your dashboard.

Elizabeth: Correct.

Rick: So do you have Filezilla set up for your computer, I mean, for your website?

Elizabeth: I do not have it set up. I have Filezilla.

Rick: So do you have any kind of ftp set up to get to your site?

Elizabeth: Well, I mean, I didn’t upload it that way, in that fashion so…

Rick: I know but if you can’t get in to your dashboard, that’s how you have to fix it.

Elizabeth: I know but I’m telling you, I do have Filezilla and I also have another one called…

Rick: Okay so are you comfortable setting it up so that it connects to your website?

Elizabeth: Let me… I prefer using a different one. For some reason, Filezilla doesn’t always work on my PC.

Rick: No, that’s fine. While you’re setting up that connection though, I’m going to go answer a different question, okay?

Elizabeth: Sure, no problem.

Rick: So get your ftp set up so that you can connect with that website and then we’ll come back and fix this.

Elizabeth: You got it.

Rick: Okay.

Specify Height of a Widget and Image Issues

Okay so Yvonne is next up. Good morning, Yvonne. I’ve just unmuted your microphone.

Yvonne: Good morning. How are you doing, Rick?

Rick: I’m doing well. How are you?

Yvonne: Great.

Rick: Good. So you want to do what?

Yvonne: Okay we have a situation where we built in a special type of menu that is built into a widget box so it’s on the left sidebar. And the problem is that we don’t… I mean you know, widgets usually collapse to the size of the text that they contain. And what we wanted to do was be able to vertically specify the height of the widget box so that it stays to a particular height. We were able to create something like that where it was specifically set up to be a certain number of pixels you know, in height, but I was wondering, is there a way you can specify that based on page… percentage of page instead of using pixels?

Rick: Well, it’s not going to be percentage of page. It’s going to be percentage of container. So chances are, your container isn’t your whole page. If it is… if the container is the whole page, sure. But whatever div is wrapping this widget is going to control the percentage. So if you say that you want the widget to be 50% tall then it’s going to be 50% the height of the container that it’s in.

Yvonne: Got it.

Rick: And so not the page. If it needs…

Yvonne: Well, the problem is we wanted it to be the height of the actual body content because the widget menu, the left sidebar menu, sits to the left of the main content on the page and we wanted it to actually run the entire length from top to bottom to coincide with that content is what we’re trying to do.

Rick: So under the header and above the footer but along the width of the content?

Yvonne: Along the height of the content, yes.

Rick: Along the height of the content. And how wide is the menu?

Yvonne: It’s about 200, I think.

Rick: Are you trying to use Agility to do that or are you doing this with Thesis Classic or what are you using?

Yvonne: Well originally, we were using Thesis Classic but we’re actually translating over. And so I’ve been following your classes and I was trying to figure out if there’s a way that we can do it that makes sense. So that widget, it runs the entire height, as you said, from just under the header to just above the footer.

Rick: And…

Yvonne: I mean, the reason we’re doing it that way rather than just doing it as a background or something is because it has rounded edges. And so we wanted to you know, the way we set up widget, it has rounded edges on the 4 corners and we just wanted it to run from top to bottom to give a… because if you take it out and it just contains the menu text, it looks kind of dorky when you get below it because there’s kind of this big, white space over there. And it actually helps to bracket the main body content by having this you know, bar down the left hand side.

Rick: Well, so you’re just talking about a background color or background image. When you say you want something to go from top to bottom, that’s really all you’re talking about. It’s just some kind of texture that sits behind the menu. You’re not trying to change the physical dimensions of the menu. You just want to get…

Yvonne: Well, yes and no. I mean, the problem is, if you just do it as a background, it ends up as a rectangular background in the container and it doesn’t really…

Rick: Well, it doesn’t necessarily have to do that. It just…

Yvonne: Well that’s… I don’t how to do it otherwise so that’s why I’m asking is if there’s a way to do it that you know, can make it better then that would be cool.

Rick: Well, CSS3 gives you the opportunity to use multiple background images in the same container. And so what you would do then is define… you’d take the container, in this case, it would be the content and you would have 3 background images for it. One of them is the top, one of them is the bottom and the other one is the repeating one in between. And you would just specify all 3 of those background images inside of the container rather than having one background image.

Yvonne: Okay, I was glad… I was hoping you were going to tell me that. That’s exactly what I was looking for. Okay go ahead.

Rick: Yeah it is really much easier. And actually, if you search… let’s see, I think I already have a video demonstrating how to do that. Obviously, you’re going to have to write the code, right?

Yvonne: Right, exactly. I have no problem with that. I’m a programmer.

Rick: But the… where’s my… okay. Let’s go back to BYOB Website then. Let’s see, search for multiple background images. Yeah, actually this is a good example. This is in the class that I just finished teaching yesterday, in Lesson 4. I have sample code in the practice files and everything for using the multiple background images in the same container. In this case, we have… they layer over the top of each other so one background image is a texture. And then there’s a shadow background image that sits over the top of that. And so one of them repeats and one of them is in a fixed position and all the rest of that stuff.

So this Lesson 4 of the Responsive Skin Class.

Yvonne: Got it.

Rick: Part 4, I think, is the one. But you just kind of look it over for you know, and see what the different parts are. But really, it does look like Lesson 4 Part 4 is the one that shows the code for the multiple background images.

Yvonne: And will this work for any container? Like for instance, one of the things that we’ve run into is my page has rounded corners in its normal styling. And what I was looking for while I was.. you know, for instance when we do the header or the footer, what we’ve previously done because we were able to do a replication of you know, a cross for the background because of the rounded corners. We put in a slice on one end and a slice on the other and then replicate it between them with the vertical slice that was rectangular. And is this the kind of thing I can do with this as well?

Rick: Yeah it is. If I make you the presenter, can you show me an example of what you’re talking about?

Yvonne: I can show you what it looks like.

Rick: Yeah, that’s what I mean.

Yvonne: Yeah.

Rick: Yeah okay.

Yvonne: Yeah well give me a second to pull it up quick and then I’ll pull the…

Rick: Okay while you’re pulling it up, I’m going to switch gears for just a second and go back to Elizabeth.

Yvonne: Okay.

I Can’t Access My Website or Dashboard Continued

Rick: Elizabeth, I’ve just unmuted your microphone. I noticed in the comments, you said that you can’t get into it via ftp.

Elizabeth: No. It’s giving me this… a similar error, some kind of coding…

Rick: So this doesn’t have anything to do with your installation of Agility. The problem just coincided then and you’ll need to call your host and see what’s going on. Who is your host?

Elizabeth: Bluehost.

Rick: Yeah you know, Bluehost has had some problems the last couple of weeks. And you know, most of my training materials are hosted on Bluehost and the training class, the class that I was teaching yesterday, the site that I was teaching it on went down just before the lesson. And I was afraid I was going to have to cancel yesterday class because you know, that Bluehost server was done. But it came up just in the nick of time.

Elizabeth: Yeah, it actually booted down the lesson yesterday.

Rick: Yeah well, I would call them and tell them this because this doesn’t really have anything to do with what you did then. This is just… if it was the kind of problem I thought it was, it wouldn’t affect your ability to access your hosting account via ftp.

Elizabeth: Yeah, I went to my URL and it definitely uploaded the new skin because unfortunately, it didn’t save all of my changes that I made. So I went back to the colors that come with Agility Nude. So that’s how I knew it took but for whatever reason, it’s not letting me get to my dashboard and it’s a big problem.

Rick: I’m almost certain that this is… that Bluehost is having a problem with the server and it doesn’t really have anything to do with what you’re doing. But I would call Bluehost to see. And the way you fix this is simply to… let’s just say that there was a problem with the installation of Agility. The way you fix it is to go into wp content, Thesis skins and delete the Agility folder, Agility Nude folder. And when you do that…

Elizabeth: I’m sorry.

Rick: When you do that, you take out any code that could be causing the problem.

Elizabeth: Okay, I’m sorry. What was that location again? Wp content…

Rick: Thesis, Skins.

Elizabeth: Okay. And that’s where?

Rick: Well, that’s in the.. wp content is in the root of your domain.

Elizabeth: Okay.

Rick: So if you’re… if it’s… if your domain name is and you’re at Bluehost then the wp content sits inside of public html.

Elizabeth: Got it, okay.

Rick: Okay?

Elizabeth: Got it.

Rick: Okay. Good luck.

Elizabeth: Thank you.

Rick: You bet.

Specify Height of a Widget and Image Issues Continued

Okay let’s see, let’s go back to Yvonne. Okay Yvonne, you ready to show us the picture?

Yvonne: Yeah.

Rick: Okay, I’m going to make you the presenter.

Yvonne: Okay, can you see it?

Rick: Yes.

Yvonne: Alright. So as you noticed on the corners up here you know, I have rounded corners on the page. And then this widget is the menu for this section and we manually set it to be this size. But I would like it to be able to… because it’s static, in some pages, it’s too short. In some pages, it’s too long, etc. I’d like it to be able to correlate to what’s in this section in some way.

Rick: So for the top and bottom, you just make those background images of the header area and the… or actually, because you’re putting the menu up there… well, you would make that rounded corner a background image of whatever your top area is. So if it’s the… so if you’ve got a second menu area up there like that… so if your header area is probably the thing that says… well actually, in this case, you could easily take… delete the top menu area and put the top menu inside of the header area, above the column and then put that top top menu you know, directly on top of that. And make your background image have the rounded corners and put that as the background image of your header area.

Yvonne: Well currently, this is a static image. It sits in the background. It is the entire width of the header and the height of the header. And you know, it’s fine but it’s just a big image that has to download when people do it. So that’s why I was looking to possibly… all this stuff here could be sitting on top of that background and if we just took a slice on the end down here and a slice on the end on the right and then a slice for the middle and then replicated the middle, first of all, I would cut down the download time. And then we’d just… with the new Thesis template or Thesis approach, just replicate those slices across rather than having to use this big old you know, hunkin’ image.

Rick: Well now there’s two things to say about that. One is that I would probably do that image as a PNG. And as a PNG, it’s probably not going to be big because you have very few colors in it. So a PNG with very few colors, first off, the colors are very sharp and so there’s no ghosting or no funny you know… and it’s just a very sharp, crisp color. And secondly, with limited numbers of colors in the image, it doesn’t really matter how big the image is because PNGs don’t necessarily get larger when the image gets larger. The PNG…

Yvonne: I wasn’t aware of that. Thank you.

Rick: The PNG gets larger when the number of colors gets larger. And so this image has very few colors in it and I would just make it a one, solid PNG and let it stay a single image. And the reason is that the problem with slicing up an image is that you trade off the size with the number of images. And so what the big boys do is combine all of their images into one big image and then just display pieces of that one big image.

Yvonne: Got it.

Rick: It’s called an image sprite. And in this case, if that was a not a jpeg but was instead a png, it would be smaller and it probably… the one png will probably load faster than 3 smaller images.

Yvonne: Okay. That works.

Rick: So I would do that. Now you could actually create the… you know, have the only part of this thing be an image. I mean, it absolutely is the case because most of that is just background color. But I mean, you’re going to have a trade off between simplicity and…

Yvonne: Yeah, it’s not that big of a deal. It doesn’t bother me either way. It’s just that you know, a lot of my proteges in the techie world keep saying, “Why are doing this big hunk of image and stuff?” And so I was trying to use a simpler way with the slice. But you know, if you feel that that would really make much of a difference because of the trade off then I’m just as happy to leave it the way it is.

Rick: Well, what I would do is optimize it as a PNG. It’s probably going to be a smaller file size to keep it as a single image. That’s what I would do.

Yvonne: Yeah, I’ve been slowly transitioning over a lot of my images to be PNGs.

Rick: Well you know, some images… the thing is what you want to do is you want to pick the right image type for the situation. And you know, photographs should not be PNGs because they have way too many colors. They should be JPGs. But graphics like this should be either GIFs or PNGs and PNGs with very limited colors are smaller than GIFs with the same number of colors.

Yvonne: One question though, because the L on my logo is a gradient, it does have a lot of colors built into it. Does that matter or… because you didn’t say it was the number of colors, not so much the sizing of it.

Rick: Yeah, it’s true that there are a number of colors in there. But I don’t think that…. I mean, what I would do is just test it.

Yvonne: Okay so you don’t think it’s necessarily prohibited but it was best to just check it out and see what happens.

Rick: Yeah and what I would do when you do that is to set your PNG to say 128 colors and see what it looks like with 128 colors. And then… maybe you set it… maybe you take it down to 64 colors and increate the dithering. So it looks like it’s more colors but it’s not and play with those kinds of things until it looks the way you want it to look.

Yvonne: Got it.

Rick: And then see what your size is.

Yvonne: Okay, great.

Rick: Okay so that’s the header image but then now we’ll talk about your sidebar. The sidebar really is… now the dropshadow’s a little bit more difficult to manage. But it could be included in the image so you’d have a top image that would you know, go down to below the turn. You’d have a repeating image which is, say 20 pixels wide that would just you know, be a slice through there. And you’d have a bottom image, again, that was you know, just up through the turn. And then define each image… define those images as backgrounds of the content or rather than the sidebar.

Yvonne: Okay.

Rick: Because the… well, inside of Agility, it’s not the content either. Inside of Agility, it is… what would that be? Inside of Agility, it would be inside of the… I guess I would make it the background image of content area page wrapper. So you use content area as the id and then the class is page wrapper and make it that. And it will then… those images will always go from the top of the content area to the bottom of the content area regardless of how much content there is.

Yvonne: Cool. Alright, good.

Rick: Okay?

Yvonne: Thank you much, Rick. I appreciate it.

Rick: You’re welcome. Have a great day.

Yvonne: Have a great day.

Rick: Bye bye.

Yvonne: Bye.

Questions About the Agility Skin

Okay, make myself the presenter. And John asked, “Is the Agility a responsive skin?” Yes, it is a responsive skin. That’s one of the purposes for having created that like this.

And Elle asked did I create Agility Nude update and have people install it? Yes, Elle. We did create… there is a new version of Agility. It’s 1.02. You can download it from the site, from the same location you got it the first time. And the first thing you do is backup all of the… backup your skin data so that’s using the manager here and create a new backup. Here’s the one I did which was the pre upgrade. So create a backup of your skin data then you go back over to your skins and activate Thesis Classic and then delete Agility Nude. And then upload a new copy, the new copy of Agility Nude and activate it and everything should be fine.

And this video will be up on the site here you know, by Wednesday. So okay, Martin says he didn’t get Agility Nude from the site so just send me an email, Marcus or Martin and I will send you another copy of it. In the future, Agility Nude will have automatic updates and so you won’t actually have to do it this way. This is the Agility Nude 1.02 contains the ability to automatically update. And so when there’s a 1.03 comes out, you’ll be notified of it on your dashboard and you’ll just update it by clicking a button. But that’s not going to happen until you get 1.02 installed. So just send me an email, Martin.

And I think that’s it then. Let’s see, I don’t see any other questions. So everybody have a lovely day and we’ll be back again on Wednesday for Live Q&A sessions, Wednesday morning and Wednesday afternoon. If you encounter issues during the course of working on your website, you want to ask questions there, please feel free to show up and do so. And then we’ll be back in on Friday for Lesson 9 of this series. I look forward to chatting with you all again soon. Thanks a lot, bye bye.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
18 Comments… add one
18 comments… add one
  • Maxine Stephenson January 29, 2013, 7:47 pm

    Whew! So glad you explained the templates Rick! (Part 7). I really was somewhat confused about the front page and home page 🙂

  • JERRY MARSHALL July 8, 2013, 11:46 am

    In lesson 8 part 4 you used an image to create the background for the header. It was to two color image that was repeated resulting in the dark green strip across the page at the menu bar. How do I create simple images like this?

    • Rick Anderson July 11, 2013, 4:27 am

      Jerry, you need to use an image editor. I have videos on using both Adobe Elements and

  • Steve Youngblood October 7, 2013, 10:58 am

    Do you have a CSS cheat sheet for Agility and Thesis 2.1?

    • Rick Anderson October 8, 2013, 6:26 am

      Yes, it is on the Agility download page

      • Group218 December 1, 2013, 2:06 am

        Rick, I saw the cheat sheets on the Agility download page, but I’m wondering if you have a list of the pre-applied CSS Classes & ID’s that correspond with all the drop downs on the Skin Design page for 2.1… I want to use the tools you’ve built, but I don’t know how to tie the HTML to the options on the design page (like Extra Style 1 Background and Secondary Menu).

        • Rick Anderson December 4, 2013, 4:03 pm

          Group218 – I don’t have such a list – however you can inspect the element using Firefox or Chrome developer tools to see what’s what. That’s the professionals do.

  • Steve Mallett October 31, 2013, 9:47 am

    Lesson 8 Part 7 was a revelation! Now I understand what an Archive is. Not what I thought!

  • Tobias Laemmle December 4, 2013, 10:06 am

    I really have trouble following these videos. I’m using Thesis 2.1.4 and every option seems to be somewhere else than described in the videos.

    It would be really helpful to have a description where to find these options (add a menu to the footer, change the link and hoover color in the footer, etc.) in Thesis 2.1.4.

    Tobias L.

    • Rick Anderson December 4, 2013, 4:00 pm

      I’m sorry Tobias, there has been a change in Thesis since these videos were recorded. We will begin recording new ones as soon as WordPress 3.8 comes out. In the mean time, watch the Launch Party Videos and then the Beginner’s Guide to the Thesis 2.1 skin editor. Those will help you translate between the old and the new.

  • Timothy Hyde December 28, 2013, 10:47 pm

    Hi Rick, I’ve been rocking along up till now, but I’ll echo what Tobias said. Just got a bit difficult to follow with all the changes.

    Think I’ll do the Skin Editor series and come back.

    cheers Timothy

    • Rick Anderson December 29, 2013, 9:55 am

      Timothy, we’re working on the update right now.

    • Rick Anderson December 29, 2013, 9:58 am

      In the short term, if you have questions about the differences between the video and the new configuration, please ask.

  • Haiming Jiang January 16, 2014, 7:15 pm

    Hi Rick,

    Thank you for the excellent training. The only problem is that my thesis version is 2.1.6 and some options are different. I have figured out most of the option, but still can’t find where to select the footer menu in CSS editor after I have created it. There is no options to select footer menu in my site. Can you please help?

    Thanks a lot,

    • Rick Anderson January 18, 2014, 2:54 pm

      Haiming, which skin are you using? If you are using the Agility Skin you can find that setting under Skin Content. There is also a place to set colors and styles under Skin Design,

  • Jennifer Vowles February 11, 2014, 5:08 pm

    I am trying to change the bottom footer column 1 footer menu and click on settings for the footer menu it does not allow me a choice on menus. I am very confused. I had to create the footer menu as per your video but the footer menu is already there and I cannot change it. What to do?

Leave a Comment