Changing the Header Image for your OM4 site

Here are the steps involved in changing your header image (the image that appears at the top of every one of your pages).

Firstly you need to understand the general principles of preparing images for the web, and how to make sure your image is the right size before uploading it. Read and understand Preparing Images Before Upload before proceeding.

Secondly you need an image to work with (choose one that is wide enough already – see below – it is ok to crop/shrink, but expanding can degrade quality rapidly):

  • perhaps you have your own business images and/or logo already
  • iStockPhoto: you can purchase a professional image for about $2
  • Flickr: you can find images freely available to use under a Creative Commons licence (check commercial use and attribution in particular)
  • stock.xchng: free photographs for you to use

Third you need to prepare an image file for your header using your cropping/resizing tool:

  • Width: for 1 sidebar, make it 760px wide. For 2 sidebars, make it 974 px wide.
  • Height: this is up to you, but between 100px and 200px high seems to work best
  • File Size: the smaller the size of the image file, the faster your pages load. Try to keep it under 50kb
  • File Format: use JPG (if you have a photo style header with lots of colors) or PNG format (if there are only a few colors)

Ok, you should have a .jpg or a .png file that is 760px or 964px wide, and between 150px and 200px deep. No bigger than 50kb.

The widths aren’t hard and fast rules – you can use any size you want (just adjust your overall Page Width setting to match). These are the defaults we use however, and will help you get started.

Upload your new Header Image

  1. Login to your website.
  2. Go to Media, Add New
  3. Next to the Choose Files to Upload section, click Select Files. Select your image file from your hard disk and then click Upload. Your image file is copied from your computer to the web server.

Update your Site Design to use the new Header

  1. Go to Dashboard, Appearance, Site Design
  2. If you want to use a 2 sidebar layout, scroll to the bottom of the page and click the 2 Sidebar Defaults button.
  3. From the top of the Site Design screen, Scroll down past the Site Layout, Background and Page sections to the Header section.
  4. Clear the existing Header Image URL and click Upload button. Choose the header image from your hard disk and upload it. When finished, enter /files/myfilename.jpg (or whatever your file name is) in the Header Image URL field. If you are using an OM4 Standalone site, you will need to use /wp-content/uploads/myfilename.jpg
  5. In the Background and Page sections, clear the URL fields (this will clear the default artwork)
  6. If you have chosen 2 Sidebars, you will need to go to Dashboard, Presentation, Widgets and put at least one widget into each of your sidebars.

View your Site

You can now view your site.

If your browser is still showing the old images, you may need to clear your browser cache. Browsers have a local cache for images, so they don’t have to keep downloading the same images over and over. This is how to clear your browser cache:

  • Windows – hold down Ctl and F5 together
  • Mac – hold down Shift and reload the page
  • Linux – F5

What about your Header Title and Header Tagline?

Depending on the Header Image you have chosen, your Header Title and Header Tagline may need adjusting so they appear in the right place:

  1. Change the text of your Title and Tagline under Dashboard, Settings, General.
  2. Go to Dashboard, Presentation, Site Design and scroll down to the Header Section.
  3. Set the Alignment of your Header Title to either Left, Right or Center.
  4. Change the X (pixels from the left) and Y (pixels down from the top) co-ordinates to precisely place the Header Title.
  5. Do the same for the Header Tagline.
  6. You can also adjust the font, font size and colour used for your Header Title and Header Tagline.
  7. Click Save (button at the end of the page) or press Return in any of the text fields.

Your Header is now complete

After you click the Save button at the bottom of the page that is.

Tips and Techniques

Header Title above Header Image. Do you want your Header Title to appear at the top of the page, with your header image below it? In the Header section, set your Header Image Height about 20px greater than the actual height of your image, and make sure you set the Header Image Alignment to either Left Bottom, Center Bottom or Right Bottom. You now have a space above your Header Image for your Header Title.

Different header on different pages.Once you set your header image in the Site Design screen, you can override that image on a specific page as follows:

  • Go to Dashboard, Pages, Edit and open the page you want to have a custom header
  • Scroll down to the Custom Fields section of the page.
  • Create a custom field with a name of header_image and a value of /files/hdr-2.jpg, where hdr-2.jpg is the name of the custom header that is to apply to that page

Ideas. Go and look at other OM4 Websites to get ideas on what how you can set up your header.

Other Images. Now that you know how to set your Header Image, you can also optionally update:

  • Page Image (usually a thin image file set to repeat vertically to provide a background for as much page content as exists).
  • Footer Image.
  • Background Image.

To see how these images work together, check out our Page Layout Model.

Reusing images from your existing website. If you use Firefox and install the Firefox Web Developer extension, you can use the Image, Image Information command to show you the image files used in your existing website. Right click these to save them to disk, and upload them ready to use on your new site.

Your OM4 Site Design panel has a lot of different configuration options for you to work with.

Getting Help

If you would like get your site professionally designed, you can check out our site design services. This service gets you a professionally site design implemented using the OM4 image components.