Background behind categories

[jagge]

Hi everyone!
I have one thing that still refuses to get fixed by me. I just dont seem to find the place to edit for this.
I want a box/background behind my categorys on my site. Same box_bg that it is in all the other boxes. Can someone please point me to the right direction please?
I would really appreciate it!

www.blingofsweden.se/klockor

Have a nice weekend everybody!

Best regards,
Ola

[knuckle-101]

All depending on the template your using, either be the classic or a custom template but if your using the classic below is the section you edit in includes/templates/classic/css/stylesheet

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
font-size: 1em;
color: #ffffff;
}
#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
font-size: 0.9em;
color: #ffffff;
}

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
padding: 0.5em 0.2em;
}

.leftBoxContainer, .rightBoxContainer {
margin: 0em;
border: 1px solid #9a9a9a;
border-bottom: 5px solid #336633; <-- this edits the color in the bottom border of the classic template change to whatever you wish
margin-top: 1.5em;
}

.sideBoxContent {
background-color: #ffffff; <--edit this section for background color or add an image for the background using the correct tag
padding: 0.4em;
}

h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
color: #FFFF33;
text-decoration: none;
}

.rightBoxHeading a:visited, .leftBoxHeading a:visited, .centerBoxHeading a:visited {
color: #FFFFFF;
}

Edit whats in red above.

If your not to good with css you can start here http://www.w3schools.com/css has everything you need.

[gjh42]

This should be a simple change to make #categories {background-image: url(../images/yourbg.gif); background-color: #aabbcc;} (whatever your specifics are).
However, Template Monster (the maker of your template) has stripped all unique meaningful identifying tags from most of the template. Since the categories box is the only sidebox in that area, there is a tag which can affect it: .ml16. There is no guarantee that they haven't also used that tag somewhere else that they wanted a 16px left margin, though. That said, you can find
.ml16{margin-left:16px;}
in style.css and change it to

.ml16{margin-left:16px;background-color: #336699;}

If you are wanting a round-cornered box, you are going to have to do a bunch of PHP file editing. The categories box does not appear to have any of the many multiple enclosing divs that TM clumsily uses to get round corners. You will need a few of those to get round corners.

[jagge]

Hi,
and thanks for the quick answer.

It didn´t solve it though. I have a custom template and couldnt find the code you reffered to.

Here something from the css.

/*sideboxes*/
.columnLeft {}
.columnRight {}
h3.leftBoxHeading, h3.leftBoxHeading a {
/*font-size: 1em;*/
color: #ffffff;
}
.leftBoxHeading, .centerBoxHeading {
margin: 0em;
padding: 0.5em 0.2em;
}
.leftBoxContainer {
border: 1px solid #ffffff;
margin-top: 1.5em;
}
.sideBoxContent {
}
h3.rightBoxHeading, h3.rightBoxHeading a {
font-size: 1.1em;
color: #FFFF00;
}
.rightBoxHeading {
margin: 0em;
background-color: #663366;
padding: 0.2em 0em;
}
h3.leftBoxHeading a:hover {
color: #FFFF33;
text-decoration: none;
}
h3.rightBoxHeading a:hover {
color: #FF0000;
text-decoration: none;
}
.rightBoxContent {
margin-bottom: 1em;
}
.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {

}
.categoryListBoxContents a { text-decoration:none; color:#000000; text-transform:uppercase;



}

[jagge]

Hi gjh42,
sorry, didnt see your answer when sending my reply to the first guy helping me.

I see what you mean and changed the bg as you described. But yes, I need rounded corners and that is probably over my head.
Do you have any idea of how many or which files need to be edited?

Best regards,
Ola

[gjh42]

I could find the standard Zen Cart file to edit this, but there's no guarantee that TM used the same one for their major edits.
My best suggestion is to use the Developers Toolkit in admin > Tools to find where .ml16 is used. Paste .ml16 in the lower left box, select all catalog files and search. Then look at the results, and post back with any info.

[jagge]

Hi,
thanks,
I found this.

/www/klockor/includes/templates/theme046/common/tpl_tmfuncs.php
Line #185 : <div class="ml16"> <span class="title1_txt">'.$text.'</span><br>'.zen_image(DIR_WS_TEMPLATE.'images/spacer.gif', '', '1px', '10px').'<br>

[jagge]

And here is from the file. I took some code before and after.

Regards,
Ola

function tm_box_head($text, $link = false, $style = 'deff')
{
if (!empty($link))
{
$text = $text.' (<a href="'.zen_href_link($link).'" class="rr">more</a>)';
}
switch ($style)
{
case 'left1':
{
$ret = ''.zen_image(DIR_WS_TEMPLATE.'images/spacer.gif', '', '1px', '7px').'<br>
<div class="ml16"> <span class="title1_txt">'.$text.'</span><br>'.zen_image(DIR_WS_TEMPLATE.'images/spacer.gif', '', '1px', '10px').'<br>
<div class="ml8">';
break;
}
case 'left2':
{
$ret = '<div class="dt leftcol_t1">
<div class="dt leftcol_t1_in1">
<div class="dt leftcol_t1_in2">
<div class="dt">
<div class="dr">
<div class="dc pos3">
<div class="link1"> <span class="txt2">'.$text.':</span><br>';
break;
}
case 'style3':
{
$ret = '<div class="dt rigt_t2">
<div class="dt rigt_t2_in1">
<div class="dt rigt_t2_in2">
<div class="dt rigt_t2_in3">
<div class="dt rigt_t2_in4">
<div class="dt rigt_t2_in5">
<div class="dt">
<div class="dr">
<div class="dc ">
<div class="pos5_div"> <span class="title3_txt">'.$text.':</span><br>'.zen_image(DIR_WS_TEMPLATE.'images/spacer.gif', '', '1px', '10px').'<br>';
break;
}
case 'noborder':
{
$ret = '';
break;
}
default:
{

$ret = '<div class="dt roundT1_in1">
<div class="dt roundT1_in2">
<div class="dt roundT1_in3">
<div class="dt roundT1_in4">
<div class="dt roundT1_in5">
<div class="dt roundT1_in6">
<div class="dt roundT1_in7">
<div class="dt roundT1_in8">
<div class="dt">
<div class="dr">
<div class="dc pos6">
<div class="pos6_div pos7"> <span class="title4_txt">'.$text.'</span><br>'.zen_image(DIR_WS_TEMPLATE.'images/spacer.gif', '', '1px', '10px').'<br>';
break;
}
}

[gjh42]

Wow.
They have a multipurpose function to make tops of boxes in whichever of five styles is specified when the function is called. Presumably there is a corresponding function which closes all the divs at the bottom of the box according to the same style variable.

It's impossible to tell exactly what the various styles are supposed to look like from the code, except that some of them have enough wrapper divs to make two or three concentric layers of special shell/border boxes. I would try to find the tags used on one of the boxes you want to replicate, and somehow get the categories box to be called with that style. I think it will be rather complicated to get this, and it may not be possible to make it work on the left with the dark background the same way it works on the right.

[jagge]

Hi,
and thanks for your time.

yes, there is closing tags underneath in the code.

Actually i´m after a dark box behind the categorys butwas thinking that I could make them dark with other classes and images if I could just create the white one first.

Is it possible to pay you to fix this if you feel your the man for it?
I could send you my file for the category bix and one that gets the right code for a box behind.
I´m quite a neewbie to code so I dont think I manage myself.

Best regards,
Ola