THESIS What, Why and How Much

What is it?• Thesis is …

• A WYSIWYG Theme editor• An automatic css aggregator

• What that does for you …• Make major theme changes without a programmer• Speed up you site compared to purchased themes.

Thesis In WP Admin

The WP Theme Editor

The Thesis Editor

What You Need To Know …• Required Knowledge

• What is an HTML <div> tag • How to look up CSS options at W3Schools.com• How HTML and CSS work together.

• Resources • http://byobwebsites.com/• http://thesisvideotutorials.com• http://w3schools.com• http://www.webpagetest.org

HTML and CSS• HTML

<div class=“two_thirds”>

……….

</div>

• CSS• For A Laptop:

.two_thirds {

width: 67%;

float: left; }

• For Smartphone.two_thirds {

width: 100%;

text-align: center; }

The Thesis Editor

Setting Up a <Div> in Thesis

Setting Up CSS in Thesis

Adding A Widget Anywhere• HTML Editor

1. Add a Widget Box

2. Drag to desired location

3. Drag Widgets into it.

Adding A Widget Anywhere - 2

Images For The Theme• Thesis stores theme images in the skin, not the Media Lib.

Responsive Themes• No tools in Thesis-2 directly support Responsive Themes• The media queries are entered entirely by hand.• Example:

@media only screen and (max-width:740px), screen and (max-device-width:740px)

{

.header { width: 100%; }

.header > .two_thirds {

width: 100%;

text-align: center;

clear: both;

}

.header > .one_third {

width: 100%;

text-align: center;

clear: both;

}

}

Responsive Home Header

Q & A• Example of a Thesis ‘responsive skin’ you can purchase:

• http://demo.icustomizethesis.com/aroma/

• Example of a Theme built following the byobwebsites videos:• patinamarketing.com/mydemo

• Expected Investment• Build your first theme: 2 weeks• Learn HTML and CSS: 2 months• On-line training: $150 or free• Thesis: $87 to $197