Customizing The SideBox

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 :frusty: 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

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 :frusty: 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

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

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/

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

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

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

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

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;
}

width: 144px; 
and add
margin-left: auto;
margin-right: auto;
(I haven't tested this variant on your site.)

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.php?main_page=product_info&cPath=16&products_id=15

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

Thank You

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/
}

wow thank you very much it looks the same now thank you

i dont know if you can help me with this one but i have tried to resize the shopping cart table but i havent been able to figure it out here is the link if you can help me please

http://protectedpro.com/gomgi/index.php?main_page=shopping_cart

thank you

All of your pages' content overflows the visual container, but it is not apparent with most of them.
In your stylesheet, change the width of .centerColumn as desired:```
.centerColumn{
width: 650px;
float: left; /Changes the Orange Bar/
margin-left: 5px;
margin-top: -2px;

}