category changes

[Andy c]

Hi guys another wee problem I have
I am trying to change the colours of the categories & sub categories
buttttt I have better Categories addon installed (it came with the template before you go tosser for adding it) rainbow told me it was crap already 
anyway back to the point
I've knocked up a small piccie to have a better idea of what I am trying to explain
but what I am hoping for is that it will help distinguish between categories and sub categories

this is what my css file looks like right now


/*
BetterCategoriesEzInfo v1.3.0.2 added  2006-06-22  gilby
Updated to v1.3.5   2006-09-19  gilby
*/

.betterCategories, .betterDocuments, .betterEzpages,
.betterInformation, .betterMoreinformation, .betterBestsellers {
   border-top: 1px solid #ffffff;
}

.betterCategories a, .betterCategories a:visited,
.betterDocuments a, .betterDocuments a:visited,
.betterEzpages a, .betterEzpages a:visited,
.betterInformation a, .betterInformation a:visited,
.betterMoreinformation a, .betterMoreinformation a:visited,
.betterBestsellers a, .betterBestsellers a:visited {
   display: block;
   background-color: #fffffe;
   border-top: 2px solid #ffffff;
        border-bottom:1px dashed #ccc;
   padding: 4px;
        color:#000000;
}

.betterCategories a:hover, .betterCategories a:active,
.betterDocuments a:hover, .betterDocuments a:active,
.betterEzpages a:hover, .betterEzpages a:active,
.betterInformation a:hover, .betterInformation a:active,
.betterMoreinformation a:hover, .betterMoreinformation a:active,
.betterBestsellers a:hover, .betterBestsellers a:active {
   background-color: #68cbe0;
color:#fff;
}

/*
.category-subs, a.category-products, a.category-subs:visited, a.category-products:a {
    background: none repeat scroll 0 0 transparent;
...    color: #000000;
...    font-size: 12px;
...    font-weight: bold;
...    padding-left: 10px;
...    text-decoration: none;
}
*/
.category-subs-parent{color:#000;}



thanks for any help

[Baa]

On the very last line try this code

A.category-subs {color:#(insert own hex);}

[Andy c]

thanks for reply

now doing weird things lol once you have clicked on a link it turns black and stays like that


have also tried this
.category-subs-parent{color:#000;}
a.category-products {color:#68cbe0;}

and variations have also changed all 000000 to 68cbe0 but no change

[seamus]

it will stay black because that is what your visited colour is, black.

.betterCategories a, .betterCategories a:visited,
.betterDocuments a, .betterDocuments a:visited,
.betterEzpages a, .betterEzpages a:visited,
.betterInformation a, .betterInformation a:visited,
.betterMoreinformation a, .betterMoreinformation a:visited,
.betterBestsellers a, .betterBestsellers a:visited {
   display: block;
   background-color: #fffffe;
   border-top: 2px solid #ffffff;
        border-bottom:1px dashed #ccc;
   padding: 4px;
        color:#000000;
}

those control the visited link colours, ie, the links you have clicked on at some point, which depending on how your browser history is set, those links will continue to show the visited colour until your browser history is cleared or the cookie expires which could be weeks.

if you dont want to show a different colour for visited links, either delete those rules from the stylesheet or the safer way to do it is to set the visited colour to the same as the link colour for that text

[Andy c]

hi yes I have tried that but it still turns and stays black ... have even removed it and the same thing happens

thanks

[seamus]

really need a look at the site Andy, Im guessing there are a few styling rules that are being doubled up, and those rules you posted could really do with being seperated out, I'd need a quick look at the site though

[Andy c]

really need a look at the site Andy, Im guessing there are a few styling rules that are being doubled up

I know nothing this side but that's what I thought as well

let me know what you want to do ... I trust you enough with access if that's what you need
thanks for helping

[seamus]

I should only need the site url, I should be able to see whats going wrong using firebug, and post here a copy of the new styling rules for you to upload

pm the url if you want Andy

[seamus]

righty,
got your PM and and I'v had a look over your site, easiest way to sort it is to remove this from stylesheet_betterCategoriesEzInfo.css on line 11

.betterCategories a, .betterCategories a:visited,
.betterDocuments a, .betterDocuments a:visited,
.betterEzpages a, .betterEzpages a:visited,
.betterInformation a, .betterInformation a:visited,
.betterMoreinformation a, .betterMoreinformation a:visited,
.betterBestsellers a, .betterBestsellers a:visited {
   display: block;
   background-color: #fffffe;
   border-top: 2px solid #ffffff;
        border-bottom:1px dashed #ccc;
   padding: 4px;
        color:#000000;
}

take that out and replace it with this

.betterCategories a, .betterDocuments a, .betterEzpages a,
.betterInformation a, .betterMoreinformation a, .betterBestsellers a{
   display: block;
   background-color: #fffffe;
   border-top: 2px solid #ffffff;
        border-bottom:1px dashed #ccc;
   padding: 4px;
        color:#000000;
}

that will stop it from showing a visited colour, so all the links should be black for top level and blue for a subcategory, and white text on a blue background for an active link, it shouldnt show a visited colour at all anymore, so if a link is clicked, it should stay the colour you intended it to be, except for pin badges, it will stay black because it has subcategories of its own so its using the parent category text colour, easy way to solve that is to pull the products from equestrian and put them in pin badges, there is only 4 products in there and no other sub categories so I'd just move the 4 products and delete equestrian. An extra subcategory in there isnt needed and its adding an extra click before you get to the product you want, the less clicks needed the better try not to have too many nested categories, three deep is one to many really.

The reason the code is being an arse is because the div id will always over rule the class, so if you have a rule telling the link to be a certain colour using the a class and a rule telling it to be a certain colour using the div id aswell, then the div id is what will be used and the class rules will be ignored, and t he div class will override the a class aswell, which most of the stylesheet seems to run using div classes and then adds extra ruls using the a class aswell which doesnt work,
to be honest the way its been coded is a bit of a mess, if it was me, I'd strip out the whole stylesheet and write it again from scratch, no wonder you're having trouble with this Andy, the css is a bit of a mess so it is, who ever wrote it wants slapped lol

[Andy c]

hi done that .... if I open a category that hasn't been opened before it seems to work now ..but if I open say pewter there are still black links within have cleared history and cntr f5  .......
I can only assume it is now my pc not working right

thanks for the help 

[Andy c]

I'm still not quite happy with how it is. I still get black links within the categories .I think it might have something to do with the amount of categories with each list
what I have at the moment is this

/*
BetterCategoriesEzInfo v1.3.0.2 added  2006-06-22  gilby
Updated to v1.3.5   2006-09-19  gilby
*/

.betterCategories, .betterDocuments, .betterEzpages,
.betterInformation, .betterMoreinformation, .betterBestsellers {
   border-top: 1px solid #ffffff;
}

.betterCategories a, .betterDocuments a, .betterEzpages a,
.betterInformation a, .betterMoreinformation a, .betterBestsellers a{
   display: block;
   background-color: #fffffe;
   border-top: 2px solid #ffffff;
        border-bottom:1px dashed #ccc;
   padding: 4px;
        color:#000000;
}

.betterCategories a:hover, .betterCategories a:active,
.betterDocuments a:hover, .betterDocuments a:active,
.betterEzpages a:hover, .betterEzpages a:active,
.betterInformation a:hover, .betterInformation a:active,
.betterMoreinformation a:hover, .betterMoreinformation a:active,
.betterBestsellers a:hover, .betterBestsellers a:active {
   background-color: #68cbe0;
color:#fff;
}

/*
.category-subs, a.category-products, a.category-subs:visited, a.category-products:a {
    background: none repeat scroll 0 0 transparent;
...    color: #000000;
...    font-size: 12px;
...    font-weight: bold;
...    padding-left: 10px;
...    text-decoration: none;
}
*/
.category-subs-parent{color:#000;}
a.category-products {color:#68cbe0;}
a.category-products:visited {color:#68cbe0;}

apart from pewter jewellery they should all be blue


thanks for any help

[Andy c]

can't edit ..but it seems the problem is with the ones where there is a category and 2 sub categories (or category, category, sub category)..where there is a category and sub category it looks OK.
not sure how you terminology it, or if you understand what I am trying to say

but is there anything else I can do to change to perhaps a lighter black

thanks

[seamus]

I'll get back to ye about this Andy, when I'v had chance to look at it again, best way to do it is to split out all the divs and classes in the style sheet so they can be styled independantly, your stylesheet has a load of divs and classes being styled by one set of rules which makes it difficult to change bits without affecting other parts,

I'll show you how to split it all out, so you can control colours etc, properly

[Andy c]

ok ..I have tried removing better categories and using ..category dressing .but don't understand that either 
but if you can show me I am up for a challenge in splitting files 

thanks

[Andy c]

I'll get back to ye about this Andy, when I'v had chance to look at it again, best way to do it is to split out all the divs and classes in the style sheet so they can be styled independantly, your stylesheet has a load of divs and classes being styled by one set of rules which makes it difficult to change bits without affecting other parts,

I'll show you how to split it all out, so you can control colours etc, properly

howdy  .had a chance yet or too busy ..no worries if you are ..in no rush