Build Your Own Business Website header image

Thesis 2.0 Launch Party Part 2 – The New Thesis Interface

Difficulty Level -

Listed Under Lesson Subjects -

Applies to -

The Two Main Interfaces

That’s all that you’ve been talking about, we’re just going to jump in to the interface. Now, this is the site that I’m working on so we’ll just come over here to the dashboard, Thesis 2.0 is installed here. Now I’m using the Thesis 2.0 alpha version 2 so there’s going to be some things about this that are different when this actually gets released. Thesis has generally two main interfaces. It has the theme interface like this and it has the template editing interface.

Right now, the only way to get to the template editing interface that is, in this Alpha version is to open up a page and say, “The current thesis template is”, down here at the bottom and you click on that, it will take you to the template editor. It not only takes you to the template editor but it also opens up in a separate window a canvas that shows you the changes as you make those changes in the template editor which is absolutely spectacular for somebody who’s using multiple screens because you can drag the template or the canvas off to one screen and as you make your edits in the template editor, they show up over here in this screen.

For the purposes of the video, it’s not going to be particularly useful to us because we don’t have that much screen real estate in the video but this will be something that you like. If you don’t have multiple monitors, you’re going to want to have multiple monitors in order to accomplish this.

Our two main parts of our interface, we have the Theme Settings Interface and we have the Template Editor Interface. Now, the Theme Settings Interface has site settings so for example, this is where you would add or edit various tags and scripts for the head of your site, here’s where you can add some tracking scripts, here’s where you can select the 404 page rather than having this an automatically generated one.

The next one is skins section. Right now, there are only two skins installed, these are the default skins that come with Thesis. The first one is the Thesis Classic skin which is the one we’re working on right now. There’s also a Bare Bones skin that comes along with this. You can upload additional skins simply by selecting upload and picking the skin that you want to add then uploading it and activating it.

Customize the Bare Bones Skin

This is very similar to the process of activating another theme or a plugin inside of WordPress and we’ll talk more about skins later. What we’re going to be doing here today is just customizing the Bare Bones skin. Once it’s customized, we can export it as our own skin and pass it around exported and you’ll be amazed at what you can do with this.

By this time next week, I will have some skins that will be available to members to download as places to start with as well including a couple of mobile responsive skins. I understand that the skins that Thesis is going to be developing for this are also going to be responsive although at the moment, the Thesis Classic skin is not currently responsive.

Boxes

The next thing you have is boxes. I’m going to talk more about what boxes are but they are essentially plugins and this is where you can upload boxes to your Thesis site. Once you’ve uploaded them, you can select certain boxes to activate again very much like the plugins.

Packages

Packages is essentially systems of CSS code editing. Now, Thesis 2 comes with a whole bunch of packages already installed but as time progresses, people will end up developing additional packages. For example, I’m going to be creating a Nav Menu styling package that brings all of the Nav Menu styling options that I have in my Thesis Nav Menu plugin that will bring all of those options to Thesis so that will end up being a package and not a plugin in Thesis 2.0.

You can select and install packages here and you can click on this to go to your site then there’s just the standard background information here under More. That’s the Thesis options with Thesis site settings. I believe that there will be other menu items below Thesis here in the immediate future like sometime later today but we just can’t see them yet because we’re working on the Thesis Alpha version.

3 Parts of the Template Editor

The template editor has 3 sections to it. It has the HTML section, the CSS section and the images section. The HTML section is the place where you layout the HTML of a template. If you click on this page template here, you can see the Thesis has this core templates. It’s got a home template, it’s got a single template, it also has an attachment template and because I’ve added a slideshow to this that creates a custom post type called “Slides”, it also has a template for those slides.

There has a page template and you can have a front page template and a 404 page template. Then it has archive templates and you can set up your category templates differently from your tag templates, differently from our custom taxonomy template so on and so forth. Each of these things can be their own template.

Now, if you don’t set up anything special for these, they’re going to take the archive template style. If you don’t set up anything special for these, they’ll take the page template style so on and so forth here. You have the ability to create custom templates so this skin comes with a landing page template but anytime you wanted a different page layout, you could click, Add New, create a new template and from every post, page, taxonomy, category, you can select a custom template to use.

Choosing a Custom Template

Just so that you can see what I’m talking about here, if we come on over to posts and we go to one of the posts that’s on the site then we select edit here, it gives you the opportunity to choose a custom template. Any template that’s listed in that custom template list will show up here. That was something that’s not available on WordPress and was never available in Thesis but now in Thesis 2.0, you can.

Same thing is true with categories. If you open up a category and you say, “Okay, I want the category design ideas to have a different template”, you put this information down here, come down to the custom templates and you can select custom template for this category, Archive Page and it can be different than the custom template you set up for say, a tag archive page. That’s what I mean by custom templates.

The same thing is true for pages. This has been the case always for pages in WordPress and Thesis so you can always choose a custom template here but that functionality is now been extended to every kind of page that Thesis renders.

You can also set up different kinds of Javascript libraries for a specific template, different footer scripts for specific template, different head scripts for specific template. Those of you who are using special tools for tracking certain things like sign ups or whatever, you can use a custom template for that purpose and add your tracking scripts to that page only. You never need to break open the code in order to add custom scripts to a specific page, post, archive whatever and this setting is different depending upon which template you’re working on.

Now, CSS, there are essentially two different pieces to it. There’s the CSS that is added via these packages and there’s Custom CSS that you can actually write. You’re never going to write CSS in the custom.css file anymore. If for some reason, you actually need to write a snippet of CSS code, you would write it here in this Custom CSS editor, you’re not going to need to use NetBeans to edit CSS anymore.

Skin CSS

The way this Skin CSS thing works is that, you have these various packages and each of these packages has a bunch of settings. For example, we look at the body package, this references the CSS body or the HTML body and if we come over and look at options, you can set all of your fonts. Your font size, font line heights, font variants, text color, you can set backgrounds, background images, different ways of connecting your background image, you can set the width of it, you can set borders and margins and padding.

Something that’s totally cool that Chris has done is he has included this typography calculator where if you specify the font size and the font style then tell them how wide the area is that this text is going in, it will automatically calculate all the line heights and spacing and everything does these things for you automatically so you don’t have to do that yourself. If you just kind of look at this briefly, you can see that sort of built-in ones are a 3-column layout package, site tagline, site title, header, footer, container.

By packages, what that means is it’s a collection of CSS styles that all work together and all apply to a specific HTML element. Somebody just remarked, “Oh my God, no more coding”. Like I said, the amount of coding you’re going to have to do can be considerably reduced. You need to understand what padding and margin is but you’re not going to need to remember how to add the padding and margin or what the correct syntax for padding and margin are for example.

Image Uploader

Then it’s got this images thing. The nice thing about this image uploader is that you can use this to store skin files and use relative URLs when you use these images. If you distribute the skin, so you save the skin you want to share with a buddy, say you’re a brilliant skin designer and you’ve designed this cool skin and you want to sell it, all you have to do is if you put your images in this image system and save them, it will go with your skin when you click export skin, all these will be packaged up together, all of the relative URLs will all be taken cared of. That’s a totally cool thing about this.

Somebody asked whether or not font size defaults to pixels. You can use anything you want. You can use pixels, you can use ems, you can percents, you can use picas, you can use any of the CSS units that you choose in any of these places. It’s not just pixels, it can be ems, it can be picas, it can be any of those things. Those are the 3 parts of the template editor, the HTML, the CSS and Images.

0 Comments… add one
0 comments… add one

Leave a Comment