The Style Generator is the simplest way to create a custom skin for your menu.
Note that the Style Generator will create an entirely new skin for your menu; it will not augment existing skins.
- Open the UberMenu Control Panel, Appearance > UberMenu
- Open the Style Configuration panel
- Set the Style Application to Style Generator
- Open the Style Generator panel
- Set the colors and settings for each of the options. To select a color, click the color box, select a color from the color picker, then click the box again to set the color. If you edit the color value directly, make sure you enter a valid HEX value.
- Click Preview to see what your skin will look like. Refine if desired.
- When you are done, click Save All Settings
Including in the site <head>
By default, the custom styles generated by the Style Generator will be loaded in the site’s <head>
Writing to a file
If you want, you can have UberMenu attempt to write a custom CSS file. In order to do so, you’ll need to have your ubermenu/standard/stylegenerator/ directory writable by the server.
To write to a file, enable Save custom CSS to file
If the file cannot be saved, you will receive a warning when saving your settings. In this case, UberMenu will automatically revert to including your custom styles in the site head.
Including elsewhere
If you would rather include your custom CSS in another file, you can still use the Style Generator, but set the Style Application to Do Nothing. Then you can view the CSS (next to the preview button) and copy it into any stylesheet you want. No skin will be included by UberMenu in this case.
Background gradients & Internet Explorer
Please note that older versions of IE do not support CSS3 gradients. Therefore in IE8 and IE9, a flat color will be displayed instead of a gradient. If you wish to use a gradient as your background, you can do so by setting a background image for those elements and using a repeating gradient image.