First, I'll give you the code and explain how it works. That way, you'll understand it better and can easily adapt it to your site.

The Code

<?php if (is_page('28')) { ?>
	<img src="<?php bloginfo('template_url'); ?>/headers/image1.jpg" width="920" alt="<?php bloginfo('name'); ?> header image" />
<?php } elseif (is_page('26')) { ?>
	<img src="<?php bloginfo('template_url'); ?>/headers/image2.jpg" width="920" alt="<?php bloginfo('name'); ?> header image" />
<?php } elseif (is_page('30')) { ?>
	<img src="<?php bloginfo('template_url'); ?>/headers/image3.jpg" width="920" alt="<?php bloginfo('name'); ?> header image" />
<?php } else { ?>
	<img src="<?php bloginfo('template_url'); ?>/rotating.php?image=<?php echo mt_rand(0,100); ?>" width="920" alt="<?php bloginfo('name'); ?> Rotating Header Image" title="<?php bloginfo('name'); ?> Random Header Image" />
<?php } ?>

I have 3 Pages here. With the above code, I'm telling the theme to display a given image on each of those 3 Pages and to display random images everywhere else.

• 1st two lines tell the theme to display image1.jpg on a Page with ID 28.
• next two lines tell it to display image2.jpg on a Page with ID 26 and so on.
• Last two lines (marked in blue) tell it to display random images everywhere else.

How to

1. Upload your header images into the headers folder in your PrimePress directory.
2. Open your header-images.php in your WordPress theme editor, delete the already existing code and paste the above code block in there.
3. Change the Page ID and the image file name according to your site. (parts marked in red)

Some Notes

Chances are, you want to do this on more than three pages. Just copy (duplicate) the lines marked in green, paste them right below (but above lines marked in blue) and change the ID and filename.

If you have permalinks turned on, you can also type in the post-slug in place of the Page IDs.

Here are two ways you can personalize your site by adding some simple bits of code to your custom stylesheet. Just paste these code snippets into the custom.css and change the colors to your liking.

Adding a Simple Border

The following code makes the site content more distictive while preserving all the white space.

body.custom #container {
	border: 1px solid #cccccc;}
 
body.custom ul.menu {
	right: 10px;}
 
body.custom #rotating {
	border-top: none;}

• First rule adds a simple border around the entire content area
• The 2^nd & 3^rd style rules are minor tweaks for better integration of things. 2^nd moves the top level menu a bit to the right and the 3^rd removes the top border above the rotating header images.

Changing the Background Color

The following CSS code makes for a crisp overall design.

body.custom {
	background: #444444;}
 
body.custom  .homelink a {
	color: #ffffff;}
 
body.custom .homelink a:hover {
	color: #ffffff;}
 
body.custom .description {
	color: #cccccc;}
 
body.custom ul.menu {
	right: 10px;}
 
body.custom #rotating {
	border-top: none;}

• The first style rule changes the background color to a deep grey.
• Since we chose a dark background, we need to pick a lighter contrasting color for the site title and tagline, for them to be clearly visible. In this case 2^nd & 3^rd rules change the color of the title and the 4^th changes the color of the tagline.
• The last two style rules are minor tweaks to balance the overall design. 5^th moves the top level menu a bit to the right and the 6^th removes the top border above the rotating header images.