Setup Your Page Front Page Header

One of the features that stands out of this template is the ability to customize a header image for the front page, section, category, or page article. You have the choice of doing it like I did with the online demo of Evening Shade or you can do your own images. In fact you don’t even have to do what I did, you can simply add in a slideshow extension, rotator, or anything else; or nothing at all.

Specifics of the Header

Some things you should know before you get started:

  1. The width for the header area of any page is 940 pixels wide but you can make it any height you want
  2. The module position for this area is called “advert1” so when you publish anything there, you choose that position
  3. The module position style is “raw” which means when you publish anything there, you won’t have any module container showing
  4. This position exists for all which means any section, category, article, component, and even uncategorized pages.
  5. With Joomla, you can easily have a different header for each area with just a few clicks

Preparation for your Header Image

This is going to be totally up to you but if you are putting an image in this location, you will want to do this up ahead of time with your favorite image program, for example: Photoshop, ImageReady, or other. If you want to add rounded corners, you can do this while you are cropping and doing other edits to your image. The corners have a radius setting of 9 pixels in case you were wondering. I would save and optimize the image as a jpg and once done, you can upload it to wherever you decide to manage your site graphics, images, and other media – everyone will have their own preferences based on the site they are running this template on.

Adding the Image to the Header

  1. Go to your Module Manager and click NEW and select Custom HTML as your module type
  2. Set all of your module specifics like Title (although you won’t be publishing the title), module position (Advert1), menu assignment, and anything else you need to set. In the editor window, click your Insert/Edit button and browse for your new header image you just created and uploaded (unless you need to upload it here).
  3. Once the image is there in your editor, you can click Apply and your image should now show up on the pages you assigned it to show.
By | 2010-09-25T03:15:14+00:00 September 25th, 2010|Blog|0 Comments

About the Author:

Leave a Reply