ThemeShaper Forums » Thematic

[closed]

Simple CSS menu problem

(5 posts)
  • Started 8 years ago by jameskyle
  • Latest reply from helgatheviking
  • This topic is not resolved

Tags:

  1. Hi. I'm sort of new to CSS, muddling my way through and learning as I go. I'm working with the default.css copied to the style.css file of my child theme, and I'm trying to customise the navigation menu's text and background colours. I've hit a snag though and I can't figure it out for the life of me.

    WHat I have so far:

    /*** THEMATIC SKIN ***/
    .sf-menu {
    border-right:1px solid #FFF;
    float:left;
    }
    .sf-menu a {
    border-left:1px solid #FFF;
    border-top:1px solid #FFF;
    border-bottom:1px solid #FFF;
    padding:9px 13px;
    text-decoration:none;
    }
    .sf-menu .current_page_item a, /* use this section to customise the currently selected menu item */
    .sf-menu .current_page_ancestor a,
    .sf-menu .current_page_parent a {
    border-bottom-width: 0px;
    border-bottom-color:#FFF;
    }
    .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
    color: #000; /* Text colour before rollover */
    }
    .sf-menu li {
    background: #000; /*Default item colour */
    }
    .sf-menu li li {
    background:: #000;
    }
    .sf-menu li li li {
    background: #000;
    }
    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    background: #FFF; /* Menu rollover colour */
    outline: 0;
    border-bottom-color:#ccc;
    }
    .sf-menu ul {
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
    }
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
    top:32px; /* overriding essential styles */
    }
    .sf-menu ul ul {
    margin-top:0;
    }
    .sf-menu ul a {
    background:#DDD; /* Submenu items colour */
    border-bottom:none;
    }
    .sf-menu ul a:hover {
    color: #009900; /* submenu text rollover colour */
    }

    I'd like the links to be black with white text, then white with black text if rolled over or selected. I can get either one, but not both by changing the value in:

    .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
    color: #000; /* Text colour before rollover */
    }

    As you can see from the code I've posted I've added my own little notes to help me figure it all out. I've tried adding color:#000; or #FFF; where I think I need it, but with no success. Any help would be gratefully appreciated.

    Posted 8 years ago #
  2. .sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    	color: #fff;
    }
    .sf-menu li {
    	background: #000;
    }
    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    	background: #fff;
    	color: #000;
    }

    I think you were stuck because you were just thinking in modifying properties and not creating new ones. I hope this helps.

    Artur Kim

    Posted 8 years ago #
  3. Thanks, worked perfectly. :)

    Posted 8 years ago #
  4. When I mouse out from the button then I lose the styles from the last selected button

    Which CSS control the last pressed menu?

    I thought that was this, but it doesnt make any effect

    .sf-menu .current_page_item a, /* use this section to customise the currently selected menu item */
    .sf-menu .current_page_ancestor a,
    .sf-menu .current_page_parent a {
    color: white;
    background: red;
    }

    Posted 8 years ago #
  5. check the menu skin in:
    http://forums.themeshaper.com/topic/thematic-menus-demystified-1

    Posted 8 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.