Build Your Own Business Website header image

Lesson 4 – Create the Typical Styles

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

In this lesson fourth lesson, Create the Typical Styles, of our Create a Responsive Skin for Thesis 2.0 course we dive right in and set up the general formatting for the header, content, typical sidebar and footer. This is followed by a review of our site background in the PSD files, after which we show how to extract the primary styles for the files.
After the styles are in place we show how to style the typical background, page content, sidebar, footer and the main nav menu. The styling includes adding color, using images, adjusting padding, font size, font alignment, margins and setting link styles.

Setup the General Formatting

  • Header
    • Remove side padding
    • Add top & bottom padding
    • Add menu wrapper & float
    • Change site title link
    • Setup font color variables
  • Content
    • Headline
    • List style
  • Typical Sidebar
    • Add id to element
    • main font
    • Heading
    • List
    • typography
  • Footer Sidebar
    • main font
    • Heading
    • List
    • Typography

Map Out the Site Background

  • Viewing the PSD
    • turn off everything but background
    • background color
    • background texture image
    • background shadow image
    • footer main background color
    • footer bottom background color
  • Body
    • color
    • texture
    • shadow
  • Footer
    • main color
    • bottom color

Extracting the Primary Styles from the PSD File

  • Font Colors
    • Primary Text – #444955
    • Primary Link – #2361A1
    • Sidebar Header – #ffffff
    • Sidebar Text – #444955
    • Footer Header – #8C94AC;
    • Footer Text – #606574
    • Footer Link – #88888 / #ffffff
  • Background Colors
    • Overall background – #444955
    • Footer top – #0f131f
    • Footer bottom – #040507
    • Page background – #232631
    • Main Sidebar – #eef0f5
    • Sidebar Heading – #9097a9
  • Create the top shadow
  • Create the texture
  • Add the images to the skin

Style the Background

  • Add the body background color & shadow
    • Setup variable
    • Add the variable
  • Using 2 background images in the same HTML structure
    • W3 Schools
    • syntax
    • first things first
  • Add the New Footer Structure
    • Footer bottom area
    • Wrapper
  • Add the Footer color
    • Setup variable
    • Add top color
    • Add bottom color
  • Give page elements a color
    • Content box

Style the Typical Page Content

  • Background for content
    • Why use an image?
    • Calculating the image size
    • Create the image
  • Adjust the Headline
    • border
    • padding

Style the Typical Sidebar

  • Adjust the Sidebar padding
  • Adjust the Sidebar Heading
    • background
    • padding
  • Adjust widget padding
    • div
    • ul

Style the Footer

  • Style Sidebar Heading
  • Style Footer Links
  • Adjust Padding
  • Adjust footer bottom font size
  • Adjust footer bottom text alignment
  • Adjust footer bottom margins

Style the Main Nav Menu

  • Referencing only the Header Menu
  • Reset the whole menu
    • border
    • margin
    • overflow
  • Set Typical Link
    • background color
    • border
    • font-weight
    • font-size
    • letter spacing
    • text transform
    • padding
  • Set the hover
    • cursor

Question and Answer Session

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment