Build Your Own Business Website header image

Skin Editor – Skin CSS

Thesis 2.1 for Web Design Professionals – Part 4 – Creating and Using Variables in Thesis 2.1

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now that you understand the basics of how to use the Thesis 2.1 Code Editor the next thing I want to show you are the variables and how they work. So we come over here to the Skin Editor and go over to css. You have these variables. Now, we’re going to look at different

Create a Magazine Style Blog Site with Thesis 2 – Part 23 – Style the Related Posts Display

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now we’re going to style the related post display. Under our CSS and let's see, this is Query Box Post Format, yes, we're just going to do one more of those. Post Formatting, it's going to be Related Posts and then it's going to be .query_box.related. The main thing we want to do here is

How to Create a Custom Opt-in Form with MailChimp & Thesis 2 – Part 4 – Style the Email Field

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to -

The other thing we need to do is style this the same way this is, right? This is the type=text, this is type=email and we could change that to type=text or we could add the type=email to our style. We have a typical form input here someplace, typical post box, typical text input, this is

How to Create a Custom Opt-in Form with MailChimp & Thesis 2 – Part 3 – Style the MailChimp Submit Button

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

Now that we’ve added our background image and submit button to the MailChimp form in Thesis 2, we’re going to move on to styling the submit button. Let's come back over to our images and get this image button. Notice it's 70 pixels by 70 pixels. We'll copy that image, go back to CSS, come

How to Place a Border Between the Content and the Sidebar in Thesis 2

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we show how to place a border between the content and the sidebar in Thesis 2 by giving it an HTML class and adding a single elements style package. We also show how to customize the options for the border. Member:  But you know how Thesis 1.85 had that nice little grey

How to Create a Feature Box with Graphics, Text and an Aweber Form in Thesis 2 – Part 4 – Arrange the Form Fields

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

We’re going to continue to refine the AWeber Opt-in form inside our feature box in this Thesis 2 template. We want to float this thing left. That was af-element. And let’s just copy that. Then we’ll just come back over to the CSS and down in our opt in background, we’re going to go to

How to Create a Feature Box with Graphics, Text and an AWeber Form in Thesis 2 – Part 3 – Style the Submit Button

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

Now that we’ve added the AWeber Opt-in Form and a background image to the feature box in Thesis 2, we need to style our submit button. Let’s inspect that element. This is input name = submit class = submit. So what I’m going to do is take this opt in and then for the input

How to Add a Background Color to the Sidebar in Thesis 2

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

In this session we demonstrate how to add a background color to the sidebar in Thesis 2 using a single element styles package. We also demonstrate how to use a background image to make the sidebar color extend all the way to the bottom. Rick:  Did you want me to demonstrate that color in the

How to Change the Menu Colors in the Agility Skin for Thesis 2

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

In this session we show how to change the menu colors in the Agility Skin for Thesis 2 by changing the variable value. This will change the text color for that variable everywhere. Agility has variables for all the text colors including the primary menu color, hover color and the other background color. Member:  On

How to Have Different Styling for a Second Menu in Thesis 2

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we show how to have different styling for a second menu in Thesis 2. This second menu is the same menu used as the main one, just with different styling. We add the main menu again in the footer and style it with a new horizontal dropdown menu package. Member:  I just

A Beginner’s Guide to the Thesis 2.0 Skin Editor – Part 11 – Example #2, Add Widget Areas to the Footer

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - , ,

Applies to -

Now we’re going to do something that’s more complicated. And the reason I’m going to… I’ve demonstrated this a bunch of times but I’m going to demonstrate it again because it’s important for people to understand the columns package. And what we’re going to do here is we are going to create footer widgets in

A Beginner’s Guide to the Thesis 2.0 Skin Editor – Part 10 – Example #1, Change the Background Style for the Site

Difficulty Level -

Listed Under Lesson Subjects - ,

Applies to -

So now what we’re going to do is take a look at 3 examples and then I’ll start taking questions. Anyway, 3 examples. Now, the first example is a very simple one and that is we’re going to change the background of our site. Remembering that our entire site is wrapped in this body so

How to Use the Horizontal Drop down Menu Package in Thesis 2.0

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we show how to use the horizontal dropdown menu package in Thesis 2.0 and how to customize its settings. We also demonstrate how to style the submenu separately from the main menu by creating a new horizontal dropdown menu package for the submenu and adding additional styles to it. Rick: Okay, tell

How to Set Up a Fixed Background Image in Thesis 2.0

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we show how to set up a fixed background image in Thesis 2 by giving our image a position of top center and fixed in the Background package. Absolute positioning doesn’t work for backgrounds. Member: So this is the challenge that you know, I’m putting myself to and I’m creating this website.

Thesis 2.0 – How to Solve Column Alignment Problems

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we discuss how to solve column alignment problems with Thesis 2. We review the site in Firebug and show how to change the width of an image and add some padding to change its location.  We also talk about making sure that you set up the columns with the right widths so

Thesis 2.0 – The Difference Between Skin CSS and Custom CSS

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

In this session we discuss the difference between skin CSS and custom CSS in Thesis 2.0 and what happens before the CSS is compiled. And we discuss the order in which these sections of the skin editor are written to the CSS file. What’s the difference between skin css and custom css? Skin css is

What’s New in Thesis 2.0 Part 9 – Style the Widgets

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

In this session we show how to style the widgets in Thesis 2.0. On our demonstration site we have widgets set in our sidebar. We edit the existing Widget package to set the general style then we create new packages to add different colors to the widget heading, widget font and widget link. We also

What’s New in Thesis 2.0 Part 6 – Create a Custom Menu Style

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - , ,

Applies to -

In this session we show how to create a custom menu style in Thesis 2.0 by editing the existing menu package to create the style we want for font, alignment, padding and border settings. In order to place background images behind the menu items, we create a menu link package and a menu link hover

What’s New in Thesis 2.0 Part 4 – Create a 4 Column “Fat Footer”

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - , , ,

Applies to -

In this session we show how to create a 4 column widgetized footer or what is known as a “Fat Footer” in Thesis 2.0. No coding is necessary in this new system. We create 4 Container boxes for the columns and 4 corresponding Widgets boxes to place inside the columns. Then we set up a

What’s New in Thesis 2.0 Part 3 – Create a 2 Column Layout

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - , ,

Applies to -

In this session we customize the Thesis 2.0 classic skin and show how how to create a 2 column layout. We begin with the HTML editor and create the structure using a box. We show how to use the drag and drop feature to add the box inside the body area and move it around.