Build Your Own Business Website header image

Lesson 8 – Setup the Appearance of Your Site

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

In lesson 8 of our Build a Responsive Professional Website using Thesis 2, we show how to setup the appearance of our professional services website. We start off by learning how to manually upgrade the Agility skin for Thesis 2. Agility comes with an automatic update system built in, but knowing how to manually upgrade boxes, packages and skins is an important skill set for beginners to develop. Next we set up all of our basic font sizes, colors and styles using the Agility Skin Options.

The lesson continues by setting up the header and adding background images and color. Next we learn how to use Thesis 2 packages to style the menu and then add a second menu with a second menu style. The lesson wraps up with a discussion of the Thesis template system, including which templates get used in each situation and then we learn how to migrate our changes from one template to another.

How to manually upgrade Agility

  • Make a backup of your skin data
  • Download the backup
  • Delete the Skin
  • Download the new skin
  • Install the skin

Configure Font Sizes & Colors Using the Agility Nude Skin Options

  • Download Cheat Sheet
  • Typical font styles
    • font family – georgia
    • font color – #242424
    • link color – 247d00
    • hover – 737373
  • Page Heading Font Styles
  • Widget Styles
    • Heading Arial 24px, #701A01
    • Typical text – Arial

Style the Header Area of the Agility

  • Add background image to single column header
  • Styling backgrounds with color
  • Styling backgrounds with a background image
  • Add Background Image to header
    • Understanding background image tiling
    • Our background image
    • Upload the background image to skin images
    • Add the image address header area
    • Set image repetition and position

Style the Top Menu Area of Agility

  • Style the Top Menu Area Background
  • 2 elements to style
    • text
    • background
  • 5 states to style
    • link
    • hover
    • active
    • current
    • current parent
  • Style the font

Style the Bottom Menu

  • Choose the correct package
  • Make the background color transparent
  • Adjust the text color variables

Style the Footer Backgrounds

  • Identify the packages to style
  • Change the variable colors
  • Add the variables to the style

Understand Thesis Templates

  • Understanding WordPress templates
  • The Thesis core parent templates
    • Home
    • Page
    • Single
    • Archive
  • The difference between Home and Front Page
  • The parent template/child template relationship

Update the Other Templates

  • Update the Page template
  • Update the Home template
  • Update the Single template
  • Update the Archive template

Question and Answer

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
4 Comments… add one
4 comments… add one
  • Zita Gustin January 21, 2013, 1:54 am

    Where are the videos for this lesson? Am I missing something?

    • Rick Anderson January 21, 2013, 7:29 am

      Zita, this lesson was just taught on Friday. The lessons will be posted by Wednesday.

  • John Burns March 6, 2013, 1:17 am

    Rick Anderson
    I am very impressed with your ability to teach.
    The way you have laid out this whole website is brilliant.
    I have learned so much is a short time.
    I am going to build my website as the same as yours. I cannot enhance it in anyway.
    You have saved me so much time in learning that i will get to market far quicker
    John Burns