Build Your Own Business Website header image

Creating Skins

How to Add Custom Fonts to Custom Thesis 2.1 Skins

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

In this session we show how to use the Thesis Font API to add a Google Font to the skin so that it shows up in the typical font drop down lists. Member: I have another question. Rick: Uhuh. Member: So I want to use font kit from adobe and, Rick: And which font? Typekit

How to Add the Viewport Meta Tag to a Thesis 2.1 Skin

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

In this session we demonstrate how to add the viewport meta tag to a Thesis 2.1 skin by placing the code inside the skin.php. There are some devices that will try to scale the whole page to fit instead of making it change in size to fit the window so we demonstrate how to set

Introduction to Creating Custom Skins in Thesis 2.1 – Part 12 – Distributing your Skin

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now that we've got the Thesis 2.1 skin essentially ready to distribute, we'll come back over to our Thesis Dev Tools Box. Then we're going to enable the active skin to be downloaded as a zip file for distribution and save our options. I should show you what the skin contents look like right now.

Introduction to Creating Custom Skins in Thesis 2.1 – Part 11 – Build the Front Page Template

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Now that we’ve created our Page Template we're going to create the Front Page template for our new Thesis 2.1 skin. And we're going to add something new to the Front Page template and that is going to be a Feature Box. I'm just going to add the feature box in the Content Area. So,

Introduction to Creating Custom Skins in Thesis 2.1 – Part 10 – Create the Background Styles

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Nav Menu styles are now created so let's just wrap up the styles. We're going to create the background styles for our Thesis 2.1 skin. We're going to start off creating a background color and background image for the body. In order for us to do the image, we have to actually load an image.

Introduction to Creating Custom Skins in Thesis 2.1 – Part 9 – Create the Menu Styles

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now that we have the page text styles of our new Thesis 2.1 skin created, he next thing we're going to do is create our Nav Menu styles. And just like before, we are going to add a package. It's going to be a Horizontal Dropdown Menu package. Menu and we're not going to change

Introduction to Creating Custom Skins in Thesis 2.1 – Part 8 – Create the Page Text Styles

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

We’ve gotten our structural CSS written for the Page Template of our new Thesis 2.1 skin and the next thing to do is to style the text. In our text style, we have a bunch of different things we have to style and some of these we're going to just write from scratch and some

Introduction to Creating Custom Skins in Thesis 2.1 – Part 7 – Create the Page Structural Styles

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Now that we’ve added Content to the Page Template in our new Thesis 2.1 skin, the next thing we're going to do is create the structural styles. Let’s come over here to the Skin Editor and go to CSS. You can see there's absolutely no CSS, right, not a stitch of CSS. So the first

Introduction to Creating Custom Skins in Thesis 2.1 – Part 6 – Add Content to the Template

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The next thing, now that we’ve created the Page Template in our new Thesis 2.1 skin, is to add content to the Page Template. And we'll just start up with the Header. Now, our Left Header Area is going to be a text box for our header image. So we'll come down here and go

Introduction to Creating Custom Skins in Thesis 2.1 – Part 5 – Build the Page Template

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

We’ve create our bare bones Thesis 2.1 skin and now we’re going to build the Page Template. But before we dive into the page template, the very first thing we're going to do when we create this page template is develop the HTML structure. I know some people here aren't going to be sure what

Introduction to Creating Custom Skins in Thesis 2.1 – Part 4 – Create your First Thesis Skin from Scratch

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

So that's the file structure of skins in Thesis 2. Now, what we're going to do is create our own bare bones skin to start but before we do that, I want to just show you the sort of bare minimum skin. Well, we'll look at the bare minimum Classic Responsive. So if you look

Introduction to Creating Custom Skins in Thesis 2.1 – Part 3 – File Structure of a Thesis 2.1 Skin

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

So you’ve got a grasp of the relationship of Themes, Child Themes and Thesis 2.1 Skins and now we need to understand the Thesis 2.1 file structure before we can dive in and start creating a skin. I would like to direct your attention again to a seminar resources here and I have a diagram

Introduction to Creating Custom Skins in Thesis 2.1 – Part 2 – Themes, Child Themes, Thesis Skins

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Now that you know the basic skills necessary to create a custom skin in Thesis 2.1, it's necessary to gain an understanding of the relationship between Themes, Child Themes and Thesis 2 skins. Now, a typical WordPress theme primarily consists of a combination of template files and CSS style sheets with potentially some additional custom

Introduction to Creating Custom Skins in Thesis 2.1 – Part 1 – Introduction: What are the Basic Skills Necessary in Order to Build a Custom Skin

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Good morning everybody and welcome to this special seminar, An Introduction to Creating Custom Skins in Thesis 2.1. Today, we’ll be creating a custom skin and in particular the custom skin that we're creating is The Barking Chihuahua Cafe skin. This skin right here and we will be creating this skin from scratch. You've probably

Introduction to Creating Custom Skins in Thesis 2.1

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Thesis 2.1 introduces a whole new set of tools for making and distributing custom skins. Those tools include a new API for Design, Content and Display options, a new developer friendly skin editor interface, new “valet methods” for incorporating custom programing and new tools for copying and distributing skins and parts of skins. In this seminar we will review some of those tools as we create a simple skin from scratch. This seminar includes some light PHP and some significant HTML and CSS.

Lesson 9 – Part 7 – Combine the Sample Package with the Single Element Style Package

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now, really what you want to do is add some padding and margin and other things to this as well. By the time you get to this point, what is really easy to do is to just you know, I went to this process of showing you how to gradually add stuff into it because

Lesson 9 – Part 6 – Refine the Package to Include Width, Height and Float

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

The next thing we're going to do is add height, width and float to this so that this box couldn't be someplace else besides where it can sit as an attention box in the middle of content. So that's the next step is, to come back over here and look at our options and we

Lesson 9 – Part 5 – Add Custom CSS Options to the Package

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

The next thing we're going to do is start creating a package. We're going to start off by copying this package and just like the last one, it's going for refinement but now we're going to call this one trbm_attention_box_package and we'll just call this 'Attention Box Styles' and then we're going to take the

Lesson 9 – Part 4 – Using Thesis 2 Standardized CSS Options

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now, what we're going to do is add Thesis 2 Standardized CSS Options to a package and we're going to start that process off by looking at the Thesis CSS API file. The Thesis CSS API file is right here, it's under lib, core, api, css_api and what it does is it simplifies the process