In this session we give a summary of how to create a full width framework skin. We introduce the BYOB Agility skin which is a responsive skin we are developing, the responsive header image plugin which will swap out 3 different images and the BYOB Orbit Slider Helper for dragging and dropping a slider around.
Member: Doing full width pages… I know before in Thesis 1, it’s simply a matter of choosing a page or full width template or framework. How do you do that in Thesis 2, if it’s possible?
Rick: Well, it is possible because absolutely anything you can imagine in HTML is possible in Thesis 2. Now, the way you do that though is you have to create the HTML for it because Thesis doesn’t currently come with a skin like that. I will show you an example of that though because the skin that I’m developing for release here very shortly is a full width framework skin like that. And Thesis 2 test, there we go. This is the site that I was testing the alpha on. And if we come over to Thesis select skin for just a second. I have this BYOB Agility skin that I’m working on. And I’m going to activate that skin. It is a mobile responsive skin and it is…
Member: Awesome. I’m going to buy it. Sorry.
Rick: It’s not for sale. I’m going to give it away.
Member: Oh, nice. That was going to be my second question actually, if you were going to develop a responsive theme because that is exactly what I’m looking for. But awesome. Sorry for interrupting.
Rick: That’s okay. So we just activated it. If we come over to the skin editor, let’s see. Let’s move the canvass. You can see what I’ve done here is I’ve created… on my front page, I’ve got the header area, a feature box area, a content area and a footer area. And inside of each of those, I’ve got a header area page similar to what Thesis did and then my header and stuff. And that page is the page width part and the header area is full width. So if you look at this one you know, in this skin editor, it’s got a container and everything is inside of the container. In this skin, the front page has 4 containers. One of them has a feature box but the regular page has… oh, I haven’t changed this yet but the regular page is not going to have a feature box. Regular page won’t have a feature box and it just has the 3 containers. And I ended up naming them exactly the same as Thesis names them now or Thesis named them before just for convention. But that’s exactly what I did was I just got rid of the container container I made 3 or 4 containers.
The really cool thing about this though is that you know, see those jazzy full width sliders that span the entire width of your page?
Rick: You can do that here. All you have to do is, you could use this header area which is 100% of the width of the site because I didn’t give it any specific width so it fills the entire width of the site. And dropping a slider in there that’s also 1600 pixels wide or 2400 wide or whatever and it’ll work perfectly.
Rick: So it’s pretty cool. Now there are 2 things I developed to go along with this and those boxes will show up here and I’ll be distributing those also. One of them is a header image plugin that will swap out 3 different images – the full size image to full view, a tablet-sized image and a smartphone-sized image. So it’s essentially a responsive header image plugin. And the other one is Orbit Slider Helper.
The Orbit Slider is a WordPress plugin that is a responsive slider. And so what I’ve done here is create a helper that allows you to drag and drop the slider around. And if you’ve looked at the Orbit Slider, you know that the only way to customize the image sizes in the Orbit Slider are to actually add some custom code to your site. So my new box gives you the ability to set the slide size and it writes that code for you. And so… and you can have as many sliders as you want. So you can see I’ve got a feature box slider… well, you can create as many Orbit Slider Helpers as you want. And then once created, you can set the slide height and you can select which slide category. So if you’ve got a bunch of different sliders that you want to use, you can set up a whole bunch of these slider helpers, pick the slide category you want to display on that page, drag and drop it to the page and it’s done.
So that’s going to come along with these… those are the 3 things I’m finishing up getting ready and they’ll be available to the public sometime this week.
Member: Awesome. That’s great.