Good morning everybody and welcome to Lesson 9 of our class on How to Create a Responsive Skin for Thesis. I prepared fully forty hours for this class and this morning, what I realized as I was making my final preparations that there was no way we’re going to cover all this material in two hours. In fact, I probably wouldn’t have been able to get through it in four and so I’ve decided to break this class up.
This was going to be the last class but we’re going to have one more class after this so Lesson 9 today is going to be How to Create a Custom Skin Package and Lesson 10 next week will be How to Create the Responsive Menu so I feel like we need to get a good foundation in the skin package creation process before we can move on to creating the responsive menu because we’ll be creating a responsive menu that creates a package and creates a box. However, I will give you a little taste of what’s coming up.
Overview of the Next Lesson
This is the menu that we will be creating. By the time we’re finished with this next week, we will be creating this menu here that essentially allows you to have multiple levels of submenus or dropdown menus. This is what it looks like in its non-mobile context and this is what it looks like in a mobile context so you end up with a menu button that you can click and then the menu drops down and then you can expand or contract these menu items, you can tell where you’ve got submenus and you can open and close them and once you close it up, the menu drops out of the way.
So this is the menu that we are going to be creating next week and we’re laying the groundwork for that this week and learning how to create packages because we’re going to make this menu styleable inside of a package so that your user will be able to select colors and fonts and sizes and that kind of stuff. Anyway, this is where we’re going but we’re not going to get there today, it’s going to have to wait till next week for us to get that finished.
Here we are, lesson9.thesisresponsiveskin and I’m probably just going to have to teach this whole class all over again from scratch starting with Lesson 1 because so many things have changed in Thesis since I began teaching the class but the very first thing we’re going to do is we organize our file structure so that it matches the current design of Thesis. Thesis now has some helper or what Chris calls valet methods for adding boxes and packages which renders the old file structure that I suggested previously obsolete essentially so we’re going to take that file structure and fix it first.
Looking at the File Structure
Remember what that file structure look like, we had inside of the root of our skin, we had an images folder and a lib folder and inside of lib, we have boxes, packages, scripts and widgets. Well, now the way this works is, Thesis automatically looks in the root of the skin for a box file and a packages file so we’re going to convert the skin over to that current method. The way we’re going to do that is just take our box.php and drag it into our root out of the boxes.
We don’t have a package.php yet so that’s fine, we’re going to take our scripts folder, we’re going to drag it out of lib and drop it into the root. Since we don’t have anything under widgets here, I think we’re just going to go ahead and delete this entirely so we don’t have a lib any longer, now the root of our file structure has skin, seed, screenshot, custom, box and we’ll have package in just a moment.
Change References in the skin.php File
Now, if you’re paying close attention, you’ll realize that that means we need to change some references in our skin.php file so I’m going to go ahead and open up my skin.php file here. The reference that we need to get rid of here is this require_once(TRBM_PATH . ‘/lib/boxes/box.php’); we don’t need that any longer and we don’t want to require it because it doesn’t exist anymore so we get rid of that.
Two weeks ago, we created this boxes function with the array of our boxes and that’s going to suffice because now, Thesis knows to look for this box.php and in that box.php expects to find this array of boxes ‘trbm_sample_box’, ‘read_more’ box and the ‘orbit_slider” box and if we open up our box.php, you’ll see we’ve got our sample_box, our orbit_slider box and our read_more box.
Now, next week we’ll be creating a responsive menu box to add to this as well but the very first thing really is just to convert ourselves to the latest system of Thesis’ file structure. We’ll go ahead and save our skin.php like that and our file structure is ready to go.