Clean theme

Clean Theme

First Steps

Firstly, get the latest version from the download area, after that install the Accordion Menu.

1

Choose the clean theme: If you would like to use this theme on your site, then follow these steps: Basic ParametersThemeClean

2

Start to edit the theme: If you click on Settings button, you can see the special characteristics of this theme and also you can edit the all specific parameters.

Okay, now the theme is active and you can edit your theme, so it's time for the in-depth guide. Let's check the theme parameters step by step!

Clean Theme Parameters

Clean Theme screenshot

Of course all the other level of the parameters are working the same way as at level 1.

Skin Loader

Basically, you can define the complete theme with the Skin loader parameter. In real, with the help of this parameter you can compose your own skin. This row contains 5 parameters:

Clean Theme Settings

  • Theme: This parameter contains the available skin variations, usually it adds a color style to the menu. The clean theme comes with 12 themes, and with 2 color schemes, it means it's 24 skins. Theme examples: Blue Light, Blue Dark, Levander, Orange, Red and so on…ohh and of course you can add your own custom colors.
  • Opacity: This parameter sets the opacity color, it's a kind of color scheme parameter. You can set the Light opacity, which means a white transparent style or you can set the Dark opacity, which means a black transparent style. Below on the left side of the picture you can see the Light, on the right side the Dark style: Opacity
  • Border radius: You can turn On and Off the rounded corners for your menu.
  • Image Align: With the help of it you can determine the direction of the menu. Below on the left side of the picture you can see the Reset left, on the right side the Reset right. If you choose one of them, then it will reset all margin and padding setting, so be careful. Align
  • Font: You can choose some predefined font family from the list. For example: Cabin, Open Sans, PT Sans, Rosario etc… Of course you can give a totally custom font too, please visit the font manager documentation for more information.

Title Font

If you click on this button, you will see a new window with our font manager. Naturally, with this parameter you can edit the title font.

Background Gradient

This parameter sets the background color gradient for the whole menu. So, you can turn it off, if you would like to use the background of your template. The first input sets the top gradient, the second sets the bottom. (It's a linear gradient.) You can write a hex color code in the input or you can use the color picker.

Align

Margin

You can set the margin around the menu from all sides, also it works with em or px. Don't write unit into the input field, just a number!

Border Radius

With the help of this parameter you can set the border radius (rounded corner) value for Top Left, Top Right, Bottom Right, Bottom Left side. This applies to the entire menu.

Level 1 Parameters

Margin

Level 1 margin

This parameter sets the margin from the edge of the menu for level 1. It has 4 input: Top, Right, Bottom, Left. Also you can select the unit, pixel or em. Don't write unit into the input field, just a number! On the animated picture you can see, that I change the left margin. Technically it moves the level 1 menu item texts, links with the plus image and the category counter.

Level 1 margin

Padding

Level 1 padding

This parameter sets the padding from the edge of the menu for level 1. It has 4 inputs: Top, Right, Bottom, Left. Also you can select the unit, pixel or em
Don't write unit into the input field, just a number!

On the animated picture you can see the left padding changing. Technically it moves the level 1 menu item texts, links without the plus image and the category counter.

Level 1 padding

Background color

With these four parameters you can set background for every menu level and state. You can change the default Background Gradient gradient, defaultly we only used some transparent colors.

  • Default: The #ffffff00 color code is a totaly transparent white color, it is equal to RGBA(255,255,255,0). So the Default state gets the blue Background Gradient, but the other 3 states are a bit different.
  • Hover: With the help of this parameter you can set the hover state. It's happening when you put your cursor over a menu item. The #ffffff33 is a white transparent color with 20% opacity, it is equal to RGBA(255,255,255,0.2). This color will lighten a bit on the blue gradient, but you can set a totally different color for every state on every level.
  • Active: You can set the color of the active menu points. The #ffffff33 is a white transparent color with 20% opacity.
  • Opened: You can set the color of the opened menu points. The #ffffff33 is a white transparent color with 20% opacity.

Background State

Border color

With the help of this parameter you can set the color of the border between the menu items.

Opened State

Level 1 image

  • Image: Choose an image from the list, that you would like to use for level 1. (You can color them, with the colorize parameter.)
  • Position: You can set where to show the image: Left side or Right side.
  • Colorize: You can add a color for the image, if you use your own image, then just turn off the colorize parameter.

Closed State

This is completely similar to the previous parameters, but it controls the closed state.

Text Font

With the help of this parameter you can set the level 1 text font for all states: Text, Active, Link, Hover. In this documentation we show you how to control the font manager.

The other Levels Parameters

All the other levels of the parameters are working the same way.