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
