Setup the header area

This template is a little unique and is using something that is actually a little tricky to make work. However, so far with testing, this concept works where the menu floats above whatever you publish to the banner module position (which is just below and under the top main menu). The idea here was to create a 3-dimensional effect with a drop shadow off the main menu and have it lay on top of any image or content you place in the area below it.

Keep in mind that just because this module position is there, it doesn’t mean you have to use it. When not being used (nothing is published there), the banner area collapses to a certain point – as you probably will notice when you first install the template and view the front of your site.

IMPORTANT: There are way too many image, slideshow, and other active extensions for me to test in this module position, so you will have to try it out as some extensions might be troublesome. So far with modules that I have published in this area have worked, from text only to static images.

The default template has a gold pattern background image you can use to sit behind anything you load in a module but feel free to change it to another image (1920 pixels wide) or choose a solid colour if you wish (this will load faster than image backgrounds). The styling for this container is found in the template’s styles.css file around line 131 and looks like this:

#wrapper {background:#fff url('../images/banner-bg.jpg') center top no-repeat;}

You can either name your own image the same as the default “banner-bg” or you can name it to whatever you choose. Just make sure you update the image name in the code shown above. If you want NO image but prefer just a background colour, you will remove the image url code part and enter in a css hex colour. For example:

#wrapper {background:#042C45;} 

This will make a nice dark blue background which compliments the top header of the theme colours…here is what it looks like, along with a couple other colour samples:

This is using the colour: #042C45
This is using the colour: #253B2F
This is using the colour: #7E652C

If you use background colours, try to use a colour from the theme’s top header area – which contains yellows, greens, tans, and blues. You can even get creative and do gradient colour backgrounds (although this is image based).

By | 2010-09-25T03:27:03+00:00 September 25th, 2010|Blog|0 Comments

About the Author:

Leave a Reply