ThemeShaper Forums » Thematic

[closed]

Solving the superfish nightmare

(4 posts)
  • Started 3 years ago by Robo
  • Latest reply from Robo
  • This topic is not a support question
  1. Robo
    Member

    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;
    }
    Posted 3 years ago #
  2. Robo
    Member

    Oooops, I should have mentioned that this applies to the "Category" menu and I developed it using the Thematic Power Blog theme. It is probably easily modified to do the #access menu (replace #category-menu with #access in the above?)

    Posted 3 years ago #
  3. nice work. thanks for sharing. customizing the menu skin IS difficult. it could definitely stand to be commented the way you have yours.

    Posted 3 years ago #
  4. Robo
    Member

    If u cut-and-paste my code into style.css, your menu should all be color coded for much easier editing.

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.