Build Your Own Business Website header image

How to upgrade from Thesis 1.x to Thesis 2 Using the Thesis Classic Skin – Part 9 – Question and Answer

Difficulty Level -

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.

Rick: Peter, I’m going to unmute your microphone. Good afternoon Peter, I’ve just unmuted your microphone. Peter, are you there? Are you with me?

Peter: Hello

Rick: Hi Peter.

Peter: Hi.

Move the Sidebar to the Right

Rick: So you had a question about what to do with the left nav bar?

Peter: Yes. I want the sidebar left instead of right.

Rick: Okay. So the way you do that is just to choose the different skin modification. I’ll show you what that looks like, I’m going to go ahead and back this skin mode up. Let’s see, End of Session 1, I’m going to go over to my site and download the version of this with the sidebar on the left.

Peter: It’s okay.

Rick: It’s very simple so 2 column with the content column on the right. I’m going to right click on it and Save Link As then import that skin data and see 2:04 PM 20th that’s right now, yup. Now, if we come over and look at it, there it is. Obviously, we lost all of our customization which is why we chose this thing first but that’s how you do it. You would pick the skin modification that was closest.

Peter: Yes, thank you very much.

Rick: You’re welcome. Have a good day. Bye. Let’s see who else. Good afternoon Joann, I’ve just unmuted your microphone.

How to Make the Background Image Repeat Horizontally?

Joann: Hello, Rick.

Rick: Hi Joann, how are you?

Joann: When I was watching you put the color in the header area and I couldn’t see that you were identifying just the header. It looked like you were actually putting color in the whole body but it only showed up in the header. How did that work?

Rick: Well, that’s because I told the background image only to repeat horizontally. First off, just looking at that image, this is the image here, it’s 180 pixels tall and 10 pixels wide.

Joann: Okay.

Rick: I have to restore this, here we go, got us back to that position. In the CSS, left background image position alone so theoretically, it starts at the top left corner then and I told it to repeat only in the X direction which is horizontally so that color only existed for the top 180 pixels.l

Joann: Excellent. Okay, I understand now. Thank you.

Rick: You’re welcome. Anything else?

Joann: That’s it. This is great, thank you. I really appreciate it.

How to Handle 2 Different Menus?

Rick: You’re welcome. Have a good day. Next up, someone asked me if I would cover how to handle two different menus and the answer is, sure. If we come over to WordPress and create a new menu and create a bottom menu. Doesn’t matter what you call this, it’s just for use. Create the menu then let’s just say that it was just these categories in the menu so we add those to the menu and we save that menu.

If we come back over to Thesis skin editor, we could always inside the footer area, add a new menu bar so WP Nav Menu and we’ll call it Footer Menu, add the box, shift drag into Footer then the Footer Menu is going to be the bottom menu. If you want it to different colors, we’re going to have to change it up to footer_menu. Actually, we don’t have to change it up, we’re going to leave that menu like this but we’re going to use a different selector for it.

If we save our template and come take a look at it, here’s our menu and what we’re going to do now is create a different style for that menu using the HTML ID Footer then the menu there. If we come over to CSS and we add a new horizontal dropdown menu package, call it Footer Menu then footer_menu and #footer .menu. Now, say our background color is blue, our hover background color is pink, our current background color is light yellow and our parent background color is light blue.

We just made those changes to that style then come over to here and say, &footer_menu. Okay, maybe not. I see, I said footer_men as the menu, there we go, save. Now you have a different style. It’s has borrowed some of the styles from menu because I called it Menu then it’s got the rest of the styles from that one definition. Now, had I called it Footer Menu instead of just Menu, it wouldn’t have borrowed any styles from this menu but it’s sort of an inheritance question. Anyway, that’s how you do it. It doesn’t look like I have anymore questions here.

Where to View and Download this Webinar?

Peter asked where can you download and view the webinar. You’ll be able to do that from the Seminars section, right. This is a seminar and its Seminar page is How to Upgrade from Thesis 1x to Thesis 2 using the Thesis Classic Skin. Now, only annual members will be able to download it and it’s going on the pay side of the site so any paid member can see it and annual members can download it but this is where it is here.

John, I’m going to unmute your microphone. Hi John, I’ve just unmuted your microphone.

John: Hello. Can you hear me right?

Rick: I can, yes.

Setup Widgets and Columns

John: Okay. Yeah, asked you two questions really, I think. One is, I didn’t quite get the column on one side with widgets and the column on the other side with widgets. Somehow I didn’t quite catch how you did the second widget area. I could wait for the replay for that.

Rick: No, that’s fine I’ll be happy to show you. Let’s go back to the Manager, Import Skin Data and choose that file. See if I can remember which one of these files it was. It was not 2:04 but it was 12:39 I think so was it done one? No, it couldn’t be that one. 12:33? No, it must have been this one so open that up, import that data. Now, I believe I’m looking at a 3 column, yup I am and this column has a text box in it and this column has the widgets, right?

If we look down here, our left sidebar has a text box and our right sidebar has widgets. We come down and create a widgets box, call it Widgets 2. Call it whatever you want it to be but we’ll call it Widgets 2 then drag it into the Left Sidebar then I would drag the Text Box out of the Left Sidebar and save the template. Then we can come back over to the Appearance and Widgets section and now we have 2 widget areas and I’ll just drag this another widget into the Widgets 2.

If we refresh this, is it empty? No, it’s not empty, let’s refresh it again. Okay, let’s go back over and make sure we’ve saved the template. Left Sidebar’s got Widgets 2 in it, save that template. I just don’t like the widget I put in, did I go to the wrong place? This widget is specifically set up not to show up on that page, that’s the deal I forgot so we could just as easily come over to categories and drop the categories widget in.

It was set to only show up on one page, that was why. So we fix that, now it’s going to show up on all pages and that’s going to show up there. So Widgets 2 categories is set up to go everywhere and I think this plugin is a long in the tooth, I’m wondering if maybe that’s causing my problem. Yeah, that was it, that plugin just doesn’t work properly any longer so aside from that messing around, that’s how that works really. All you have to do is, once you’ve picked that skin, is to create that widget box, drag it into the left sidebar then put widgets in it.

John: Right, okay. You could just have a text box as well?

Rick: Well, it has a text box by default. You can have both the text box and a widgets box in there if you want, yes.

John: Exactly, yeah.

Rick: Yeah.

John: I mean, it’s really ultimately flexible, just what you can put in there. The other question I have was, the styling really in the boxes, what about when we’re typing up some content using WordPress. Were this all setting up to styling or the color of that font and that kind of thing?

Rick: Well, I would do that to only a very limited degree. That’s called inline styles where you can select a piece of text and make it red or select a piece of text and make it bigger or something like that.

John: Right, yeah.

Rick: You can do that. The problem is that as soon as you want to change the style of your site and that style doesn’t fit anymore? Now, you have to go find every instance of it and change it.

John: Right.

Rick: It’s nice and fast when you’re creating a site for the first time but once you’re beyond that point, it’s very difficult to manage so I recommend that you limit that significantly and that if you really want to change styles, you give the thing a class then you define a class style for that.

John: In that particular box?

Rick: Well, we have an example we’re going to deal with tomorrow called .byob-emphasis. This is a style that I apply that makes the fonts larger and changes the color up a little bit and just sets the thing aside. Now, you can’t see .byob-emphasis currently on the site because we haven’t added it to the site yet but we’re going to.

John: Right. Okay.

Rick: Then the stuff on the site that is wrapped in a div class .byob-emphasis will take this style so we’re going to look at that concept tomorrow but that’s what I would do.

John: So if you are preparing text to go into a site then you’re putting it like a blog page, well, any content really, how are you doing that? Are you typing that up in Word or in WordPress itself?

Rick: It just depends on what I’m working on and how I feel about it at the moment. Lots of the stuff I do, I do directly in WordPress but sometimes, I mean all of our outlines, we do in Google docs then paste it in but whatever system you use for that, you definitely don’t want to use an external system for styling with text.

John: Right, okay.

Rick: Right. So you wouldn’t want to use Word or Google Docs to style the text, you’d want to do whatever styling you did directly inside the WordPress editor itself. I think I can probably show you here. See this first paragraph of text on this page is wrapped in the class byob-emphasis so when that is kicked in, this is going to be a larger font size and will look as if it’s emphasized which is the intention.

Someday when I decide that I want all of the places I have BYOB Emphasis changed in their style, all I have to do is change that style definition. That class is used literally hundreds of times on BYOB Website and I don’t have to hunt for every instance of it to change it, all I have to do is change the class definition and it changes it everywhere which is why you’d want to do it this way rather than doing it inline.

John: Yeah and when you put it under the HTML, how did you put it, you copied it into the front?

Rick: Actually, I just typed it out.

John: Alright. So you’ve got a list of things and you kind of know what you’re doing.

Rick: Yeah. Well, I know that I’m wrapping this entire block of text in this and when I do that, I just put them in a div so it’s a div class = byob-emphasis.

John: Yup.

Rick: This does require you to know a little bit of CSS and HTML but by the time you’ve done this a few times and you’ve got a site with lots of content, it’ll be just infinitely easier for you to change the style of your site, if you just do it this way rather than using inline styles.

John: Right. Where do I store the div class?

Rick: Well, we’ll look at that tomorrow.

John: Okay, right. Thank you.

Rick: Yup. But the short answer is, you would just create a single element style package, it’s selector would be .byob_emphasis then you would just style it the way you want it.

John: Okay. Then I could just pull that one forward when I want to use that then if I want to change it at some point in the future then I just got to change once and it changes it wherever it comes up on the site?

Rick: Right. Let’s just say you want to emphasize lots of little different pieces of text, you’ve got a sales page and you’re trying to make something stand out. Now, you can use strong for bold and so you can do stuff like that without worrying about it but if you wanted to change the color and the size, something like that, what you would do is just wrap that in what’s called a span tag. It looks just like this div tag except it says span instead of div. You’d wrapped it in a span tag, give it the class you want and close that tag.

If you were a Wordperfect user in the 80’s, then it’s going to look very familiar because way back when, Word processors, you could never see what the thing looked like until you printed it out because you put those codes in when you wanted something italicized, you want something bold or you want to change the font style or whatever. That’s essentially the same thing you’ll be doing here is, you put a span tag in around the piece of text even individual word or individual letters, you put the span tag and you can change the style of it.

John: Right. Okay.

Rick: Okay. Anything else?

John: No, that’s given plenty to get on with at the moment. Very helpful. Good day. Thanks.

Rick: You bet. Have a good evening. Well, it’s almost morning time for you isn’t it?

John: Well, now it’s 10:30 at night here.

Rick: Oh, okay. Well, have a good night then. Bye. It doesn’t look like I have any other questions. You know, some people did ask me questions before the session, I mean in the thing. Let me just pull that up real quickly and look at those questions, see if any of those folks are here.

Wendy’s got a couple. Wendy, I’m going to unmute your microphone here. Okay, Wendy I’ve just unmuted your microphone.

Wendy: I have several questions but the first one which just baffles me is this little Thesis icon at the top of the dashboard, up at the top whenever you’re editing your page? If you click on it, just about anything that I clicked on pretty much tells me that I don’t have permissions for the page.

Rick: Well, I’m going to make you the presenter and you show me what that looks like. So share your screen with me and let’s see what it looks like.

Wendy: Okay, got it?

Rick: Yes.

Wendy: Okay so pretty much if I click here,”You do not have sufficient permissions”. Just about anything that I clicked on it, pretty much tells me that so what is that?

Rick: Okay. I’m sorry but that thing you’re looking at there is a plugin that’s not compatible with Thesis 2.

Wendy: Oh, okay.

Rick: Right. Go over to your plugins for a second. I think that plugin is called Thesis Toolbars or something like that.

Wendy: Okay. There it is, you’re right.

Rick: Go ahead and deactivate for a second.

Wendy: Yup, you’re right.

Rick: Now, go to Thesis and see if you can do what needs to be done.

Wendy: Yeah, yeah.

Rick: Okay.

Assign a Color to the Background Image

Wendy: Okay. So then my big drama last night was I uploaded your responsive skin and basically, I want to put a picture of a bunch of corks back here then I had the sheer, you know so you kind of see in the background but it seems like if I change any of the dimensions of your boxes or your containers, it just completely throws the whole thing off. So is there a way to take this responsive skin that you gave me then make it just a little shorter so you can see the picture around the edges? Is that make sense?

Rick: Make it shorter.

Wendy: I mean not shorter but make it have padding around it basically so that you could see the background picture.

Rick: Well, the way you would do a background image in this case is you would put the corks in the body and at that point, you’d see corks everywhere.

Wendy: Yeah then you can’t read anything.

Rick: So then what you would do is take the page wrapper and the content sections and you would give those a background color.

Wendy: Okay. Okay so I basically create a single style package with the CSS with the reference of content on it, right?

Rick: No, no. Go to CSS and go to images, I’m sorry. First go to images and let’s copy the image location. Now, go to CSS and open the body package.

Wendy: And then?

Rick: Okay. Well, you could now go to down to the container and give it a background color of white then go down to page wrapper, let’s see where is that. Oh, this isn’t the Full Width Framework.

Wendy: No, this is the responsive one.

Rick: Right but it’s a page width responsive one.

Wendy: Yeah, yeah. The one for mobile.

Rick: Okay so let’s look at the site.

Wendy: It’s going to have a lot of.. yeah

Rick: We need to save the CSS.

Wendy: Correct, and compile, that’s what I need to do.

Rick: Yup.

Wendy: Yeah. Okay. Well, that looks pretty good. That looks pretty good. Great.

Rick: So if you want to see the corks through that a bit, you could use that semi transparent image instead of the white background color.

Wendy: Okay.

Rick: Did I see that question from you?

Wendy: Yeah, that’s good.

Rick: Okay. So a semi-transparent background image would let that thing show through as long as the color isn’t there.

Wendy: Okay. Alright. And then also, well, nevermind, that will take too long.

Rick: Go ahead.

How to Add a Clickable Image?

Wendy: Well, I wanted two things on this little box here, I’d like to have a clickable link with my logo from my wine brand and also, I’d like to get rid of this ugly, they’re not very pretty. I just like those little nice small ones like people have like this? I’d like to put them up here.

Rick: So right now you’re using a plugin to do that, right?

Wendy: This is a text box.

Rick: Which one are you referring to?

Wendy: Which one, what do you mean? The buttons are text box.

Rick: Okay.

Wendy: And would I use a text box for the clickable link as well?

Rick: Yeah. Yeah, you would like the demonstrations I did of putting a header image in, it would just be an HTML image link.

Wendy: Okay. Just go down to the text box?

Rick: Well, you’ve already got a text box there, right?

Wendy: Yeah, what’s that, in the sidebar 1? Yeah.

Rick: And so what you want to do is put an image link in that text box. Now, if that doesn’t make sense to you, what you do is open up a page or a post and insert the image into post using the media library then make sure that that image is linking to the place you want it to link and just copy that out of the page or post and put it into the text box.

Wendy: Okay.

Rick: So I’ll demonstrate that.

Wendy: Okay.

Rick: I’m going to be the presenter now.

Wendy: Okay.

Rick: Okay so I’m showing my screen and I’m going to come down here and say, I want to add a text box and we’re just going to call it logo just for grins, add that text box. I’m going to come over or here I am at a page right now but I want to go to all pages and if I don’t have a sandbox page, it doesn’t look like I do. I’m going to create a new page and call it sandbox and I’m going to make it private. Then I’m going to use the add media link from my media library and I’ll take this Thesis banner here, it’s 300 x 125 pixels then I’m going to put the link right here, link URL.

I’m going to put the link there that I want to go to so I’m going to make it go to BYOBWebsite. That’s the place I want to go and in the title, I’m going to give it the message that says, Visit My Website. I’m going to insert that into the post and now, all I have to do is copy that HTML, come back over to the text box and paste it on the text box and drag it where I want it. Let’s see, I’m going to put it above the headline area in the single post box, save that template and there it is, there’s my image. If I click on it, it’s going to take me off to BYOB Website. Actually, it won’t because I’m in the canvass but if I wasn’t inside the canvass, this would click off there. That’s how that whole thing works. Does that make sense?

Wendy: Yes.

Rick: Okay. It sounds more complicated than it is, you just create yourself a page that you’re going to play with and you’ll use it to insert images and that kind of thing, make those images links then just copy it and paste it in the places where you want it and this is exactly the same way as I demonstrate putting a header image in. Anything else? Okay. Have a terrific day.

Do Mobile Skins Work on a PC?

John asks, do mobile skins work just as well on the pc? Well, it’s not a mobile skin John, it’s a responsive skin and the whole point of responsive is that, it looks good on everything or it at least looks readable on everything but it’s not a mobile skin. It’s a skin that is design to take the full version of the site and make it readable in smaller device so yes, it looks great on the pc.

0 Comments… add one
0 comments… add one

Leave a Comment