Customizing The SideBox

[dragon03kf]

Hello everybody i need some help on customizing my category sidebox i need to achieve something like this i need pictures on top of certain links for example i want to put a picture that says "Men Fightwear" and then LINKS like Men's Tops and Mens Shorts but so far im having a lot of trouble i really dont know where to start so if anybody of you can help me ill really appreciate it.

this is what i want to achieve
CATEGORIES
-PICTURE
*LINK
*LINK
-PICTURE
*LINK
*LINK
*LINK
-PICTURE
*LINK
*LINK

[clydejones]

Hello everybody i need some help on customizing my category sidebox i need to achieve something like this i need pictures on top of certain links for example i want to put a picture that says "Men Fightwear" and then LINKS like Men's Tops and Mens Shorts but so far im having a lot of trouble i really dont know where to start so if anybody of you can help me ill really appreciate it.

this is what i want to achieve
CATEGORIES
-PICTURE
*LINK
*LINK
-PICTURE
*LINK
*LINK
*LINK
-PICTURE
*LINK
*LINK

Try this contribution avaliable in the downloads section
www.zen-cart.com/index.php?main_page=product_contrib_info&cPath=40_52&products_id=609

[dragon03kf]

how do you use that cause i tried it last time and is kinda confusing lol so hopefully you can summarize like what php and css files do i need to edit and stuff i will be very thankful for the help

Thank You

[gjh42]

From the readme:

To add a non-linked heading in a specific place in the categories menu:

[Repeat the case ... break section for each category, changing the number to match:]
case '23': //replace number with your desired cPath
...
break;


[You want an image, so look at the bottom of the section]

If you want to use an image as a heading, name it like cathead23.gif (replacing the 23 with your cPath) and save in /your_template/images/

[dragon03kf]

Thanks for the help you really made my day lol but right now im having a problem with FireFox it doesn't look the same and in IE it looks perfect if you could help me please.

Thank You

[gjh42]

I can't help without a link to see the current state of your site.

[dragon03kf]

oh yeah sorry about that lol i though i had pasted it is this link

http://www.protectedpro.com/gomgi/

[gjh42]

You have limited the width of the headings without (as far as I can see) specifying how they should be placed, other than the container default which appears to be text-align: left;. It seems that IE handles this by centering the element, which I don't think is the "standard" way it should be handled.

Firefox treats the element the same way as others, by aligning it left.

If you eliminate the width declaration for your headings and specify that the bg image should be centered, I think you will get consistent results. For example:

.casualHeading2 { 
    background-image: url(../images/casualheading7.jpg);
	background-repeat: no-repeat;
	background-position: center;
	height: 41px;
    display: block;
    margin-top: 2px;
    margin-bottom: 2px;
    }

Another way you could do this would be to leave the
width: 144px;
and add
margin-left: auto;
margin-right: auto;
(I haven't tested this variant on your site.)

[dragon03kf]

Thank You Very Much for the info it fixed except for the other heading the first one "Mens" in firefox is still to the very top and another thing is in this link the picture of "Retun to the Product List" is not appearing but i dont know how did i erease it or what did i do wrong heres the link

http://protectedpro.com/gomgi/index....products_id=15

im sorry to ask a lot of questions but is cause im new to zen cart.

Thank You

[gjh42]

The float: left; on the box heading is causing it to "fall out" of the normal div structure and let the Mens heading slip up behind it. You don't need the float for either the container or the heading, anyway. When you delete the box heading float, the Mens heading reappears.

h3.leftBoxHeading, h3.leftBoxHeading a {
	font-size: 1em;
	color: #ffffff;
	}

.leftBoxHeading {
	margin-top: 1px;
	background-image: url(../images/topgomgimenu.jpg);
	float: left;  			/*Left Box Properties*/
	height:183px;
	width: 199px;
	}

.leftBoxContainer {
	background-image: url(../images/semicompletemenu2.jpg);
	background-repeat: no-repeat;
	float: left;
	margin-top: 0px;
	height: 733px;
	width: 199px;
	border: 0px solid #ffffff;								/*Alignment of the left Boxes*/
	}