rustybolt Posted March 26, 2006 Posted March 26, 2006 How do i change the top of the info boxes to something a little more fancy? theres an example here - http://www.pimpmywheels.com any help appreciated thanks
Wendy James Posted March 26, 2006 Posted March 26, 2006 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.
spax Posted March 26, 2006 Posted March 26, 2006 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:
rustybolt Posted March 27, 2006 Author Posted March 27, 2006 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...
spax Posted March 27, 2006 Posted March 27, 2006 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.
rustybolt Posted March 28, 2006 Author Posted March 28, 2006 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??
spax Posted March 28, 2006 Posted March 28, 2006 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! >_<
Recommended Posts
Archived
This topic is now archived and is closed to further replies.