Build Your Own Business Website header image

Thesis 2.3 Developer Tools Box

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some protected content!

Watch the opening clip of this video to preview it,
the full video is available to free and paid members.

So the very last thing I want to teach is the Thesis Developer Tools Box. Let’s pretend you’ve finished this website job now and you are ready to deliver it to the client. Well, there are a couple of things that you want to do to this.

We started this project as if you were a beginner with the Introduction to Thesis 2.3 and then kept customizing it in the DIY Website Builder seminar. In that seminar I said you’re probably better off using the media library for background images like this. But that is not true for you if you are a developer or designer because you want those images to be portable. So you can no longer reference images here.

Now we’re going to put these images in the Skin Editor before we take any further steps. Go to our images, choose files. Go to my pictures and get those. I need the Woof and the paw prints. Now that I have those images I can come back over to my Custom CSS and now I just replace all of this with images. Images, dark green and images, footer topper and now those are portable.

The rules are portable if you use the Skin Data management but the images themselves aren’t if you use that. This is where the developer box comes into play. You can get the developer box over at DIY Themes. If you don’t already have a developers license then you are going to want to upgrade to that license. Once you are in your account, come down to boxes and that Thesis Developer Tools Box is here. So that’s where to find the box.

Now you have to install the developer tools box so come over to Boxes and Manage Boxes. Upload a box and go back to my downloads folder and get the the box. Add that box. Put the checkbox here to activate it and save your boxes.

Now under the boxes menu you now have the Dev Tools page. If you check this box, it’s essentially beta updates. So when Chris is testing stuff, if you check that and he puts it into the developer updates then that means you’ll see those as updates and you can test out the beta stuff that way. I don’t do that for working sites, I just leave that undone.

In the Skin Editor options, Show Box Options in the Skin Editor, this is a really slick little tool because it keeps you from having to bounce back and forth. Let’s save that option and let’s reload the Skin Editor.

Now, for example, in the Nav Menu you can go to this options and now you’ve got this new tab which is the options tab. This is the same thing you see in Skin Content Options. But now you can pick it from here.

Before you installed that box all you had was HTML and Admin. But now that you’ve installed this box you get these options. And you can set those from here which is a nice time saver for developers and designers so you don’t have to switch back and forth like you watched me do the last three seminars.

The next checkbox is what we are going to really talk about here in a moment which is creating a skin for distribution. You can check that box and it will let you create a distributable skin file. We’ll leave it checked but we’re not going to talk about it yet. Although we’ll save the options.

The next thing here is a way to create a blank skin. What we’re going to do is take this Barking Chihuahua Cafe site that we’ve developed and we’re going to turn it in to a skin that the client thinks is their own skin.

It’s going to have the client’s branding on it. It’s going to have your information on it for you to contact them. And it’s going to take Skin Design and Skin Display Options out so the customer can’t mess it up. Skin Content will still be there but that’s the only menu that will be left.

The reason that is is because when you are creating a new skin you are creating a blank skin, you don’t have the functionality in the skin that is built into Thesis Classic.

If you want to learn how to add that kind of functionality then you can look at my seminar on Introduction to Creating Skins where we go through the whole process of adding that kind of code to it. But you don’t care about that when you are distributing it to your customer. What you care about is making it as bullet proof as possible and you want to give your own or their branding to it. Make them feel special.

We are going to create the new skin, that’s the first step. We’ll give it a name. The skin author will be you. I like to put my website address in it, like that. It’s not clickable but it’s there. Then Skin Design for the Barking Chihuahua Cafe, Designed by Rick Anderson and I like to put my phone number in there for the client.

This version is 1.0. If you are following my seminar on how to make a skin automatically updatable then you can use the skin version as the tool that you need for Thesis to know that there’s a new version available. Then you choose the screen shot. Now back to pictures, we’ll use that one. Then for class name, I’ll just use the same one. It needs to all be underscores and lowercase. Don’t use numbers or uppercase letters. Don’t use spaces or special characters.

Then you can put your website here for documentation link. Unless you are actually going to provide them with documentation. And create the skin.

Now you’ve created a skin so now go over to Manage Skins you can see you’ve got a skin, version 1.0. Here’s all the information we entered. We could activate the skin…shoot I forgot to talk about preview and development mode.

Well, we can activate the skin and if we go back over to the Skin Editor it’s empty. Go to CSS it’s empty. There are no images, no variables. There’s nothing. That’s because it’s an entirely blank skin so what we need to do is go back to Manage Skins. Choose Stop Previewing Skin in Development Mode.

Come back over to the Dev Tools. Now we are going to export Skeleton Data. The skeleton data that we are exporting is of the current skin which is Classic Responsive, the one that we’ve been modifying. So we’re going to export that skeleton data and we’ll export everything. Download the skeleton data file and now that it’s exported…you can see here it’s the 2033 version, not the one I practiced with this morning.

Then we can come back over and change skins. We’ll activate that skin and go back to that box, Thesis Dev Tools and import that skeleton data. You are importing and exporting from the current skin. Whatever you have activated at that moment.

We’ll come back down to downloads and this is the latest one, 133. Open that, import skeleton data and say Okay. That skeleton data is now imported so let’s go back over to the Skin Editor now you see all that stuff is here. The Data Manger stuff isn’t there but all of our color 4 is here and the button is here and all the CSS is here and the editor CSS.

The difference is that there is no longer any Skin Design. If you go to Skin Content there is no Skin Display. There is still the ability to change these things but that’s it because the underlying functionality that dynamically filled those variables is now gone. It doesn’t matter since you are distributing this to your client but nevertheless it’s gone.

And if you were going to actually modify this rather than modifying your master and creating a new distributable which is how I would do it, you would just go into the Skin Editor and go to CSS. Then if you were going to, for example, change color 2 you would just physically change it. This is the point at which there is the disconnect from Skin Design to these variables so now they are freely editable.

There’s one thing that didn’t come across and that’s the images. We still didn’t get the images.

>>Chris. So question about that. I’ve not tested this particular functionality in a long time. If you have an images folder with the skin…well the skeleton is only going to do the data but the zip file when you create the skin zip file it should pick up any images in that folder.

>>Rick: It not only does that but it recreates default PHP which sets the baseline for your design which I’m going to show you in a minute. That way anytime your client messes it up you can hit restore defaults and you are all the way back to exactly where you were when you gave it to them in the first place.

Not back to where Thesis Classic was but back to where you were. I talk about this and I get little shivers because it’s such a powerful tool for a web designer. It allows you to make your client happy, make them think they’ve got something special that looks really good to them and keep them out of stuff that you don’t want them to mess. But if they do happen to mess it up, you can say, I’ve got to charge you for that…I told you not to do that. It’s just a punishment fee. But you can just push that restore defaults again.

We’re just going to choose those images one more time. The rules for the images still exist.

>>Chris: I want to make a point about the images since this came up earlier. Rick had some custom CSS where he had full image path references to it, http…byobwesite, etc. So earlier this year was the big shift to SSL sites, to https protocol on sites. That implies a ton of work on the part of the webmaster to get everything up to that specification.

Part of that and one that’s really kind of hard to bring up to spec is URL references like that in CSS. You never want to use the full reference with the protocol. So you never want to put http or https on any image references.

With Thesis specifically I recommend if you are working with the Skin Editor to upload all images that are relevant to the design not like an image that goes with your posts but images for the design to this images panel that you are looking at now. And then you can always use the reference where it says CSS reference there you can just use only that reference to call upon that image at any time from any CSS, custom CSS or otherwise. And that is always going to work regardless of the protocol on use in the site.

So if you are developing on http and your client is on https, if you stick to those references that’s always going to make that transition seamlessly. By the same token if you just want to plan for the future or just operate in a way that I would consider to be a best practice…say you still need the full URL reference because you are not using the Skin images folder for example, just use //yoursite.com path to that image. Just omit the http: or https: and that way the browser automatically choose what that protocol should be. So it’s just a future proof way of writing URLs. And this even extends to links and stuff like that inside your own posts. Do not use the protocol.

>>Rick: I didn’t know that. I learned that from you when I was looking at how you changed the AWeber box, the Google Plus button, that stuff. Where there was a hard code to http in there and I wanted to see how you resolved it when you did the update. When I looked at the code I saw that and that was the first time I’ve actually ever seen that, the //.

>>Chris: Yeah, me to. I can’t believe this wasn’t on my radar for 10 plus years. It just seems like that would always be the way to do it, that way in case of anything changing you don’t have to change anything. I transitioned my personal website SSL late last year and man what a drag that was to try and go through everything and find all the lingering references to protocols. Not fun.

>>Rick: It took me several hours when I moved BYOBWebsite even though I could automate stuff I had hard coded references all over the place in my PHP that I had to go find and undo. That took a long time.

Back to it. Our CSS is fine. Let’s just reload this just to make sure everything is working the way we want it to. It’s not. Oh, right. In this case we haven’t set up our image yet. Because we are using that Barking Chihuahua Cafe we still have to set up…it doesn’t have the header image.

>>Chris: You can add it to the code in a couple seconds. You want to try that? People might be interested to see how that works.

>>Rick: Sure.

>>Chris: Like you can add it to the skin dot php file. You know how to do that?

>>Rick: Of course. I’ve got the site up so we’ll come over here. Let’s reload it though. Let’s go down to Thesis 2.3, Thesis Skins and then we’re in skins here. Let’s come back to this because GoDaddy is being really slow and it’s going to take too long to just sit here and wait.

The very last part of this is back in Manage Skins where you now have this create zip file. When you click that create zip file you get a zip…click here to download the zip file. This is now a fully loading skin that will look exactly as you left it. It doesn’t have the little php that we are going to add to put that header back in but actually it doesn’t matter, we don’t have to have it live anymore. Now that I have a copy of it here.

Extract all. Now that we’ve done that I can bring up the Editor and bring up Skin PHP. Inside of this, what’s the filter Chris?

>>Chris: It’s functionality parameter is header underscore image. Public too, public functionality array. This is actually a really cool process to see how you add pieces that add very dynamic and very fully implemented functionality to any skin.

>>Rick: It’s just Thesis header image right?

>>Chris: No, it’s just header underscore image. Then you do the equal sign and then the carrot to make it an arrow true. You’ve got to set that parameter to true. While we are at it, go ahead and add another one was well. Just add logo. Do logo true.

And there’s one more that I will utilize in all future skins that I did not in Classic Responsive for compatibility reasons and that is legacy underscore image underscore support. That nukes the Thesis post image and also the Thesis thumbnail image so they don’t show up in post meta and they don’t cloud some of the interface screens.

>>Rick: Since this is a brand new site we’re not using Thesis images. It’s legacy what?

>>Chris: It’s legacy image support with underscore in spaces. And you’re going to set that one to false. And that actually makes those boxes not appear I think in the Skin Editor as well. Basically just turns them all off.

>>Rick: That’s nice and all but for people who are developing like a reasonably complex content management system. The access to more than one different image on a page, that is actually pretty useful to have a featured images one thing and to have either a differently cropped image for your thumbnail or some other different kind of image for a different application.

>>Chris: I see this all the time. So what you’ll see is a service like a twitter card or facebook embed, they will pick up an image but the image that they pick up may not be this huge banner image atop your article. You may not want that so that’s a perfect example of when you would want two big images associated with your post.

Then on top of that there actually are some interesting output concerns with the Thesis Post Image versus the WordPress Featured Image. The Thesis Post Image is actually way better. It’ll output just better HTML, better control of your captions, things like that. It’s just a better designed system because it’s fully designed whereas the WordPress featured image is just a pointer and then skins or themes have to decide how best to implement it. And it has some limitations.

It’s something to consider but your point is absolutely valid and really could be a game changer so people who need that kind of functionality on the site.

>>Rick: Well, it’s either that or they have to install a plugin that gives them other images. That’s always a possibility.

I never connected to the server here with GoDaddy so I’ll have to show this stuff in another video.

0 Comments… add one
0 comments… add one

Leave a Comment