Build Your Own Business Website header image

Full Width Skin

How to Create a Full Width Skin in Thesis 2.0 – Part 9 – Create a Full Width Slider on The Front Page

Difficulty Level -

Listed Under Lesson Subjects -

Applies to -

Finally we create a custom template for the Front Page that removes the sidebar and adds a dramatic full width slider. This allows us to have a scrolling slider with images that span from one edge of the browser window to the other. So the next thing we’re going to do is create a full

How to Create a Full Width Skin in Thesis 2.0 – Part 8 – Style the Menu

Difficulty Level -

Listed Under Lesson Subjects -

Applies to -

Here we discuss how to style the menu using the Horizontal Dropdown Menu package. We demonstrate how to use the settings to get close and then add a little custom CSS code to complete our design. This demonstrates the Thesis Theme 2.0’s ability to combine point and click settings with custom code.We are going to

How to Create a Full Width Skin in Thesis 2.0 – Part 7 – Style the Header and Backgrounds

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

We add a clickable header image to our skin in Thesis 2 while maintaining the use of the tag line. Then we begin adding background images to the skin. We are using a combination of layered background images to produce a semi transparent page that allows the background to show through. The next thing to

How to Create a Full Width Skin in Thesis 2.0 – Part 6 – Create a 4 Column “Fat Footer”

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

In this part of the seminar we demonstrate how to create a full width, 4 column, widgetized footer - often referred to as a “fat footer” in the Thesis Theme 2.0. We discuss the use of Widget Boxes and Widget Packages and configure them to produce the desired result. There is one other thing I

How to Create a Full Width Skin in Thesis 2.0 – Part 5 – The Relationship between HTML Boxes and CSS definitions

Difficulty Level -

Listed Under Lesson Subjects -

Applies to -

This can be one of the most difficult concepts for beginners to Thesis 2.0 to understand. We take an in depth look at the id and class attributes of the HTML Boxes and discuss how they link those boxes to the CSS Packages. We also demonstrate how to troubleshoot errors. It’s important to understand the

How to Create a Full Width Skin in Thesis 2.0 – Part 4 – The Process of Creating a Template

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Having demonstrated using HTML Boxes and CSS Packages we now discuss the underlying concepts that make this work. Here we discuss each of the Box and Package types included in the Thesis 2.0 core and demonstrate how to use them. What did we just do when we created that template in Thesis 2? Well, the

How to Create a Full Width Skin in Thesis 2.0 – Part 3 – Create the Styles for the Full Width Page Template

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Once the HTML elements are created and arranged we move on to creating and configuring the Thesis 2.0 CSS Packages. We look at how the packages are linked to the boxes that they style and discuss the use and configuration of the Columns package. Now we come over to our CSS section and the CSS

How to Create a Full Width Skin in Thesis 2.0 – Part 2 – Create the HTML for the Full Width Page Template

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

We demonstrate the process of using the Thesis 2.0 Skin editor to create a 2 column full width template. We create the various HTML Boxes, place them in their order and assign them appropriate classes and Ids. Now what we’re going to do is select our page template to edit. As I do this, the

How to Create a Full Width Skin in Thesis 2.0

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Learn how to create a Full Width skin from a “page width” template layout in this 9 part seminar. We demonstrate how to add full width background images, how to customize the front page template and how to add full width sliders to the skin. We also include demonstrations of a clickable header image and menu customization.