Build Your Own Business Website header image

The Beginner’s Guide to the Thesis 2.1 Skin Editor – Part 18 – 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: Al Jess, “What are the advantages of using the Thesis way of organizing things?”

I suppose this was, at the very beginning, you were talking about the advantages of not using a file-based system but instead using a straight data-based system. There are a couple of advantages, one of them is speed. If all of the data comes out of the database, it’s one reading operation and so the one reading operation contains all the information that it needs. It doesn’t have to read the database and also read the files.

Another reason is, that it’s actually more flexible. Everything that I’ve done here without code, I’ve done a little tiny bit of CSS. But all of the maneuvering things around; adding menus, moving menus, adding sidebars and widgetized areas and all the rest kind of stuff and any other context requires a lot of code. This system doesn’t require code because what it does is, it writes the code for you. So you’ll drag things into place and setup settings, and it writes the code and then stores that code in the database. It has the primary advantage to it.

David, are you there?

David: Yes, I am.

Rick: Oh perfect, I’m sorry about that. You know I’ve been…

David: It’s alright

Rick: You know we’ve been going for three hours and some glitch happened in my volume and I couldn’t hear anybody else but I just thought because their microphones weren’t working.

So let’s try that again. I was looking at your question. If I took out manually, some sections in the content area, in the front page and wanted to restore those in the manager…

David: Yes, would you like me..

Rick: Yes, why don’t you just explain that to me?

David: Okay. I’m a new WordPress user so this is coming from a total newbie. What I did was, I have a theme that I’m using, a skin that I’m using and it had on the frontpage, it had a featured slider and a who we are section, a portfolio page. I basically went in to the skin editor and I took the portfolio page out. Before I knew how to do it very simply. Thanks by the way for your tutorial, I realized I could just come in and turn this section off.

Rick: Okay

David: So my question is, I’ve done a lot of graphic works and stuff, can I backup the site where it is right now? And I want to put those pages back in there. And I want to go in and restore, can I just restore the boxes? Or I’m not sure if it’s restore, what exactly I would need to restore, just to restore those things that I took out?

Rick: Well to restore the things that you took out, you would restore the template.

David: Okay, that was my question, the template.

Rick: Because you can’t delete the boxes, right? I mean even if you drag them and delete them, you’re not deleting the actual… you’re not deleting the ability to have a box. You’re just deleting that specific box. So, you could go and restore your templates…

David: Okay

Rick: But restore nothing else. Keep your design options and all the rest of that stuff. Your custom CSS and all that…

David: That’s correct

Rick: Don’t restore that. Just restore the templates.

David: Yes

Rick: Before you do that, you should create your own backup of it though, right? Using the manager, back where you are up. Just in case there is something that you want to go back and refresh your memory about how you handled it…

David: Right

Rick: that go overwritten.

David: Okay, just now as you’re speaking, I hit a create new backup button and created a backup and that’s what you’re speaking of, correctly?

Rick: That is, yes.

David: Okay. Thank you very much by the way, for your your tutorial, this helped me tremendously.

Rick: Oh, good. I’m very glad. Anything else?

David: No, that is it. That was the main question I had, everything else, you have opened my eyes to these things.

Rick: Great, well you have a terrific day.

David: Hey, thank you. You too.

Rick: You bet. Bye bye. Okay, let’s see. Peter Herman. Peter you asked me a question. Let’s see, Tamara I’m going to come back and answer your question too. So, just in case you were wondering, you asked the question and I answered it but you didn’t hear me.
Let’s see. Give me just a second here to get rid of the questions that are, people are saying they just can’t hear me. So anyway, I’m going to come back to this.

Peter Herman, you have a handful of questions so I’m just going to unmute your microphone and let you ask them. Go ahead Peter, I just unmuted you.

Peter: Hi Rick, thank you for this seminar.

Rick: You’re welcome.

Peter: I have a question. Can you tell us how to put header widget right from the site title.

Rick: You mean…

Peter: Not about, but on the site…

Rick: Yeah, the easiest way to learn how to do that is to go watch the seminar, I did a seminar on that already. It is on the Thesis Theme 2 Seminars, and it’s the Thesis 2.1 for DIY Web Builders.

Peter: Yeah

Rick: It’s a free seminar, if you are not a member. And some of it is a little bit of a repetition so you could skip the steps that are just repetition of what I just talked about. But Widgetized feature box, Remove borders, background images, oh I guess this isn’t the right one. It’s for web developers. So, it’s Thesis 2.1 for Web Design Professionals. I have a section in here on Creating a 2-column Responsive Header in Thesis 2.1

Peter: Okay

Rick: And so it’s all about setting up the columns, putting in a widget area and having it stay responsive.

Peter: Oh good, I try that

Rick: And the code for doing that is in the… the download for that code is under Resources, and under the code snippets here, Download the CSS version of the BYOBWebsite Code Snippets for the Thesis Classic Responsive Skin – that has the code that I used for setting up those columns.

Peter: Okay, thank you.

Rick: You’re welcome. Anything else?

Peter: Yes, you have put the copyright information in the text box, is there a place for the year 2013 but then I don’t have to change it every year.

Rick: Yes. So Peter, send me an email asking me for that box and I will email you a copy of the box.

Peter: Sure

Rick: I haven’t actually published one publicly, but I taught a class on how to build boxes, and that was the box we created. So, I’ll send you a copy of that box.

Peter: Oh, okay. Thank you very much.

Rick: You’re welcome. And if you are using my free skin – Agility free, it has that functionality built into it.

Peter: Okay

Rick: So

Peter: Thanks, that’s it.

Rick: Okay, you have a great day. Bye bye. Okay, Tamara. Tamara I’ve just unmuted your microphone.

Tamara: Hi Rick, how are you?

Rick: I’m doing well. I’m sorry that you could not hear my brilliant answer to your question.

Tamara: I can see you are probably answering it but I couldn’t hear a thing.

Rick: Yeah, so I’m just going to do that again.

Tamara: Okay, thank you I appreciate that.

Rick: Yeah, so we’re just going to come back over here and we’re going to restore defaults. Okay, so the answer is going to be better the second time around anyway. Because I thought I knew the right answer to the question and when I went to do it, it didn’t work. So you missed all that pain.

Tamara: It’s okay

Rick: But what you do is, you’re going to take your main loop and you are going to set it to only display the first post. And that first post will be the full post. So we come up here to home and go to WP Loop and then post to show, say 1.

Tamara: Okay

Rick: Then you’re going to create a query box, and we’ll call this query box home page… what do you want to show up in this?

Tamara: Just kind of a short blurb about each post.

Rick: So, title and the excerpt.

Tamara: Yeah

Rick: That’s it? No image or anything like that?

Tamara: Maybe like a thumbnail
Rick: Okay, so we’ll save this Home Page Query Box and we’ll drag it into the Content Column but it’s going to the WP Loop.

Tamara: Okay

Rick: But above the previous index

Tamara: Okay

Rick: And then we’ll take out author, edit, come back here and we’re going to take our featured image. Drag the Featured Image up to the top. We’ll make it the thumbnail, left with text wrap and then the other thing we’re going to do is give this a class. In the Query Box, we’re going to give it a class of post_box

Tamara: Okay

Rick: Which will mean that it will borrow all the root class definitions from the main post box

Tamara: Okay

Rick: And the headline, we’re going to make an h2, link it to the page. And the excerpt will show read more. And in order to make is similar to… yeah, I guess we’ll just call it good there. Now, right off the bat, if we refresh this, we’re going to have the 5 most recent cherry posts including this post. But what we’ll do then, is we’ll come over to the Skin Content and open our Home Page Query Box and we’re keep it at recent post but now we’re going to show 9. And then open up the Advanced Query Options and we’re going to say Offset: 1, which means it won’t show the first one. And then we’re also going to exclude the results from the main loop so that when we say next posts, it ignores these and shows the next set.

Tamara: Okay

Rick: Save that and refresh this and now you have the title, the excerpt and the thumbnail image.

Tamara: Awesome

Rick: And they are all laid out like this because we added that class post box, which is exactly the same class that is used on this…

Tamara: Okay

Rick: It uses the class post box

Tamara: Great

Rick: So

Tamara: Excellent, well thank you very much for walking me through that, again.

Rick: You’re welcome. Is there anything else?

Tamara: No, I don’t think so. This whole thing has been extremely helpful. Keeps me from beating my head against the wall.

Rick: Well, I’m glad. That’s good. Okay, well, talk you later.

Tamara: Thank you, have a great day.

Rick: Bye bye. You too. Okay, let’s see. David Rowley. Good morning David, I just unmuted your microphone.

David: Good morning Rick.

Rick: Actually, it’s afternoon, isn’t it?

David: Yeah, it’s afternoon now even here on Pacific.

Rick: Which is where I am! So what can I do for you?

David: Yeah, so… my main question is, now that there’s some new skin out there, there’s Social Trigger skin finally came out…

Rick: Yeah

David: Do you have some general guidelines for us? I’ve always used your BYOB skins in the past and I thought they are great but, you know? What’s the good and bad of using Social Triggers versus Thesis Classic versus one of your skins?

Rick: Well, you know Social Triggers… I mean, my skins are designed for people who tend to dabble with the design. And they want to do it responsibly. I have tools in mine that allows you to do responsive columns and you know, responsive widget areas and stuffs like that. Neither of the DIY Themes Skins have. Those skins are designed primarily for you to either, well you can customize them obviously but they aren’t built with tools for you to, sort of automatically add new stuff to them like mine are.

There’s no reason not to use Class Responsive if it does the job for you but it doesn’t have any of the specialized tools that Agility or Carta have. On the other hand, Social Triggers does have, not particularly unique, but nevertheless, it does have things in it that my skins don’t have. And it has some styles built in for automatically dropping those, the Aweber and Mailchimp sign up boxes into the Feature Box. And it has that kind of stuff that my skins don’t have. So I don’t have styles yet for those. Otherwise, it employs the Social Triggers’ philosophy of, you know, having a big call to action up front but you can pretty much do that with any skin. All you have to do is build the thing and stick stuff in it. That’s the main difference, I would say between Social Triggers and Thesis Classic, is that it has the Feature Box built into it. And Social Triggers has some styles built in for th Aweber and the Mailchimp optin boxes. So that’s pretty much the big difference.

David: Okay, well I guess it sounds to me like I’ll probably go with your Agility like I’ve used in the past, because I definitely do want to make some change and customize it the way I want. I guess what I understand from what you’re saying is that Social Triggers and Classic and kind of more for somebody who just want to use it as is out of the box and not make a lot of changes to it.

Rick: Or be prepared to really wrestle with responsive CSS because that’s the hardest part of customizing a responsive skin, is customizing the responsive CSS. It’s the most complex part and I’ve been deliberate about trying to contain all of my responsive CSS in tools that can be easily repeated. And it has styles built in that let you, say, create a 3-column template or let you put 4 responsive columns in, stuff like that, so.

David: Okay

Rick: It’s just built that way

David: And you now have Agility that works with 2.1 right?

Rick: Right, absolutely. Yeah and if you’re upgrading from 2 to 2.1 then you want to watch the seminar on that because in order to fully take advantage of the new stuff in 2.1, your upgrade is a little bit of a process. So, how to upgrade Agility Nude Skin from Thesis 2 version 1 to 2.1, you want to watch the seminar because there are steps to follow. Upgrading doesn’t automatically overwrites the stuff that you already have so what you have to do is move your packages and then you’ll delete a bunch of packages and use the design options, you have to restore the default CSS and a few things like that, that you need to do if you have an existing version 1 of Agility. But there is at least a path to upgrade.

David: Okay. In fact, for me I’ll be going with 2.1 from scratch with Agility Nude so, I think…

Rick: Yeah, and you might want to compare Agility Nude to Carta because they have very, very similar functionality but Carta is page width and Agility is full width. So if you wanted more of a page width look, then you might want to look at Carta.

David: Okay

Rick: Just look at them both and see which one looks closest to what you want to accomplish. They will behave, they will work in very similar ways, so. And they both have big documentation on them now. So when you go over to the download section, you’ll see big cheat sheets and design options, an html layout cheat sheets essentially, you know, showing what everything does and how it does it. And next week, I’m going to be teaching an entire class on doing tons and tons of stuff with Agility. Okay?

David: Okay, great!

Rick: Anything else?

David: Nope, that’s it. Thank you.

Rick: You have a great day. Okay let’s see. Kathy Perdy, where did you go? Kathy I just unmuted your microphone. Are you with me? Maybe you don’t have a microphone, that’s always a possibility. You said, read the documentation for the skin to find out the various boxes are, where did you find the skin documentation?

Okay, well if you’re using my skins, you can find the documentation for the skins on the page where you downloaded the skin. If you are using Classic Responsive, you will find… I think somebody’s coming on, Kathy are you there?

I probably unmuted somebody else’s microphone. Okay. Anyway, I also have some documentation on Thesis Responsive like this little cheat sheet on the padding. I’ve got some snippets for that. I also have, let’s see what else do I have? Actually, if you go look up the upgrade from 1.8.5 to 2.1, you’ll find that I have some other stuff for Classic Responsive too. So, I’ve got stuff like that. Obviously, DIY Themes has their manual.

Okay, let’s see. Sherry London. Good afternoon Sherry, I just unmuted your microphone.

Sherry: Okay, can you hear me?

Rick: I can, yes. So what can I do for you?

Sherry: I would like to create a main nav menu which uses custom drawings and then links to the items that it’s supposed to go to. Either that or at least put a custom background, or custom color on each menu item. I don’t know if it’s possible.

Rick: Well, because that’s all controlled by CSS, it is absolutely possible. Have you watched any of the Launch Party videos?

Sherry: I did. I don’t know that I understood them enough but I did watch them.

Rick: Well, in general, let’s see. Which one am I working on? Okay, I’m working on categories, let’s see what image do I have in my media library.

Sherry: The feeling that I have gotten from watching you manipulate the CSS would be that if I were to put in kind of a .1, .2, .3, I’d have the ability to change the color based on position in the menu.

Rick: Well, it’s not really .1, .2, .3, it’s whatever class WordPress has assigned to it. So I’m using a tool in Chrome, it’s Chrome developer tools and I’m clicking on inspect element and here, that menu item has been given the id, menu-item-204. So I could use menu-item-204 to style that menu item separately. So if I came over here to custom CSS, and I typed in #menu-item-204 and then say, this is the “a” condition and I said, {background-color:green;} and actually I’m as well, change this up so a:hover so for the hover condition, {background-color:red;} and then one more time, .current a{background-color:blue;} These are the three given conditions for any of the menu item and actually, it might be current menu item, it might not be current, well I have to double check that in a second.

Sherry: Okay

Rick: But that is supposed to be though, because I’m at home, was I? No, now I’m at home. That is supposed to be blue. Isn’t that? Isn’t that what I said to be blue? .current a was blue

Sherry: That’s what you said, but it doesn’t seem to be behaving

Rick: No, a is supposed to be green. Oh, this is only one menu item, that’s what it is. So, it’s not current, it’s current menu item I believe, instead. Let’s see. Current menu item, that’s what it is. Okay. And it’s the same, it’s actually this .current-menu-item a

Sherry: Okay

Rick: So no space there, it’s #menu-item-204.current-menu-item a{background-color:blue;} so when it’s current, it’s blue. When it’s not current, it’s green and if I hover it, it’s red. So, you can go all over the place with that, in terms of colors and styles. You can also, at that point then, so background color is blue and we make color:white; see?

Sherry: Right

Rick: So, I mean, it absolutely is possible for you to target menu items individually, what you have to know is what their id is. But when you know what their id is, you can do it. Now, the easiest way to find the menu items id is with a tool like this, where you can right click on it, inspect the element and then come down and look and see that it’s menu item 201, this is menu item 208, 205, 350, okay?

Sherry: Okay, so that’s in Chrome?

Rick: This is in Chrome, Firefox has a similar facility.

Sherry: Of course, I use IE but I’ve got them all.

Rick: Well, Internet Explorer does have that similar facility as well but it’s quite more complicated to use.

Sherry: Of course! Would it show it to me on dreamweaver?

Rick: No, it won’t show it to you in dreamweaver because dreamweaver doesn’t interact with the html that far.

Sherry: Oh, okay.

Rick: If you’re using dreamweaver to set up your site in WordPress…

Sherry: No, I’m not really… It’s just that I thought maybe that would give me the ability to see what it is I should be changing online.

Rick: No, one of these tools… I mean, these are the tools professionals uses, either developer tool for Chrome or the developer tools that are built-in to Firefox.

Sherry: Okay

Rick: They both provide that facility very easily.

Sherry: That’s something you don’t see by switching to code view in WordPress itself?

Rick: Well, you will as long as you know how to interpret it. So, if we’re here and we view the page source, there we are in code view, right? And as long as you can interpret the menu…

Sherry: Okay, but it’s not showing me essentially where it is, the way the developer did.

Rick: No, it’s just showing you the raw code.

Sherry: Okay
Rick: Right? I took raw code and I pasted it in the Dirty Mark Up and here’s the menu but you still have to know that… Oh, this is a different site, obviously so it’s not going to have the same numbers but you have to know that you’re looking for this thing as a menu item. And obviously, you can see it’s menu-item-201, menu-item-208, and it’s oranges, or carousel or home… so you could also do that if that’s easier for you.

Sherry: Well I just have to…

Rick: This is called and just paste your raw html in there and hit clean up and it makes it legible.

Sherry: That’s great. This has been extremely helpful.

Rick: Well I’m delighted. You have a great day.

Sherry: Thank you, you too.

Rick: Bye bye.

Sherry: Bye.

Rick: Okay, let’s see. It’s Cliff who’s next. Good afternoon Cliff, I’d just unmuted your microphone.

Cliff: Hi Rick

Rick: How are you doing?

Cliff: I’m doing good, fantastic seminar.

Rick: Thank you. So what can I do for you?

Cliff: I’ve had a kind of a word thing issue, the Classic Responsive 2.1 and I set it up originally at .2 the first seminar that you did when it came out. It’s a 1008 pixels and 600 and all that.

Rick: Yeah

Cliff: It looks great on the desktop at home and it looks great on responsinators and you know, on the iPhones and stuff but, if you go to my laptop, and I’ve tried other laptops and it doesn’t go clear across the screen and I’m just wondering where…

Rick: Can you give me a URL?

Cliff:, I’ve put it in my question.

Rick: Okay, so what you’re saying is that, what happens when it gets into a smaller screen?

Cliff: Yeah, it fills up the smaller screen on the responsinator… Oh, okay, that’s interesting.

Rick: Okay, so let’s see… what is this… If I look at a laptop style width, this is what I see on a laptop style monitor size 1440×900, is this not what you see on a laptop?

Cliff: You know, it doesn’t really occur across from side to side for full width

Rick: But that’s because it’s not… Right, you’ve set your container as 1308 pixels wide, so it’s not going to go any further than 1308 pixels.

Cliff: So I just have to change the size

Rick: No, I wouldn’t do that. What I would do is if you want this to go all the way across no matter how big the browser window is…

Cliff: Yeah

Rick: Then you need an image that is say, 2580 pixels wide

Cliff: Okay

Rick: Because browser windows go up 2580 right now so you need an image that is 2580 pixels wide and then you probably want to use that as a background image and put that as a background image in body rather than using it as a header image. And what I would do is, use Cliff’s Novel Blog as your header image and just without any background in it. And then I would make this 2580 pixels wide and however tall you want it to be and I would make that a background image and make Cliff’s novel blog essentially a transparent PNG that is your header image that overlays it.

Cliff: Okay

Rick: Because, the problem with this is that, on a regular sized monitor, it drops down into being one column wide, right? And I don’t really think that’s what you want.

Cliff: Yeah

Rick: And that’s because of Thesis’ responsive stuff, right? That’s how Thesis behaves… but in terms of all the way across on a big screen, you should make the image to be quite a bit bigger.

Cliff: Yeah, ok I understand that. But it’s weird, because on the desktop, it does crawl across and that\s a humongous screen.

Rick: Well, it must not be bigger than 1365 pixels though

Cliff: Okay, alright. I appreciate it.

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

Cliff: You too, thank you very much.

Rick: Actually, Sherry it looks like I still have you unmuted. Sherry did you still have a question?

Sherry: No, I didn’t.

Rick: Oh, I’m sorry. I just see a thing from you saying, I still had a question but it looks like…

Sherry: No, that was a long time ago

Rick: Yeah, exactly. Okay, and then I saw I had you unmuted, so…

Sherry: I’m sorry.

Rick: Thank you. No, it’s my fault, no worries. Okay, let’s see. Steve Langford. Hi Steve, I just unmuted your microphone.

Can’t hear you very well but I think I understand your question. Can you sort the Query Box Results alphabetically? The answer to that question is, yeah. All you have to do is come over to Skin Content and open up the Query Box and go to the Advanced Options, and choose Orderby. And then you can choose orderby title and orderby title is alphabetic.

I can hear you trying to talk to me but I just can’t hear you talking to me, hopefully you heard my answer. Yeah. I think it’s a bad internet connection but the short answer is, yes, you can sort alphabetically. What you have to do is open up Advanced Query Options and then you would choose the order ascending or descending, choose orderby and then choose title, so.

Okay, so hopefully that answered the question. Adolfo, I just unmuted your microphone. Are you still with me? I’m going to leave you unmuted, just in case you are. And I’m going to answer your question. Actually, I’m going to take another 5 minute break then I’m going to answer it because the videos don’t work very well if they go more than an hour long. So another 5 minute break and I’ll be back.

Okay, is there anybody else? Let’s see, it looks like I have some other questions. If there isn’t so, let’s see what we can do to answer them. Steve. Is it better to use a template or copy of the template for design and linking?

Okay, let’s see. Steve, I’m going to unmute your microphone. Let’s see. There we go, hi Steve, I just unmuted your microphone.

Steve: Yeah, can you hear me?

Rick: Are you with me?

Steve: Yeah

Rick: Oh, I can’t hardly hear you…

Steve: Why don’t you just answer the questions Rick and I don’t need to hear that.

Rick: Okay. I’ll just… let’s see. So, you’re saying… is it better to use a template or a copy of the template for design? You know, if you are concerned that you may lose the default setting that you may wish to recover, then it makes plenty of sense to make a copy of the template before you do that. It’s very very simple to make a copy of the template. Right, you just come over here to html and add New Template, and you can say front page copy, Front page default, create a template. When you do that it creates a blank template and then all you have to do is come over here, select the front page, copy that template to it and now you have an exact copy of the front page template that is sitting in this location.

You absolutely can do that, it makes plenty of sense to do that especially if you’re experimenting around. It also makes sense to, well, I think that’s a perfectly acceptable way to solve your problem for that.

Let’s see. Is it better to use a template… how do you remove the white borderlines in a new Classic Responsive theme? Okay, you’re talking about, I believe, these lines here. And they take their colors from the skin… actually, let’s just bring this thing all the way back to normal. Okay. So, the question that you’re asking here is, how do you get rid of these borders? You call them white borders but in fact, they change color based on skin design. So, it’s interiors.. it’s borders and highlight, right? If you made them blue here, they would be blue.

Now, I have a resource here that is “Download the plain text version of the BYOBWebsite Code Snippets for the Thesis Classic Responsive Skin” and one of these here, pieces of code, removes borders. Removes the header border, it has that piece of code. Remove the menu border, here’s that piece of code. Removes the column borders and so what you can do is to come along here like this and copy that. And then come back over to your skin design, I mean your custom CSS and paste that in, and that removes all of the borders. 100% of them.

Now some of those borders you wanted. So you want the border around the menu, you just don’t want the other border then you would take this section out and the menu borders would stay the same as they were. Now this is our menu borders. That’s the easiest way for you to accomplish that.

Let’s see, any other questions? I think I have got all the questions answered. Yeah, and it turned out by the time I finished demonstrating, I had already demonstrated all the stuff that I was going to demonstrate so I am going to assume that we’re done. Because we are afterall, an hour and a half behind. Although I am going to give everybody one more chance, if you’ve got a question about this subject, I will answer it.

Okay, well thank you very much everybody for participating and joining me and putting up with all the flaws and… Oh, Steve asks, what is the condition? “I’m a newbie, what is the condition?”

I don’t think I understood the question. “There’s menu thing, the a condition”… Oh, the a condition is the link. So, .menu a, this is the html tag for link and so menus are link and that’s where the stuff comes from. It’s the link. Okay. So now, I’m going to say goodbye. Everybody have a terrific weekend and this has been recorded and will be up on the site and available for folks to watch.

Until next time, which should be sometime next week, everybody have, just a lovely weekend. We’ll talk to you soon. Bye bye.

0 Comments… add one
0 comments… add one

Leave a Comment