Build Your Own Business Website header image

Lesson 8 – Set Up the Appearance of Your Site

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to - ,

In Lesson 8 of our Build a Professional Services Website using the Thesis theme and WordPress we show you how to set up the appearance of your small business/professional services website.

We begin by talking about how a Thesis page is laid out and what each part of the page contains. This sets you up to understand how to use Thesis Design Options to work on the appearance of your site so we move on to showing the available options. Then we begin work on the header area, showing how to add a header image, a favicon and how to create and style your menu. We also show how to use our BYOB Thesis Simple Nav Menu Plugin to style your menu further.

We finish the lesson by discussing how the Full Width Framework is set up and then how to configure header and footer backgrounds for that framework.

Understanding the Parts of a Thesis Theme Page – Watch the Video

  • Header
  • Content
  • Sidebar
  • Footer

Set up the Site Layout Using Thesis Design Options – Watch the Video

  • Site Layout

    • Columns
    • Column Order
    • HTML Framework
    • Outer Page Padding
  • Display Options

    • Comments
    • Administration
  • Fonts, Colors and More!

    • Body (and Content Area)
    • Content Area
  • Multimedia Box

Add a Header Image – Watch the Video

  • Determining the right header image size
  • What happens if the image isn’t the right size?
  • Make the Header Image clickable

Add a Favicon – Watch the Video

  • What is a favicon?
  • How to create a favicon
  • Upload favicon

Create the Menu – Watch the Video

  • Pick the menu type in Site Options
  • Create a Menu
  • Arranging the menu
  • Add other links

Style the Menu using Design Options – Watch the Video

  • 2 elements to style

    • text
    • background
  • 4 states to style

    • link
    • hover
    • current
    • current parent
  • Style the font

Install the BYOB Thesis Simple Nav Menu Plugin – Watch the Video

  • Introduction to BYOB Thesis Plugins
  • Download the plugin
  • Quick Installation
  • BYOB Thesis Plugin Options

Understanding the Full Width Framework – Watch the Video

  • Background vs Page

    • Background extends from edge to edge of the browser window
    • Page is bounded on 4 sides
  • Full Width Framework Division

    • 3 divisions
    • Page element

Configure Header and Footer Backgrounds – Watch the Video

  • Install the BYOB Full Width Backgrounds Plugin
  • Understanding the Full Width Framework
  • Plugin Settings
  • Add Background Image to header
  • Add Drop Shadow

Question and Answer Session – Watch the Video

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment