Sidebox graphics

[shaamone]

Hi everyone, my first post!

I'm from an OSC background and I'm looking to migrate over to Zen asap, you guys have done such a better job.

My first task is obviously the look and feel, I need to get this as close to my existing stores as possible : see www.cheap-sim-card.co.uk for an example.

My problem right now is I don't see how I can add rounded ends to my sideboxes. Can anyone point me in the right direction? If you take a look at my site you'll know what I mean..

[Lala_G_Clef_Jewelry]

do you have the graphics from that site saved?

they should be graphics that are called for those sideboxs, you can put them in the correct folder for your template that you will use for zencart :)

[shaamone]

Hey, thanks for the quick reply! Very kind of you to help.

As far as I can tell from what you're saying, zen will automagically detect if there are images to be plonked on either end of the bar right?

Can you give me an example of which directory I should place the images in? Let's say I'm looking to change the categories sidebox and my template's being called mytemplate.

[kobra]

Assuming that you have read about and are using the override system and have created your own template & folder the images are placed here:
includes/templates/your_template/images/

Depending on the exact type of graphic, the entries can all be in the stylesheet.css file. Example for the side boxes:

.leftBoxHeading, .rightBoxHeading {
	margin: 0em;
	background-image:url(../images/your_graphic.gif_or_jpg);
	background-repeat:no-repeat;
	padding: 0.5em 0.2em;
	}

for the center area:

.centerBoxHeading {
	margin: 0em;
	background-image:url(../images/your_graphic.gif_or_jpg);
	background-repeat:no-repeat;
	padding: 0.5em 0.2em;
	}

and so forth.. If you are not using FireFox and the web tools extention or another tool to determine the class of the items you are trying to add these to I suggest that you consider getting one of them and FF is free.

Also, looking at your site, it is similar to the "Future Zen: free template that is in the downloads under templates. and you can view them here:Template Test Drive to match your old site exactly you would require your graphics or some modification to the Future Zen to eliminate the side borders and bottom border. This would provide you with most all the required coding and is all css based.

[shaamone]

Fantastic, just what I wanted to hear really. Thank you.

I'll crack on and post back any comments I'll no doubtedly come up with! Loving zencart already.

Cheers everyone

[kobra]

If you are looking to create some artsy graphic and want it to be fluid or adjustable, you might peruse the css sliding door code...