Build Your Own Business Website header image

Thesis 2.1 Launch Party

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

This seminar focuses on the basics and is a great place to start for beginning Thesis users since no coding is required for any of the customization shown. It’s also a good foundation for the DIYer who wants to work on more extensive customization. We cover the new Thesis 2.1 interface and then dive into customizing the Thesis Classic Responsive Skin. We show how to add a header image, set site colors, change styles with the new Design Options, as well as how to add and style widgets.

Six Reasons Thesis 2.1 Will Knock Your Socks Off

  1. Thesis 2.1 Makes a Responsive Site EASY
  2. Thesis 2.1 Exploits Latest SEO Strategies
  3. Thesis 2.1 is Infinitely Customizable
    • For the non-tech user –
      • Complete control over the fonts on your site
      • Color Scheme Generator
      • Complete control over the colors on your site
      • A ton of control over the configuration and layout of your site.
    • For the DIY Techie & Web Designers
      • You can have different templates for EVERYTHING
        • Pages
        • Posts
        • Post types
        • Category Archives
        • All taxonomy Archives
        • Post type archives
      • As many widget areas as you like, wherever you want them
      • As many menus as you want, wherever you want them
      • There are NO HTML limitations
  4. Thesis 2.1 Allows Very Complex Customization Via Drag and Drop
    • Much less Code Required
    • Not everything is drag and drop
    • This power comes with the need to learn
  5. Thesis 2.1 Almost Entirely Eliminates the Need for FTP
    • Except for some troubleshooting & advanced work, everything happens in the dashboard
    • No More Permissions to set or adjust
    • No More folders to rename
  6. Thesis 2.1 Almost Entirely Eliminates the Need for a Separate Code Editor

The Thesis 2.1 Interface

  1. Menus
    • quick select menu
    • Thesis drop down menu
  2. Thesis Home
  3. Skin Menu
    • What’s a skin?
    • What is the skin menu?
  4. Site Menu
    • what is the site menu?
  5. Boxes
    • What is a box?
  6. Packages
  7. More

Introduction to Customizing the Thesis Classic Responsive Skin for 2.1

  1. The changes we’re going to make
    • The site’s colors
    • The width of the page
    • Add a header image
    • Remove some elements of the skin
  2. Thesis Golden Ratio Typography
    • Designed for readable websites
      • Font size
      • Font style
      • Column width
    • Everything starts with the font size
  3. Start in Design
  4. Layout & Dimensions
    • Layout
    • Dimensions

Add a Header Image to Thesis 2.1

  1. Add header image
  2. Figure out the size
  3. What happens when the image is too big?
    • it scales to fit
  4. What happens when the image is smaller?
    • it leaves space to the right

Set the Site Colors with the Thesis 2.1 Color Scheme Generator

  1. Thesis Color Scale
    • Monochromatic
    • Dark to light
    • Gray scale
    • Default
  2. Complimentary Colors
  3. Our color scheme
    • primary text – 111111
    • Secondary text – 673300
    • Links – ab691f
    • Borders & highlights – 679da5
    • Interior backgrounds – cccc5e
    • Site background – ffffff

Set Your Heading Styles with Thesis 2.1 Design Options

  1. Choose Headlines from Layout, Fonts, Sizes & Colors
    • Font family – Georgia
    • Font size – 36px
    • Color – 669ca4
  2. Choose Sub-headlines from Layout, Fonts, Sizes & Colors
    • Font family – Georgia
    • Font size – 24px
    • Color – 683400
  3. View the result

Add Sitewide Video, Images or Text with the Thesis 2.1 Text Box

  1. Add some text
  2. Get a Vimeo embed
  3. Add an image
    • Create a sandbox page
    • Insert an image
    • Paste the code
  4. It will parse shortcodes
  5. Hide it altogether

Add Your Own Copyright with Thesis 2.1 Attribution

  1. Remove the attribution
  2. Include your own attribution text
  3. Add an attribution link

Create a Widgetized Footer with the BYOB Simple Thesis Classic Responsive Footer Widgets Box

  1. Download the Box from BYOBWebsite
  2. Install the box
  3. Activate the box
  4. Box menu
  5. Add some widgets
  6. Advanced option – remove the widgets from a specific template

Stye Your Widget Areas with Thesis 2.1 Design Options

  1. Add some widgets
  2. Choose Sidebar Headings from Layout, Fonts, Sizes & Colors
    • Font family – Georgia
    • Font size – 24px
    • Color – 669ca4
  3. Choose Sidebar from Layout, Fonts, Sizes & Colors
    • Font family – none
    • Font size – 14px
    • Color – 111111
  4. Check Result

Remove Author and Date References with Thesis 2.1 Content Options

  1. Skin Content
  2. Post/Page Output
  3. Miscellaneous

Session 1 – Question and Answer

1 Comment… add one
1 comment… add one
  • Alison Smith October 21, 2013, 1:31 pm

    Great info that I can pass on to my clients. They’ve been frustrated by 2.x and this will help.

Leave a Comment