In this tutorial you’ll learn how to take the default SalesPage Starta theme and use ThemeStarta WordPress Theme Creator to widen its content area, then add a full width graphic header.
Here’s the final result we’ll be creating with this tutorial:
Click to view full size
The original theme looks like this in its default state, so this is what you’ll be starting with:
Click to view full size
Increasing the site & content area width
Use the site width dragger to increase the site width to 850px.
Note that the original background graphics are 750px so it will look a little funny until you replace them with new wider background images.
Click to view full size
There are three background images used in the Content Area that need widening. The have the following names, and are found under the following settings in ThemeStarta:
- “contentareamid.png” – Content Area Settings > Content Area Block > Background > Upload Background Image
- “contentareatop.png” – Content Area Settings > Above Content Area Block > Background > Upload Background Image
- “contentareabot.png” – Content Area Settings > Below Content Area Block > Background > Upload Background Image
Use the PSD file provided with SalesPage Starta to modify your background graphics, increasing their width to match your site width, i.e. 850px.
Then upload your new images to your theme via the settings listed above.
Update your theme with its current settings to see the wider layout on the front end:
Click to view full size
Adding a full width header
The first thing to do is set your header to show on your product pages. Do this by going to Header Settings > Header Block > Show & Hide and change “Single Posts” to “Show”.
Save and update your theme and look at the front end, where you will now see your Header Block showing:
Click to view full size
Now that your header block is showing you can change it to run the full width of the browser.
NOTE: It will help you to see the effects of your layout adjustments if you give the header block a background color.
Go to Theme General Options & Backgrounds > Layout and change “Wrapper: Site Width or Full Width” to “Full Width.
Save your settings to make this change take effect.
You’ll now see that all your block background, including the Header Block, are stretching to full width:
Click to view full size
However you’ll also see the white background color of the Content Area block is stretching outside of the area we want it to be containted in, so go to Content Area Settings > Content Area Block > Background and change “Site Width or Full Width Background” to “Site Width”.
Save your settings and you will now see:
Click to view full size
Update your theme, and on your front end you will now see:
Click to view full size
That is now the widening of the content area and adding of the full width header complete.
Adding a header graphic
You also now have the ability to add the effect of a full width graphic header.
First, set your Site Title and Tagline to “Hide” under the “Show & Hide” settings for each via Header Settings > Header Content.
Then, upload your background image under Header Settings > Header Block > Background > Upload Header Background Image, being sure to also adjust the header block’s height and background color to match your graphic.
Here is the final result:
Click to view full size
