Help with CSS Styles for Drop Down Menus in Thematic 0.9

ThemeShaper Forums » Thematic

[closed]

Help with CSS Styles for Drop Down Menus in Thematic 0.9

(21 posts)

Started 14 years ago by jb1013
Latest reply from petergus
This topic is resolved

Tags:

jb1013
Member
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 14 years ago #

Chris
Moderator

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 14 years ago #

dannydamnboy
Member

Thanks Chris, the new menu is really hard to understand...

Posted 14 years ago #
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 14 years ago #
Chris
Moderator

@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 14 years ago #
jb1013
Member

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 14 years ago #
Chris
Moderator
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 14 years ago #
Chris
Moderator

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 14 years ago #
jb1013
Member

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 14 years ago #
Chris
Moderator

.. will copy your CSS and test it tomorrow

Cheers,

Chris

Posted 14 years ago #
Chris
Moderator

.. post deleted .. should test everything first

Posted 14 years ago #

Chris
Moderator

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 14 years ago #

jb1013
Member

Thank You so much Chris!!!! That got it.

Posted 14 years ago #
NYCJacob
Member

newbie trying to learn. Are you guys placing all this code in a child style.css to override default settings?

Posted 13 years ago #
Chris
Moderator

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 13 years ago #
Seijun
Member
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 13 years ago #
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 13 years ago #
mithers
Member

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

Posted 13 years ago #
sharper
Member

Thematic is a highly extensible, WordPress Theme Framework featuring 13 widget-ready areas, drop-down menus.

Posted 13 years ago #
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 12 years ago #
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 11 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.