Categories Dressing

[dreamoutlaw]

PERFECT! I'm not sure why that worked, but it was exactly what I wanted. I will reread the readme file, and try to get a better understanding. Thank you so much for all your help!

[gjh42]

'0|0|1':

0| - Use standard output (show everything the module file gives)

|0| - Highest level - 0 is top category

|1 - Deepest level - 1 is first subcategory.

[limelites]

Hi Glen,

I wonder if you could help me with my categories dressing? I've revamped www.limelites.co.uk (new header and logo and totally new color scheme and buttons). It's looking good apart from a few little niggles with my categories dressing.

I have the font sizes the way I want them (finally) but I can't for the life of me find what's controlling the font color on the hover over top categories and sub categories. I see these in my stylesheet:

/* top category hover effects*/
#chcategories li.cat-top a:hover {
    color: #000; 
    background:  #EEF7FF url(../images/catbghover.gif);
    }

/* subcategory hover effects*/
#chcategories li li.cat-subs a:hover, #chcategories li li.cat-products a:hover {
    color: #000; 
    background: #EEF7FF url(../images/catbghover.gif);
    } 

........but changing the #000's to #ff0000's seems to have zero effect. It's as though something's overriding them?

Also, I'm hoping to make the styling that's applied to the main categories apply also to the Size Filer sideboxes that pop up when you click on the sub categories. So far, I can't seem to achieve this.

Any help or advice would be appreciated.

[limelites]

Hi Glen,

I've managed to get the desired effect I was after. I'm just posting this in case it proves useful for anyone else using this mod. It turned out the main stylesheet was controlling the hover styling via the .leftBoxContainer a:hover

It even controls the text in my 'Size Filter' boxes.

To change the size of the main category headings I used li.cat-top {font-size:1.1em;}.

To get the hover color to change on these main category headings (Menswear and Childrenswear). I used this:

li.cat-top a:hover {
color:#0000ff !important;
}

[gjh42]

Thanks for posting the solution you found!

[gjh42]

Continuing a discussion from this thread on long category names wrapping and looking wrong because of the bullet indent...

Find in your stylesheet_categories_dressing.css

#categories ul ul a {/*subcategories*/
    display: list-item;
    list-style: circle inside url(../images/bullet1.gif);/*change to list-style: none; to remove bullet*/
   /* background: #ffddbb;*/
    border: none;
    margin: 0;
    padding: 0;
    padding: 0;
    }

Add the text-indent, with a negative value to pull the first line out to match the second.
Also add left margin to compensate for the indent.

#categories ul ul a {/*subcategories*/
    display: list-item;
    list-style: circle inside url(../images/bullet1.gif);/*change to list-style: none; to remove bullet*/
   /* background: #ffddbb;*/
    border: none;
    margin: 0;
    padding: 0;
    padding: 0 0 0 1.7em;
    text-indent: -1.7em;
    }

[limelites]

Hi Glen,

I thought I had the blue hover working fully, but I just noticed it's not right in IE with compatibility mode on.

The hover is picked up perfectly in all browsers on all cats and sub cats, but in IE with compat' mode it isn't picking up the hover styling for cat-products (womenswear sub-cats and womenswear by size sub-cats).

Don't suppose you can see why it's doing that?

[limelites]

Glen, never mind. Another classic case of finding the solution one minute after asking!

#chcategories li li.cat-subs a:hover, #chcategories li li.cat-products a:hover {
color:#0000ff !important;
background: #EEF7FF url(../images/catbghover.gif);
}

[Kinvart]

Hey,

i must tell you, i am very pleased with this mod

EXCEPT for one thing, it "crashes" on the first site of my store (www.elegance.si/store). When you cruise trough the site, it works fine, just on the first site is somewhere up. Why is that, how can i repair this?

Thank you

[gjh42]

On your homepage, you have a div
<div class="left-col-margin">
which has this style in stylesheet_tm.css, line 92:

.left-col-margin {
margin-top:-333px;
position:relative;
}

I don't know why your homepage has this div and others don't; that is between Template Monster who built the template and yourself who modified it.

Eliminating that margin-top may solve your problem.