The Superfish add-on creates a JavaScript drop-down navigation menu for your site. Often, the first thing site owners want to do is customize its appearance and function beyond the options provided in edit mode. Here are a few commonly requested customizations that require only minor adjustments to the code.

Superfish is installed to your packages directory. To get started, copy each file you need to edit out of its default location (/packages/superfish/blocks/superfish) and into a new directory in your site's blocks folder (/blocks/superfish/). concrete5 will override the default Superfish files with the edited ones, while leaving the original files intact for future upgrades.

Set transparency

To set the menu's overall transparency, we'll need to add an opacity property to the superfish css. In a text editor, open packages/superfish/blocks/superfish/css/superfish.css and add an opacity declaration in the following class:

.sf-menu, .sf-menu * {
    margin:         0;
    padding:        0;
    list-style:     none;
    opacity: 0.8;
}

I chose 0.8, which gives an opacity of 80%. Setting the value to 1 would, of course, make a completely opaque menu.

To adjust the opacity of only sub-menu items, try adding an opacity setting to sub classes like .sf-menu ul li.

Disable drop shadow effect

The drop shadow is actually a background image. Look for this line:

.sf-shadow ul {
    background: url('../images/shadow.png') no-repeat bottom right;
...
}

And comment it out like so:

.sf-shadow ul {
    /* background:  url('../images/shadow.png') no-repeat bottom right; */
...
}

Disable arrows

Superfish adds a small arrow image (or an arrow text character in older browsers) when your nav includes sub-pages. If you don't want this,we'll need to edit the Superfish JavaScript, located in blocks/superfish/js/superfish.js.

Find:

autoArrows  : true,

And set it to false:

autoArrows  : false,

Alter or remove border styles

Wondering how to get rid of (or alter) the default 1px white border on SF's list items? You may have noticed that they're not set by superfish.css-- they're actually in view.php. This file contains some additional style declarations, most of which have been wrapped in php to make them editable through the block edit interface (background color etc).

The border styles, however, are static (at least as of version 1.1.3) and need to be altered manually. Fire up your text editor and check out around line 32 in view.php:

#sf-menu<?php   echo $bID?> .sf-menu li { border:1px solid <?php   echo ($controller->menuColor)?$controller->menuColor:'#fff'?>; border-top:1px solid #fff; border-left:1px solid #fff; }

See those declarations at the very end? They're making your white borders. You can swap the hex color values out to whatever you like, or if you want to get rid of the borders-- comment out the styles all together:

/* border-top:1px solid #fff; border-left:1px solid #fff; */

(Be forewarned, though: omitting these borders styles could cause layout trouble in IE6, as noted by the comment in view.php. This is probably why they were left in place and not added to the GUI block edit dialogue).