ThemeShaper Forums » Thematic

[closed]

Help with CSS Styles for Drop Down Menus in Thematic 0.9

(21 posts)
  • Started 5 years ago by jb1013
  • Latest reply from petergus
  • This topic is resolved
  1. I could use a little help with customizing the CSS for the Drop Down Menus in Thematic 0.9.

    You can see what I'm working on here:

    http://www.axis-host.com/~selkowit

    Here's what I have for the CSS so far

    .sf-menu li {
    	background:	#04376C;
    }
    .sf-menu li li {
    	background:	#04376C;
    }
    
    .sf-menu li li li {
    	background: #04376C;
    }
    
    .sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    	color:	#fff;
    	font-weight: bold;
    }
    
    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
        background:     #fff;
    	outline:		0;
    	color: #000;
    }
    
    .sf-menu .current_page_item a,
    .sf-menu .current_page_ancestor a,
    .sf-menu .current_page_parent a {
    	background: #fff;
        border-bottom-color:#fff;
    	color: #000;
    }
    
    .sf-menu ul {
        background: #04376C;
    }
    
    .sf-menu ul a {
        background: #04376C;
    }
    
    .sf-menu ul a:hover {
        color: #000;
    }

    I have a couple of issues to resolve.

    1. Parent Page text color when the child pages are being navigated over. The "Press" and "Projects" sections have Drop Downs. When your rolling over the Child pages, the text "Press" or "Projects" goes from Black to White and disappears because the Background of the Tab is white. Which CSS class do I need to adjust for that?

    2. Go to one of the Projects Child Pages. Then go back to the Drop Down Menu for that Projects. The Drop down menus are all white with Black Text. I want them to be the Dark Blue color with white text, but when rolled over the should go to white background with Black Text (just like the drop downs behave when your not actively viewing one of the Child pages for that Menu) How can I adjust the CSS for that?

    Posted 5 years ago #
  2. Hey,

    here's a 'commented' excerpt of the Superfish CSS responsible for the background:

    .sf-menu li {
    	background:		#fff; /* Background color Top Level*/
    }
    .sf-menu li li {
    	background:		#fff; /* Background color first sub-level */
    }
    .sf-menu li li li {
    	background:		#9AAEDB; /* Background color second sub-level */
    }
    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
        background:     #fafafa;  /* Background color all levels */
    	outline:		0;
        border-bottom-color:#ccc;
    }

    Hope this helps.

    Cheers,

    Chris

    Posted 5 years ago #
  3. Thanks Chris, the new menu is really hard to understand...

    Posted 5 years ago #
  4. ondrae
    Member

    Here is my commented Menu css.

    .sf-menu a, .sf-menu {
    border: 0; /*Gets rid of menu border*/
    }

    .sf-menu a, .sf-menu a:visited{
    color: white; /*Sets top level font color*/
    }

    .sf-menu li {
    background-color: transparent; /* Background color Top Level*/
    }

    .sf-menu li li a, .sf-menu li li a:visited{
    color: #666; /*Sets second level font color*/
    }

    .sf-menu li li a:hover{
    color:#fff; /*Sets second level hovering font color*/
    }

    .sf-menu li li {
    background: #8194bd; /* Background color first sub-level */
    }

    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    background: #5e76aa; /* Background color all levels */
    outline: 0;
    border-bottom-color:#ccc;
    color: white;
    }

    Posted 5 years ago #
  5. @ondrae: Thanks a lot for your help .. I'll create a document with more details in the next few days.

    @all: Let me know if you have more questions about Superfish, that should be included in my documentation.

    Posted 5 years ago #
  6. I hate to bump this topic, but I'm beating my head in and still can't find the exact CSS class I need to adjust for the one remaining issue I'm having with the drop down menus. You can see the site here.

    http://www.selkowitzco.com

    The problem is the upper level menu text color when you scroll down the sub menu, disappears because the white background. I just need to be able to make that text black, as your scrolling down the menu.

    It would definitely be great if there was some detailed documentation on all the CSS classes and ID's available for use on the drop down menus, because there are a lot of them.

    Posted 5 years ago #
  7. Hey,

    I took the original CSS coming with SuperFish and broke it up into the several conditions while hovering and clicking the several menu items:

    .sf-menu li { /* top level elements */
    	background:		red;
    }
    .sf-menu li li { /* second level elements */
    	background:		green;
    }
    .sf-menu li li li { /*third level elements */
    	background:		blue;
    }
    .sf-menu li:hover { /* still haven't found this one */
    	background:		white;
    	outline:		0;
    }
    .sf-menu li.sfHover { /* active level element */
    	background:		orange;
    	outline:		0;
    }
    .sf-menu a:focus { /* current menu */
    	background:		yellow;
    	outline:		0;
    }
    .sf-menu a:hover { /* hovered element */
    	background:		magenta;
    	outline:		0;
    }
    .sf-menu a:active { /* click element */
    	background:		yellow;
    	outline:		0;
    }

    I only configured the background .. text color follows the same scheme.

    The first three selectors should be clear, these are defining the standard display of the several menu elements without taking any action.

    I haven't found the fourth one .. maybe someone else could provide a definition for this one.

    .sf-menu li.sfHover defines the current menu item while hovering through the menu. Let's say your 2nd menu item contains a second level sub-menu and you hover through this sub-menu, the top-level item will stay with the defined background color .. if your 3rd menu item in the second level sub-menu contains a third level sub-menu then the 2nd menu item (top-level) and the 3rd menu item (second level) will stay with the defined background color.

    .sf-menu a:focus and .sf-menu a:active represent the clicked item .. you changed to another page in your blog then both of them define the color of this menu item .. both should have the same background / text color otherwise background and text color would change for the click.

    .sf-menu a:hover defines the element while hovering over it.

    The important thing to understand is that there're case where you need to break up a group of selectors with identical definitions into separate selectors with different definitions.

    Cheers,

    Chris

    Posted 5 years ago #
  8. Sorry .. forgot this one:

    You need to define
    .sf-menu li.sfHover a
    to get a black text color instead of the white one.

    Cheers,

    Chris

    Posted 5 years ago #
  9. Thanks so much, this was the class that I needed, but when I changed it, it also changed the color of the text in the submenu which causes a new problem. Is there a way to make it only change the color of the top level link?

    I tried adding

    .sf-menu li li.sfHover a {
    color: #fff;
    }

    To change the submenu text color to white but that didn't work?

    Any ideas? This has really racked my brain!

    http://www.selkowitzco.com

    Posted 5 years ago #
  10. .. will copy your CSS and test it tomorrow

    Cheers,

    Chris

    Posted 5 years ago #
  11. .. post deleted .. should test everything first

    Posted 5 years ago #
  12. Ok .. last order for today .. please try this one:

    .sf-menu li.sfHover a {color: #000;}
    
    .sf-menu li.sfHover ul li a {color: #fff;}
    
    .sf-menu li.sfHover ul li a:hover {color: #000;}
    
    .sf-menu li.current_page_item a:hover {color: #fff;}
    
    .sf-menu li.current_page_parent ul li a {color: #000;}
    
    .sf-menu li.current_page_parent ul li a:hover {color: #fff;}

    I guess that I ran the CSS through all possible scenarios .. hopefully!

    Cheers,

    Chris

    Posted 5 years ago #
  13. Thank You so much Chris!!!! That got it.

    Posted 5 years ago #
  14. newbie trying to learn. Are you guys placing all this code in a child style.css to override default settings?

    Posted 4 years ago #
  15. Hi,

    yes .. I put this into the child theme's style.css. Everything you change in the core files will be lost after an upgrade.

    Chris

    Posted 4 years ago #
  16. Hmm, second level elements wont turn green as the code says...

    nevermind, just add

    .sf-menu ul a {
    background:transparent;
    border-bottom:medium none;
    }
    Posted 4 years ago #
  17. halsteadlane
    Member

    Chris,

    I was totally racking my brain also on font color adjustments for the superfish upper level menu text color when you scroll down the sub menu. Thanks very much for your css for that!

    jb1013 - I also reviewed your website http://www.selkowitzco.com That has also helped.
    I did notice that the current selected page, when you hover over it, the font goes white, and with a white background the menu item then disappears. So if you change your css that Chris supplied to font color black it remains black and does not disappear into the white:
    .sf-menu li.current_page_item a:hover {color: #000;}
    .sf-menu li.current_page_parent ul li a:hover {color: #000;}

    Thanks again everyone!

    Posted 4 years ago #
  18. mithers
    Member

    OKIE, I'll pass it onto my colleague who is doing a little research on that. Thanks!

    Posted 4 years ago #
  19. Thematic is a highly extensible, WordPress Theme Framework featuring 13 widget-ready areas, drop-down menus.

    Posted 4 years ago #
  20. richardnblock
    Member

    Hi there,

    With what I believe is the latest Thematic release, I'm customizing my Superfish menu. I think I have it looking nice (richard n block dot com, at the top, no spaces or anything in the URL). I had been having some bugs, which this thread helped me iron out -- thanks to all.

    One last glitch I can't seem to solve: When I click on a link in a dropdown menu (e.g. Services > Writing), then mouse out before the page loads, the background for that LI goes transparent. I've tried changing all the background properties, and I've even specified some weird things with CSS, but nothing works, or it also has unintended consequences on other LI or A items.

    THis seems only to happen in Firefox.

    Is there a fix?

    EDITED TO ADD: I don't know what I changed, but it works now. However, my dropdowns don't look right in Chrome now. I don't know if it isn't rendering transparent background attribute for a dropdown menu or what . . . My original code is below, including snippets posted above; my changes are visible in the source at the URL in my post.

    Code below:

    `
    /* Menu

    -------------------------------------------------------------- */

    .skip-link {

    display:none;

    }

    #access {
    height: 34px;
    background: url('images/access_bg.png') repeat-x;
    border: 0;
    outline: 0;
    overflow: visible;
    z-index: 100;
    }
    .sf-menu {
    border-right: 0;
    font-size:15px;
    font-family:"Franklin Gothic Medium", "Franklin Gothic", Helvetica, Arial, sans-serif;
    }
    .sf-menu a, .sf-menu a:visited {
    text-decoration: none;
    border: 0;
    outline: 0;
    color: #eee;
    background: transparent;
    }
    .sf-menu ul {
    margin-top:2px;
    border-right:2px solid #102040;
    border-left:2px solid #102040;
    border-bottom:2px solid #102040;
    }
    .sf-menu li { /* top level elements */
    background: transparent;
    color: #eee;
    border: 0;
    outline: 0;
    }
    .sf-menu li li { /* second level elements */

    background: #4e5a70;
    border: 0;
    outline: 0;
    }
    .sf-menu li li li { /*third level elements */
    background: #102040;
    border: 0;
    outline: 0;
    }
    .sf-menu li:hover { /* box for hover item, level 1 */
    background: transparent;
    border: 0;
    outline: 0;
    }
    .sf-menu li a:hover { /* text for link in hover item, level 1 */
    color: #fff;
    }
    .sf-menu li.sfHover { /* active PARENT level list item WHEN CHILD LIST IS DROPPED DOWN*/
    background: transparent;
    color: #fff;
    border: 0;
    outline: 0;
    }
    .sf-menu a:focus { /* current menu */
    background: transparent;
    border: 0;
    outline: 0;
    }
    .sf-menu li li a {
    background: #4e5a70;
    color: #eee;
    }
    .sf-menu li li a:hover { /* hovered element, level 2 */
    background: #803333;
    color: #fff;
    border: 0;
    outline: 0;
    }
    `

    Posted 3 years ago #
  21. petergus
    Member

    so, to open this back up, im wanting to do some cool css...

    i want to make the 1st level current li change when i hover over one of its siblings....any ideas?

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.