Build Your Own Business Website header image

Lesson 9 – Styling the Thesis Full Width Framework

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Please note that this course has been replaced with the new “Sell Your Digital Products with WP eStore

In this video tutorial we will look at how to style the Thesis Full Width Framework. This framework provides the opportunity of layering images on top of each other. It also allows a site style that has become popular recently that divides the site visually into layers.  We will go through our visual diagram of the page layout to illustrate the differences between the full-width and page framework.

In this ninth lesson we will focus on some of the more technical aspects of customizing Thesis using PHP and CSS. We’ll start of by gaining a full understanding of the differences between the full-width and the page framework. Next we’ll move the navigation menu to below the header and add some background images to the header using Thesis hooks (we’ll cover my visual guide to these hooks as well). Then we’ll do something similar with the footer. Next we’ll add a search function to the header, and finally we’ll add a custom button in the place of the CSS submit button to the search bar.

In this lesson you will:

Understanding the Full-width Framework – Watch the Video

  • Page Framework Layout
  • HTML structure of Page Layout
  • Full-width Framework Layout
  • HTML structure of Full-width Layout

Move Thesis Navigation Menu Below Header – Watch the Video

  • HTML structure of current menu location
  • Hooks
  • Remove action
  • Add action

Add Background Image to Header Area – Watch the Video

  • Get the background image
  • Placing the background image
  • Set the header_area height
  • Set background color

Add “Foreground” Image to Header Area- Watch the Video

  • Get background image
  • Placing the background image
  • Set the header height
  • Adjust logo and tagline location

Add Background Image to Footer Area – Watch the Video

  • Get the background image
  • Placing the background image
  • Set the footer_area height
  • Set background color

Add Search Bar to Header – Watch the Video

  • Choosing the hook
  • Write the PHP
  • Write the CSS
  • Write the Java Script

Replace Search Submit Button With Button Image – Watch the Video

  • Get the image
  • Replace the button with the image
  • Adjust the hover condition

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