Post on 31-Dec-2015
description
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.
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; }
Adding A Widget Anywhere• HTML Editor
1. Add a Widget Box
2. Drag to desired location
3. Drag Widgets into it.
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;
}
}
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