[SOLVED] Customizing a Superfish Dropdown Menu

Posted by mattbrand on January 3, 2013 at 8:26pm

Hey all.

I have successfully installed Superfish by installing the Libraries module, downloading the Superfish library and putting it in /sites/all/libraries, and installing the Superfish module.

Now I would like to customize the look of it. The pre-built styles that show up in the drop-down in the Superfish Configuration could be a decent starting point, but I really would like to get into the details and get the measurements and colors just right.

How can I do this?

Comments

From the Superfish dl

Posted by hokuspokus on January 3, 2013 at 8:43pm

From the Superfish dl page

Working knowledge of CSS is a requirement.
Use the Simple style as reference (/superfish/styles/simple in the Superfish library v1.2-beta).
Utilize a DOM inspector (such as Firebug) for temporarily modifying live code in real time.
Set the Mouse delay to 99999999 so the sub-menus will stay open for a longer time giving you more time to work with them.

Basically you have to create custom css for the menus. Firebug is the route to go with for inspecting the elements of the menu (fonts, background colors, size and position, etc) then use that information to write your own CSS over-rides for the style.

So do I...

Posted by mattbrand on January 3, 2013 at 8:51pm

So do I copy the "simple" style, and rename it? I tried copying one of the color styles - the blue.css, and renaming it, but it didn't show up in the dropdown list of styles to select in the configuration.

Solved

Posted by mattbrand on January 3, 2013 at 8:57pm

My question got answered for me:

"Just use the preset that gets you closest to what you need, and then override the styles in your main stylesheet. It won't generate a custom dropdown item."

Thanks again!