Build Your Own Business Website header image

Thesis CSS

Customize Thesis 2.1 Like a Pro

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

This lesson series takes beginners from no knowledge of HTML, CSS and PHP to being fully capable of customizing Thesis 2.1. You'll need no prior knowledge of CSS, HTML or PHP. If you already have Thesis activated on a WordPress site and are comfortable with the basics of WordPress then this is a great place to start.

Lesson 6 – Part 6 – Create Front Page CSS

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects - ,

Applies to -

The next thing for us to do is to create the front page CSS because we have quite a bit of this done but we haven't styled our widget areas. Actually, there is some styling that needs to happen here, our text style needs to change. I've forgotten, this doesn't even have a home page

Lesson 5 – Part 7 – Style the Main Nav Menu

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

I'm going to do one other thing and that is to style this top navigation menu. We're going to start off with design options and we will be doing some of these in custom CSS but we'll start by just doing what we can in Thesis Design Options. The font family is going to be

Lesson 5 – Part 5 – Style the Typical Sidebar

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

Right now what we're going to do is finish styling our sidebar. The first part of styling the sidebar is really just styling the heading. Remember that the heading has this nice big dark gray section here. That's what we're going to work on first and that gray color is 9097a9, grab that, refresh this.

Lesson 5 – Part 3 – Style the Background

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to -

So we've got our images cut out of the PSD file and we've got our images uploaded to the site. Now we're going to start styling the background. Before we style the background with CSS, I want to just go take a look at the Thesis Design Options on the site. Here we are on

Lesson 5 – Part 4 – Style the Typical Page Content

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The next thing we're going to do is move on to styling the typical page content and that is the section right in here, this is our typical page content. We'll start off going back to Thesis Design Options and start off with our fonts. We're using Verdana as our main site font, we're not

How to Create Custom Templates For Posts – Part 6 – Write the CSS

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Applies to -

This is the sixth and final lesson in a short series on creating custom template styles for posts. We will be using Thesis hooks and filters to create these “post templates”. In this part we create the CSS rules to make our templates layout the way we expect them to. Okay so that brings us

Lesson 4 – Customizing Backgrounds With Images and Color

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

An important tool in the arsenal of a designer is the CSS background image property.  Background images can be used as backgrounds for pages, to highlight elements of the site and to bring an artistic flair to an otherwise straight forward site.  One example of this is a Thesis theme website I recently finished designing for a

Lesson 2 – Part 1 – Introduction to Editing Thesis Using CSS

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Welcome to Lesson 2 of the Customize Thesis Like a Pro tutorial series. The Thesis theme is a remarkably flexible and relatively easily customizable WordPress theme framework. And the easiest way to go beyond the customization that’s available to you in Thesis Design options is to learn how to edit CSS. In this lesson, you’ll

Lesson 2 – Part 4 – Best Practices #2 Write the Minimum Code Necessary

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Welcome back to Part 4 of Lesson 2 of the Customize Thesis Like a Pro tutorial series. In the fourth part of this lesson, we are looking at the second best practice in editing the Thesis theme using CSS which is to write the minimum amount of code necessary. That may seem sort of simple

Lesson 2 – Part 5 – Best Practices #3 Use Thesis .custom Class

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Welcome back to the 5th part of Lesson 2 of the Customize Thesis Like a Pro tutorial series. In this fifth part of the lesson, we are going to continue looking at Best Practices rules and we’ll be looking at rule #3. The Thesis Theme Gives Priority to .custom class Rule number 3 says to

Lesson 2 – Part 6 – Best Practices #4 Use Descriptive and Unique Names

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Welcome back to the 6th part of Lesson 2 of the Customize Thesis Like a Pro tutorial series. In this part of the lesson, we are going to look at rule #4 which is when creating your own HTML structures, make sure you always use descriptive and unique names for the class and id selectors

Lesson 2 – Part 8 – Best Practices #6 Always Work on a Local Copy of Your File

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Welcome back to the 8th and final part of Lesson 2 of the Customize Thesis Like a Pro tutorial series. In this final part of the lesson, we are going to look at rule #6 which is always edit your local copy of custom.css for the Thesis theme. Never edit the live copy of that

Lesson 2 – Introduction to Customizing Thesis Using CSS

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

In this Thesis theme video tutorial lesson we will learn the basic principles of customizing the appearance of your Thesis theme website using CSS.  Fortunately the Thesis theme is designed to be very easily customized using CSS and if you don't know a thing about CSS it provides a very gentle introduction.  You can make

Troubleshooting Thesis Custom Templates – Part 2 – Column Layout

Difficulty Level -

Filed Under Topics - , , , ,

Listed Under Lesson Subjects - ,

The member has a Thesis custom template but needs to have custom CSS to make it look right. The site is set up as a 3 column layout while the custom template is a 2 column layout. We troubleshoot this in Firefox using Firebug and Web Developer. We write the css code to make this