This is the first time I have added a header banner area where it sits behind another page element – in this case it’s the top navigation. I have NOT tested this with gallery or slideshow plugins so I do not know if it will work 100% but for a background colour, text widgets, static images, etc, it does work very well.

This also has a collapsible feature to it, much like the Pixel Theme Studio website where the blue background on the frontpage is there always but if nothing is published there like a module or widget, the content below will collapse upward to cover the empty space.

Use the Text Widget in the banner position.

  1. Create all your banner(s) or images and upload them using your media manager and copy and paste each image src link to notepad or any other editor.
  2. Go to your widget manager and drag a text widget to the Banner drop down position and add your image just like you would do with the logo instructions outlined above for option two.
  3. Use the Widget Logic to display this banner where you want it to show and then save it

This will be the same method for every other banner you load into your site pages and using the widget logic to place them on select pages.

Changing the Banner default Gold Image Background.

This theme comes with a gold coloured pattern background which you can change to any other image or even a solid colour of your choice. The styling for this is located in the style.css file around line 122 and looks like this:

#wrapper {background:#fff url('images/banner-bg.jpg') center top no-repeat;}
#banner {width:980px; margin:0 auto; min-height:40px; min-height:38px;}

You can change the background image to your own which here it’s called “banner-bg.jpg” and is what you see in the demo site. The size of this is 1920 pixels wide to accommodate wide resolutions. The inner container called “banner” is the one that will give you a width of 980 pixels and is always centered to match the content width in your page. If you decide to use a solid background colour instead of an image, just simply change out the background part to be like this:

#wrapper {background:#000000;}
#banner {width:980px; margin:0 auto; min-height:40px; min-height:38px;}

The background in the above example will give you a black background but you can use any colour you want…try to use a colour that compliments the top header of the page.

QUICK NOTE: Using a background colour instead of an image (which is quite large), will speed up your page load times as the image is large in file size due to the 1920 pixels width and of course keeping the quality level high enough of the image. You dont’ have to use the full height of the image either, you can use any height you want as long as it’s 1920 pixels wide. For colour backgrounds only, this is not an issue.

By |2010-09-25T01:28:32+00:00September 25th, 2010|Blog|