In the .zip is a folder with everything one needs to add a flexible banner to the /templates/style/overall_header.tpl, The names and paths will not apply to you so you will have to change everything to suit.
Most importantly - in the style.css that you ARE going to change,
Find these complete elements and DELETE:
Code: [Download] [Hide] [Select]
#top_logo { Blah Blah
}
#logo-img { Blah Blah
}
}
#logo-img { Blah Blah
}
Find:
/* main selectors */
BEFORE ADD:
Code: [Download] [Hide] [Select]
/* START This is all the modified header stuff. */
#logo-img {
margin-top: 0px;
margin-left: 0px;
}
.ohb_hr_content {
height: 199px;
margin-top: 35px;
}
.ohb_hr_l {
background: url('images/p_white/ohb1.gif') top left no-repeat;
padding-left: 57px;
}
.ohb_hr_c {
background: url('images/p_white/ohb2.gif') top left repeat-x;
text-align: left;
color: #F1F1F1;
height: 199px;
margin: 0;
white-space: nowrap;
overflow: hidden;
}
.ohb_hr_r {
background: url('images/p_white/ohb3.gif') top right no-repeat;
padding-right: 203px;
}
/* Note: #global-wrapper and #wrapper also play an important part here, and are BOTH usually set to either 980px OR 98% */
/* END This is all the modified header stuff. */
#logo-img {
margin-top: 0px;
margin-left: 0px;
}
.ohb_hr_content {
height: 199px;
margin-top: 35px;
}
.ohb_hr_l {
background: url('images/p_white/ohb1.gif') top left no-repeat;
padding-left: 57px;
}
.ohb_hr_c {
background: url('images/p_white/ohb2.gif') top left repeat-x;
text-align: left;
color: #F1F1F1;
height: 199px;
margin: 0;
white-space: nowrap;
overflow: hidden;
}
.ohb_hr_r {
background: url('images/p_white/ohb3.gif') top right no-repeat;
padding-right: 203px;
}
/* Note: #global-wrapper and #wrapper also play an important part here, and are BOTH usually set to either 980px OR 98% */
/* END This is all the modified header stuff. */
Again:
Copy and Use the overall_header.tpl in the .zip to your templates/style
Copy the four images to your templates/style/images/colour(Style)
Change the additional .css paths above to suit your colour (Style)
Make your images - (any size you like) - Adjust the additional .css until everything fits.
Some Pics of the end results:
And the Files:
PS: .ohb_hr_content is where one adjusts the top margin to position the "Logo" vertically.
Jogge-Variable-Width.zip | ||
Description: | Download |
|
Filename: | Jogge-Variable-Width.zip | |
Filesize: | 53.71 KB | |
Downloaded: | 159 Time(s) |