Themes

Hi,

This should be easy but it probably isn't! LOL

What you need to do is find the height and width of the images you want to use, as these are important when creating the container you need to put them in.

Given that this theme has a header with a nice background already, you are going to have to lose this infavour of your own banner.

Also, I don't think it is a good idea to make the banner a fixed width. You can make it a fixed min-width which is better.

Ok this is what you need to do.

1. Add the images to the sky_high/pix/ directory.

2. Open sky_high/style/core.css and adjust the #page-header height to whatever the height of your banner is, and also delete the sky_high background, but add your center image which will colour all of the page header, this is so that your left and right images can float, left and right respectively.

Example:
#page-header {
background:#97d3f4 url([[pix:theme|header]]) no-repeat top right; /*delete*/
background-image:  url([[pix:theme|ban-center ]]); /*add*/
background-repeat:repeat-x;/*add*/

margin-bottom: 0px;
height: 230px; /* add banner height */
border-bottom: 1px solid #fff;
}

3. Set #page to min-width

#page {
width:100%;
max-width: 1600px;
min-width: 1120px; /* add min width */
overflow:hidden;
margin:0 auto;
}

4. add the css from your example into sky_high/style/core.css but add the css rules for the first image like so...

#img1{
float: left:
clear: left;
background-image:  url([[pix:theme|ban-left ]]);
background-repeat:no-repeat;
width: 683px;
height: 230px;
}
#img3{
float : right;
clear: right;
background-image: url([[pix:theme|ban-right]]);
background-repeat:no-repeat;
width: 336px;
height: 230px;
}

Save changes and refresh your browser. This will give you an idea of the size of the container your banner will be going into. Also check to see what it looks like in different screen resolutions.

I hope this works as I have not tested it!

Let me know if it works OK if not I'll help you fix it.

Cheers

Mary