Magic Page 0

In this posting I explained how to overwrite css rules using page header text or a conditional region. Something similar is also possible using the page 0. One of my customers asked me to create a page template in a corporate layout which they could use for their future applications. The only difference between the applications would be the image they display in the page header. The customers also had a mix of different browsers starting with IE6 over IE7 and Firefox. There were two problems I was faced with:

1. how to easily apply / change the image displayed in the header of the application

2. different browsers (IE6) would interpret my css code differently than the other browsers

I solved the problem in the following way:

1. created a page 0

2. created a "No Template" Region on the page

3. added the following code to the region source

<style type="text/css">
.top_header{background-image:
url(#IMAGE_PREFIX#themes/theme_basf/Sorp2.gif);
background-repeat: no-repeat;
background-position: 290px -45px;
background-color:#BFD0F4;}

.basf01overlapping{background-image:
url(#IMAGE_PREFIX#themes/theme_basf/Sorp2.gif);
background-repeat: no-repeat;
background-position: 290px -15px;}

</style>


<!--[if gte IE 6]>
<style type="text/css">
#navigationArea{width:99%;}
</style>
<![endif]-->

The style part of the code would display the custom image. The javascript part would overwrite the style for the navigationArea if IE6 is used to view the page. Once they create a new application the only thing that needs to be done is to copy the page 0 from one of the existing applications and change the image name.