Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Change the top bar background


Guest

Recommended Posts

Hey guys,

 

Im trying to find how to change the top bar background on my site im developing.

 

I need to change the bar underneath the header the one which has the breadcrum trail in as standard.

 

Can someone point me in teh right direction.

 

Cheers

Link to comment
Share on other sites

Thanks,

 

I did change it in here but the image still wast showing. Fixed the problem by putting the full URL for localhost testing server and is working fine now.

 

Thanks again

Link to comment
Share on other sites

glad you got it working :) gotta wonder about "the image" though... you didn't mention an image... can only guess an answer from the bits of information supplied :thumbsup:

 

How would I go about putting an image in that bar that separates the header from the main part of the page?

 

I basically want to have a color fade going from say white on the left side, to blue on the right.... and the only way i know to do it would be to set a default color to the bar (say white), and then just on the right side of the bar have an image..... but how to I put that image in there?????

Link to comment
Share on other sites

Hi,

 

It really depnds on the width of you site. With a 100% width site then theres no way i know of that you can put an image in there because the width will always be changing on different resolutions. You could probably get around this by making the image extra big to fit all resolutions but in my opinion this wouldn't be the best way.

 

With a fixed site width the process is much easier.

 

Create your image say 780px x 30px add your fade save it as a .gif somewhere in your website directory then open your text ebitor or dreamweaver equivelent.

 

Open up stylesheet.css

 

Then your looking for the following class:

 

TR.headerNavigation {

}

 

I chanegd this to add a background image:

 

TR.headerNavigation {

background-image:url(images/banner/seperator.gif);

}

 

I defined the height and width in the header.php file.

 

Hope this helps

Link to comment
Share on other sites

Hi,

 

It really depnds on the width of you site. With a 100% width site then theres no way i know of that you can put an image in there because the width will always be changing on different resolutions. You could probably get around this by making the image extra big to fit all resolutions but in my opinion this wouldn't be the best way.

 

With a fixed site width the process is much easier.

 

Create your image say 780px x 30px add your fade save it as a .gif somewhere in your website directory then open your text ebitor or dreamweaver equivelent.

 

Open up stylesheet.css

 

Then your looking for the following class:

 

TR.headerNavigation {

}

 

I chanegd this to add a background image:

 

TR.headerNavigation {

background-image:url(images/banner/seperator.gif);

}

 

I defined the height and width in the header.php file.

 

Hope this helps

 

using 100% width.... couldn't i do like a standard color for the background (say white), and then do the image as align right??? I do not understand css things... so i do not know if that would work or not, and am scared to change it.

Link to comment
Share on other sites

Ok

 

If you want to add an image in the header navigation where the breadcrumb trail is. then do as i have said above.

 

Take into consideration the following.

 

You can have a fad vertically and save an image 1px wide by say 30px high. Then this when set in the style sheets as above will give you a nive vertical fade on a 100% site.

 

If you want a horizontal fade i.e blue on left fading to white on right then this is different and as i suggested you could then make an image like 2000px width and 30px high set it as the background image again you will have a nice effect and will be covered for resolutions of up to 2000px wide which aint alot of screens out there that can use that res. I wouldnt recommend this way as in my opinion it is a messy way of doing things.

 

Tyr the first idea and just play around with it. Your only changing one line in the stylesheet so you could easyily change it back if you dont like it or it dont work.

Link to comment
Share on other sites

using 100% width.... couldn't i do like a standard color for the background (say white), and then do the image as align right??? I do not understand css things... so i do not know if that would work or not, and am scared to change it.

yes you can. this is what you would want to add in that class

 

background: #FFFFFF url("images/yourimage.jpg") no-repeat;

What? Yeah, I can do that.

Link to comment
Share on other sites

yes you can. this is what you would want to add in that class

 

background: #FFFFFF url("images/yourimage.jpg") no-repeat;

]

so then, let me understand.... it is better to do 1 image that is say 2000px BY 30px right?

 

or would you think it is better to do an image that is say..... 200px by 30px?

 

if it is the second of the two, then do i have to write a specific code to align right for the image???

 

sorry to ask so many questions, I do really appreciate your help

Link to comment
Share on other sites

]

so then, let me understand.... it is better to do 1 image that is say 2000px BY 30px right?

 

or would you think it is better to do an image that is say..... 200px by 30px?

 

if it is the second of the two, then do i have to write a specific code to align right for the image???

 

sorry to ask so many questions, I do really appreciate your help

it depends on what you want it to look like. all background images are automatically alined top right, so thats where they will start unless you tell them not to. if you just want an image that fades to white, on a white background, do what i gave you. if you just want one large image, you can do the same as what i gave you. if you want one small image that repeats, take out the no-repeat part. if you want it to only repeat horizontally do repeat-x or vertically do repeat-y.

What? Yeah, I can do that.

Link to comment
Share on other sites

it depends on what you want it to look like. all background images are automatically alined top right, so thats where they will start unless you tell them not to. if you just want an image that fades to white, on a white background, do what i gave you. if you just want one large image, you can do the same as what i gave you. if you want one small image that repeats, take out the no-repeat part. if you want it to only repeat horizontally do repeat-x or vertically do repeat-y.

SORRY, i just reread this, i meant to say, all background images are automatically aligned top LEFT. not top right.

What? Yeah, I can do that.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...