We're always here to help...

Online management system for
independent bands and musicians

Frequently Asked Questions

"Advanced Designer" : How to Use Different Header Images on Different Pages

If you've upgraded to "Advanced Designer" and have access to our advanced CSS Editor, you can very easily use some custom CSS code to display different header images on different pages of your website.

In this working example, we'll use the following header image for the Shows page:

Header Image for Shows Page

1. Default Header Image

First, upload your primary header image using Website > Layout & Design > Header Image. By default, this header image will be used on every page of your website. We suggest you use this primary header image for your homepage and then use CSS to replace it on other pages of your site.

For example, here's our default header image:

Header Image for Homepage

And here it is displayed on the homepage: http://demo6-tpl.fourfour.com/home

2. Design and Upload Header Image for Shows Page

Using your favorite web graphics software (Photoshop, Fireworks, etc.), create a different header image for your Shows page. Then go to Website > Layout & Design > Image Manager to upload this image file into your FourFour Image Manager by clicking the "Open Image Manager" button, uploading the image file, and then clicking on the thumbnail of the image after it's been uploaded. The popup window will automatically close and you'll be returned to the main Image Manager page, which now displays a URL pointing to the new header image you just uploaded. Save a copy of this URL somewhere handy so you can copy/paste it into your CSS code later on in Step 4.

For example, here's the image URL for our Show page header:


And here's what this new header image will look like on our Shows page: http://demo6-tpl.fourfour.com/shows

3. Add Custom CSS Code

Go to your advanced CSS Editor (this link only works if you've upgraded to "Advanced Designer").

If you're not already using the CSS Editor to control the design of your site (because you're using our basic Colors, Font & Background editor), then you'll see the following alert on the top of your page:

Your website is not using CSS Editor to control the design. The design is currently using Colors, Font & Background. If you Save the settings below, you will change over to CSS Editor.

IMPORTANT: If you haven't saved CSS Editor settings before, then you'll notice that we've automatically copied over all of your settings from Colors, Font & Background. This makes sure that when you switch over to CSS Editor for the first time, you'll start from where you left off in Colors, Font & Background. Make sure you don't delete this CSS code if you want to preserve these settings. Once you save the CSS Editor for the first time, from that point onwards your Colors, Font & Background and CSS Editor settings will be maintained independently of one another, and, therefore, you'll need to update each editor separately if you switch back and forth.

Scroll to the bottom of the CSS code that's displayed in your CSS Editor's textarea field and copy/paste the following code into it:

.pg-shows #header-img img  {
    display: none;

.pg-shows #header-img a {
    display: block;
    width: 674px;
    height: 300px;
    background-image: url(YOUR-IMAGE-URL);
    text-indent: -9999px;

The first CSS statement removes the display of your default header image on your Shows page (using the .pg-shows CSS hook to target just the Shows page). The second CSS statement displays your new header image in its place.

4. Update Width and Height and Replace YOUR-IMAGE-URL

You must update this sample CSS code as follows: 1) replace the 674px value of the width: property with the pixel width of your header image; 2) replace the 300px value of the height: property with the pixel height of your header image; and 3) replace the YOUR-IMAGE-URL placeholder text inside the parantheses of the background-image property with the URL for your new header image (the one you uploaded into the FourFour Image Manager in Step 2). If you don't have a copy of this URL handy, just go back to Website > Layout & Design > Image Manager, click the "Open Image Manager" button, click on the thumbnail of your new header image and grab a new copy of the URL that is returned.

You can add your image's URL as either an absolute path (i.e. http://demo6-tpl.fourfour.com/media/images/layout/hdr-shows.png) or a relative path (i.e. /media/images/layout/hdr-shows.png).

And remember, your URL will not use demo6-tpl.fourfour.com as its domain, but, instead, it must use your own domain.

There you go...an easy way to use our "Advanced Designer", a little bit of CSS code and our FourFour Image Manager to display different header images on different pages of your website. Enjoy!

Back to FAQs