Contributions

Credit Modules (Category Index)
Search: 

Gradient Title Bars

To change your title bars from a solid color to an image (a gradient in this case)

1) create a 1 (wide) x 15 (high) gradient image and save it to your main images folder

2) Go into (/catalog)stylesheet.css and add the following code

background-image: url(catalog/images/imagename.jpg);
background-attachment: fixed;
background-repeat: repeat;

To:
TR.headerNavigation
TD.headerNavigation
A.breadcrumb:hover
TR.footer
TD.footer
.infoBox
TD.infoBoxHeading
TD.BoxHeading

You can do the samething for the following style, but the image must be 20px high
.productListing-heading

An example of change...


This
______________________________________________

TD.infoBoxHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
background: #1B939E;
color: #ffffff;
}
______________________________________________

With This
______________________________________________

TD.infoBoxHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
background-image: url(catalog/images/imagename.jpg);
background-attachment: fixed;
background-repeat: repeat;
color: #FFFFFF;
text-align: center;
}

______________________________________________

Replace "imagename.jpg" with your actual images file name(.jpg/.gif)

You can use any image to accomplish this. I simply used a small gradient for quick upload.

Expand All / Collapse All

Gradient Title Bars agiftco.com 21 May 2004

To change your title bars from a solid color to an image (a gradient in this case)

1) create a 1 (wide) x 15 (high) gradient image and save it to your main images folder

2) Go into (/catalog)stylesheet.css and add the following code

background-image: url(catalog/images/imagename.jpg);
background-attachment: fixed;
background-repeat: repeat;

To:
TR.headerNavigation
TD.headerNavigation
A.breadcrumb:hover
TR.footer
TD.footer
.infoBox
TD.infoBoxHeading
TD.BoxHeading

You can do the samething for the following style, but the image must be 20px high
.productListing-heading

An example of change...


This
______________________________________________

TD.infoBoxHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
background: #1B939E;
color: #ffffff;
}
______________________________________________

With This
______________________________________________

TD.infoBoxHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
background-image: url(catalog/images/imagename.jpg);
background-attachment: fixed;
background-repeat: repeat;
color: #FFFFFF;
text-align: center;
}

______________________________________________

Replace "imagename.jpg" with your actual images file name(.jpg/.gif)

You can use any image to accomplish this. I simply used a small gradient for quick upload.

Note: Contributions are used at own risk.