Default Theme

Default Theme

First Steps

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

1

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

2

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

Default Theme Parameters

Default Theme screenshot

Of course all the other levels 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. This row contains 3 parameters:

  • Theme: This parameter contains the available skin variations, usually it adds a color style to the menu. In the default theme exists only one theme, the Classic.
  • 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.

Default Theme Settings

Title Font

If you click on this button then, 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 in the input field, just a number!

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 in 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 input: Top, Right, Bottom, Left. Also you can select the unit, pixel or em. Don't write unit in 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 text, links without the plus image and the category counter.

Level 1 padding

Border

  • Width: You can add the width of the border for every menu items. If you don't need the border, just set it 0. (Or select the Style for none.)
  • Color: With the help of this parameter you can add a color for your border. Just write a hex color code in the input, or use the color picker.
  • Style: You can set the style of the border. For example: solid, dotted, dashed
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 state: Text, Active, Link, Hover. In this documentation we show you how to control the font manager.

The other Levels Parameters

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