Sure i can do, i had to change a few things in backend so i can't remember off the top of my head everything i had to do but here's a good start
Before we start you do not need to delete your menu made in the menu manager, superfish pulls the data from these so you still need them!
1. Download and install superfish on your site
2. Once superfish is installed it should have created an unpublished module using the mod_superfishmenu - If it hasn't create a new module, then select mod_superfishmenu as your module template.
3. Edit the module - Ensure that it is set to the user3 position (user 3 is the top menu location)
4. Edit the module parameters:
Attachment:
modparams.JPG
Menu Name - Make sure you select the menu that you want to display
Menu Type - Horizontal we need for this
You can add in your own custom style sheets if you wish, i just added the default ones im using on the site to ensure the whole site is handled by the same css.
You may also want to take a look at the rest of the parameters as there's a little bit of customising in there.
5. Once your happy with what you have done, save and then in module manager, deactivate your current menu, and then activate your new superfish menu.
6. At first its going to have the default style, to edit the colours, take out colours that you dont want / background colours you will need to edit the following:
/modules/mod_superfishmenu/tmpl/css/superfish.css
Line 55 Onwards says...
Code:
/*** DEMO SKIN ***/
.sf-menu a { color:#000;
float: left;
margin-bottom: 0em;
font: Ariel;
}
.sf-menu a {
border-left: 0px solid #FFF;
border-top: 1px solid #FFF;
padding: .75em 1em;
text-decoration:none;
}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: #FFFFFF;
}
.sf-menu li {
background: #14dbf9;
}
.sf-menu li li {
background: #14dbf9;
}
.sf-menu li li li {
background: #FFFFFF;
color: #000000;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #14dbf9;
outline: #000000;
color: #FFFFFF;
Most of your colours/visual properties are contained in that part of the code. The sizing is also controlled in superfish.css, noteably above the code i have just posted (each link width, height etc.) You should really play around with it for half hour to get to grips with how superfish handles these properties; i would suggest only changing one value at a time; easier to grasp what parameters are controlling what then if your not a css expert
- Also the background translucent image that appears as the background for the submenus (drop down) is controlled at the bottom of that css file, there is also an image in the superfish' module folder (/mod_superfishmenu/images/) that you can edit too.
The CSS file will however NOT control the text styling - i found this out myself when i had the problem
you can find how to edit the text colour here:
http://forum.joomla.org/viewtopic.php?f=472&t=382932I know ive missed some things, so if u need more help just ask; oh yeh one more thing; when editing the module, in module parameters; make sure the opeion "Always show submenu items" is on yes
Good luck and let us know how it works out for you!
Luke
