Build Your Own Business Website header image

Lesson 5 – Create the Typical Styles

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Map Out the Site Background – Watch the Video

  • Fullwidth Framework Structure

    • 3 main structures
    • 3 page structures
  • 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 – Thesis Design Options
    • texture
    • shadow
  • Header

    • All transparent
  • Footer

    • main color
    • bottom color

Create the Background Images from the PSD File – Watch the Video

  • Create the top shadow
  • Create the texture
  • Create the bottom footer color
  • Add the images to the child theme

Style the Background – Watch the Video

  • Thesis Design Options

    • padding
    • background
    • page
  • Add the body background shadow

    • url
    • position
    • repeat
  • Using 2 background images in the same HTML structure

    • W3 Schools
    • syntax
    • first things first
  • Add the Footer background image & color

    • background image
    • background color
  • Make page elements transparent/

    • #header_area .page
    • #footer_area .page

Style the Typical Page Content – Watch the Video

  • Thesis Design Options

    • Fonts
    • Content Area
    • Header
    • Headlines
    • Sidebar
    • Footer
  • Add page padding and margin

  • Background for content

    • Why use an image?
    • Calculating the image size
    • Create the image
  • Adjust the Headline

    • border
    • padding

Style the Typical Sidebar – Watch the Video

  • Adjust the Sidebar Heading

    • background
    • font size
    • font-variant
    • letter-spacing
    • padding
  • Adjust sidebar padding

  • Adjust widget padding

Style the Footer – Watch the Video

  • Add some Widgets
  • Adjust text alignment
  • Style Sidebar Heading
    • font-size
    • color
    • font-variant
    • letter-spacing
  • Adjust widget li spacing
  • Remove link border
  • Change footer hover color
  • Adjust footer bottom font size
  • Adjust footer bottom text alignment
  • Adjust footer bottom margins

Style the Main Nav Menu – Watch the Video

  • 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

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