Category bg button image - where to place?

Sorry for this surely simple silly question ...

But am needing to place a simple black button image as the background to the categories, exactly like on their current xcart store: http://www.theironhorseman.com/motorcycle-gear/

Just need to put the image as a background and then center the category name text correctly ....

Sorry for the simple question, but am fighting a terrible headache for 2 days and am just getting frustrated over something I know is simple. :censored: :wacko: :lookaroun

Put the black button image (menu_button.jpg) into your template's images folder. includes/templates/YOUR-TEMPLATE/images

Then, in FIREFOX browser with web developer add-on, play around with the following after sticking it to the very bottom of your stylesheet:

The default display for the category links is INLINE, so you're going to need to change this to "block".

.category-top {background-image: url(../images/menu_button.jpg); display: block; line-height: 40px} (maybe 44px).

NB: There may be other CSS edits too...

And after changing the links from inline to block display, you will need to remove a few <br /> tags from /includes/templates/your_template/sideboxes/tpl_categories.php.

The breaks are necessary to keep the inline links on separate lines, but cause an extra space with block display.

Thanks so much for your help you two.

Will attempt tomorrow - as I hope this headache will finally take a hike. :unsure:

Either I've done something wrong, or I'm missing something ...

There was only one <br /> within the categories section of the
/includes/templates/your_template/sideboxes/tpl_categories.php

Can't seem to get the font to show white on the buttons ... and I know several of the category names will need to be on two-lines ...

AND ... how do I get the sub-categories to stack, indent slightly, and line up nicely under the selected parent category button ?

ack! It won't do a white font ... :no: :wacko:

We really need to see the site live to answer these questions accurately. A white font is easy if you are putting the property in the right place.

Sorry, had displayed earlier:

http://www.theironhorseman.com/motorcycle-gear = Xcart site

http://www.theironhorseman.com/motorcycle-store = Zencart site

We've been transferring everything from the xcart to the zencart, and once done, will be dumping the xcart.

Try this for starters:

a.category-top {color: #ffffff;}

(If you need a good tutorial on CSS, go to https://www.w3schools.com).

Thanks for helping.

I do know CSS, I build websites myself. But when you didn't build the CSS, it's hard to find out what is being controlled where when you didn't label the elements. The FF plugin only helps so far.

Now my sub-cat images are stacking ... and I didn't touch anything that concerns the sub-cat image layout.

runs around in circles screaming :lookaroun

Replace your current category-related styling:```

.category-top {
background-image: url(../images/menu_button.jpg);
display: block;
line-height: 44px;
width: 140px;
margin-left: 4px;
}

a.category-top {
color: #ffffff;
}

#categoriesContent {
color: #FFFFFF;
font-family: arial;
font-size: 11px;
text-align: center;
}
with something like this:

#categoriesContent {
color: #FFFFFF;
font-family: arial;
font-size: 11px;
text-align: left;
}
a.category-top {
background-image: url(../images/menu_button.jpg);
display: block;
height: 44px;
width: 140px;
margin-left: 4px;
text-align: center;
}
a.category-subs, a.category-products {/any special subcat properties here/
}

line-height: 44px; will make each line take up that much space if you need two lines for a title. You just want to control the element height with  height: 44px;