Elegant Theme

Elegant Theme

First Steps

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

1

Set the elegant theme: If you would like to use this theme on your site, then follow these steps: Basic ParametersThemeElegant

2

Start to edit the theme: If you click on the Configure 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!

Elegant Theme Parameters

Elegant Theme screenshot

Of course all the other levels of the parameters are working the same way as 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:

Elegant Theme Settings

  • Theme: This parameter contains the available skin variations, usually it’s giving a color style to the menu. The elegant theme comes with 6 themes, and with 3 color schemes, it means it’s 18 skins. Theme examples: Blue , Green, Orange, Red and so on…ohh and of course you can add your own custom colors.
  • Color Scheme: This parameter sets the scheme color style. You can set the Dark scheme, which means a dark button style or you can set the Pale scheme, which means a lighter color style. In addition it’s an optional parameter, so if you don’t choose a scheme, then it will be self-colored just a bit darker. Below on the left side of the picture you can see the Dark, on the center the self-colored and on the right side the Pale style: Elegant Schemes
  • 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 add totally custom font too, please visit the font manager documentation for more information.

Title Gradient

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

Gradient

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.

Margin

You can set the margin around the menu from all side, 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.

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 text, 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, that I change the left padding. Technically it moves the level 1 menu item texts, links without the plus image and the category counter.

Level 1 padding

Border radius

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 actual menu level. On the animated picture you can see, that I change all borders from zero to maximum.

Level 1 padding

Default background

Align

This parameter sets the background color gradient for every menu item. So, you can turn it off, if don’t want to use the button style. (This is the default setting from level 2.) 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.

Special background

Align

These 3 parameters are working exactly like a background color gradient parameter. You can set all states for your menu, and this will change the background of your menu item.

  • Hover: This parameter sets the background color gradient on mouse over for the level 1 menu items.
  • Active: This parameter sets the background color gradient for the active level 1 menu items.
  • Opened: This parameter sets the background color gradient for the opened level 1 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 paramter.

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 paramters are working the same way.