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
