Hi everyone,
The worst part of Thematic imo is the superfish menu system. I have found customizing this to be a nightmare, so today finally sat down and had a go at working out how to customize it.
What I have done is color code the 1st, 2nd and 3rd levels using traffic light colors and separating the text and background colors for each state (visited, hovering, etc...)
So, here is the code. Feel free to tell me all the errors or better ways of doing it, but it seems to work perfectly on Safari and Chrome on Mac.
I have added comments to make things as clear as possible...
/* Category button (1st level, no hover, no visits) */
#category-menu .sf-menu li a:link {
color: black;
background-color: lime;
}
/* Category button (1st level, not visited, while hovering over sub menu) */
#category-menu .sf-menu li.sfHover a:link {
color: black;
background-color: green;
}
/* Category button (2nd level, not visited, no hover) */
#category-menu .sf-menu li.sfHover li a:link {
color: black;
background-color: orange;
}
/* Category button (3rd level, not visited, no hover) */
#category-menu .sf-menu li.sfHover li li a:link {
color: black;
background-color: red;
}
/* Category button (1st level, no hover, visited) */
#category-menu .sf-menu li a:visited {
color: blue;
background-color: lime;
}
/* Category button (1st level, visited, while hovering over sub menu) */
#category-menu .sf-menu li.sfHover a:visited {
color: blue;
background-color: green;
}
/* Category button (2nd level, visited, no hover) */
#category-menu .sf-menu li.sfHover li a:visited {
color: blue;
background-color: orange;
}
/* Category button (3rd level, visited, no hover) */
#category-menu .sf-menu li.sfHover li li a:visited {
color: blue;
background-color: red;
}
/* Category button (1st level, hover) */
#category-menu .sf-menu li a:hover {
color: white;
background-color: lime;
}
/* Category button (1st level, hover, with sub menu) */
#category-menu .sf-menu li.sfHover a:hover {
color: white;
background-color: green;
}
/* Category button (2nd level, hover) */
#category-menu .sf-menu li.sfHover li a:hover {
color: white;
background-color: orange;
}
/* Category button (3rd level, hover) */
#category-menu .sf-menu li.sfHover li li a:hover {
color: white;
background-color: red;
}