Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

changing top of boxes


rustybolt

Recommended Posts

Posted

You can change the background image for the top of the boxes by adding it to your stylesheet... infoboxheading but keep in mind that quick fix will change all of the boxes in the store that call for infoboxheading.

 

There are several contributions that help with changing the look of infoboxes that you could try and I know there are many threads on the forums about it so if you do a search you should find other tips or tricks.

Wendy James

 

Creativity is allowing yourself to make mistakes. Art is knowing which ones to keep.

Posted

Not that I am trying to correct you Wendy, but, you can't change the background image, you need to set one. Also, you would need to alter the corner gifs, to maintain the effect from your background image.

 

The easiest way to do that, is save your background gif 4 times. e.g. background.gif, corner_left.gif, corner_right.gif and corner_right_left.gif, in catalog/images/infobox.

 

That effect on pimpmywheels.com, is very easy to achieve, but very........errr......effective! :huh:

Posted

ive created a little gif in photoshop, sliced it 3 times, left top, top and right top. I understand which files to replace, but how do set a background for the top of the box?

 

in css stylesheet?

 

The stylesheet controls the color of the box top doesnt it?

 

also which files control the bottom of the box, can i set a little gif for the bottom?

 

lastly when i right click on the top right of the original box it trys to save a gif called trans.gif, will i need to replace/control this file?

 

any help would be smashing...

Posted

In your stylesheet, scroll down until you see TD.infoBoxHeading. Underneath background, add this:

 

background-image: url('images/infobox/your_image.gif');

 

That will set the center section of the heading. If you have saved the same image 4 times like I said, all the heading will look the same.

 

Don't touch the trans.gif! it is a single pixel transparency, used for spacing.

Posted

ive done this now but it looks wrong, basically ive created a square box in PS, filled it with a gradient, and sliced a piece from the middle, the left part and the right part, named them the 3 gifs,

 

what part does the left_right.gif play??

Posted

The corner_right_left.gif is the end parts that aren't rounded, if you know what I mean?

 

Was the box you created 14px high? That's the height of the default, corner gifs. Or is the slice you took 14px high? If you sliced it less, it will tile and look crap.......probably! >_<

Archived

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

×
×
  • Create New...