Login

UberMenu 3

Support CenterSubmit a Ticket

Creating a custom skin

If you would like to provide custom styling for UberMenu for your theme, you can register a custom skin that your customers can select in the UberMenu Control Panel. This guide will cover the principles to keep in mind when writing custom styles for the menu, how to write a proper custom skin, and how to register that skin with UberMenu so that your users can use it.

Important principles for customizing UberMenu for your theme

It is critical that when writing custom code for UberMenu that you do not break the UberMenu core functionality. Doing so will break the settings and remove the customer’s control over the plugin.

When adding UberMenu-targeted CSS:

1. Encapsulate all of your UberMenu-related CSS in a custom skin stylesheet

By keeping all of your UberMenu-related CSS in a custom skin, users still have the ability to switch to a different skin and use the standard UberMenu styles and features rather than your custom code if desired.

Using a custom skin also means that your code will be loaded in the proper sequence – such that while maintaining the proper selector specificities, it will override the core styles while allowing the Customizer-generated styles set by users to override your CSS.

2. Make sure you use the appropriate selector specificity

If your selector specificity is too high, it will override the user’s ability to control the styles from the Customizer. Be sure to use the selectors prescribed in the sample skin to ensure the correct specificity.

3. Do not change structural or layout properties of the menu

When adding custom styles, you should only change colors, fonts, etc.

Do not change structural/layout CSS properties, including:

  • display
  • position
  • width, min-width, max-width
  • height, min-height, max-height
  • left, right, top, bottom
  • margin
  • padding
  • clear
  • visibility
  • overflow
  • float

These properties are controlled by UberMenu, and if you change them you will likely break the menu functionality.

If the layout needs to be changed, it should be changed in the Control Panel or menu item settings, not in custom code.

Here’s an example: if your menu is aligned right but your submenus aren’t wide enough, you should not change the submenu’s ‘width’ or ‘min-width’ property. Instead, you should change the Submenu Bounds (Maximum Submenu Width) setting to “Unbounded” and give the element that should bound the submenu the position:relative property.

4. Provide your customers with a Control Panel settings export if you need to change default settings

Rather than overriding styles in CSS, you should change the settings. Therefore you can export a settings panel configuration and have your customers import that if you have a default set of settings that work well with your theme.

Creating a custom skin

If you would like to hand-code a custom skin, check out the custom-sample-skin.css for an example. You will want to do a find-and-replace on “ubermenu-skin-none” and replace it with “ubermenu-skin-{mytheme-skinslug}” (where {mytheme-skinslug} is your chosen slug, for example ubermenu-skin-supertheme-blue).

The best and easiest way to generate a custom skin is to generate a custom skin with LESS. The LESS files for UberMenu can be found in ubermenu/pro/assets/css/skins/. An example LESS skin can be found in ubermenu/pro/assets/css/skins/custom-skin.less. Copying and then renaming this file, changing the @skin_name to your skin slug and the color values to your desired options will generate a skin for you that you can then copy into your theme.

Registering a custom skin

Once you have your custom skin stylesheet built, you will want to include it in your theme. Then you will register that stylesheet with UberMenu so that it will appear in the UberMenu Control Panel and your customers can choose to use it. This code would go in your functions.php or equivalent. Naturally, you would replace the function name and theme-related strings with values specific to your theme.

add_action( 'init' , 'mytheme_register_ubermenu_skins' , 9 );
function mytheme_register_ubermenu_skins(){
   if( function_exists( 'ubermenu_register_skin' ) ){
      $skin_slug = 'mytheme-skinslug';       //replace with your skin slug
      $skin_name = '[My Theme] Skin Name';   //Replace with the name of your skin (visible to users)
      $skin_path = get_stylesheet_directory_uri() . '/path/to/skin.css';  //Replace with path to the custom skin in your theme
      ubermenu_register_skin( $skin_slug , $skin_name , $skin_path );
   }
}

The skin will then appear as an option in the Control Panel

You can register multiple skins if you’d like by calling ubermenu_register_skin() multiple times with different skin slugs.

Setting the custom skin as the default skin

If you would like to set your skin as the default, you can use this code:

add_filter( 'ubermenu_settings_defaults' , 'mytheme_filter_settings_defaults' );
function mytheme_filter_settings_defaults( $defaults ){
   $defaults['ubermenu_main']['skin'] = 'mytheme-skinslug';
   return $defaults;
}

Again, change the function name and slug.

Of course, this will only affect users if they are still using the default settings (effectively, if they install UberMenu after your theme).

On this page