Bold Theme

Bold theme documentation

First Steps

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

1

Set the bold theme: If you would like to use this theme on your site, then follow these steps: Basic Parameters -> Theme -> Bold

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 all the 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!

Bold Theme Parameters

Bold Theme screenshot

Of course all the other levels of the parameters work as the same way as at level 1.

Skin Loader

Basically you can set up 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 4 options:

Bold Theme Settings

  • Theme: This parameter contains the available skin variations, usually it adds a color style to the menu. The bold theme comes with 5 themes, and with 2 color schemes, it means there are 10 predefined skins. Theme examples: Blue, Green, Orange, Red and so on…ohh and of course you can choose your own custom colors.
  • Color Scheme: This parameter sets the scheme color style. You can set the Dark scheme, which means a dark style or you can set the Light scheme, which means a lighter color style. Below on the left side of the picture you can see the Dark and on the right side the Light style: Bold Schemes
  • 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 Dark left, on the right side the Dark right. If you choose one of them, then it will reset all margin and padding settings, so be careful. This parameter contains 4 option: Dark left, Dark right, Light left, Light right. Please choose the aligning for your scheme, because this parameter is changing the color of the images too. 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 a totally custom font too, please visit the font manager documentation for more informations.
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 choosing the top gradient, the second is choosing the bottom. (It’s a linear gradient.) You can write a hex color code in the input or you can use the color picker.

Title Gradient

Border color

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

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 into 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 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 changed the left margin. Technically it moves the level 1 menuitem 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 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 changed the left padding. Technically it moves the level 1 menu item text, links without the plus image and the category counter.

Level 1 padding

Default background

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.

Align

Special background

These 3 parameters work exactly as a background color gradient parameter. You can set all state for your menu, and it will change the background of your menu item.

  • Hover: This parameter defines the background color gradient on mouse over for the level 1 menu items.
  • Active: This parameter defines the background color gradient for the active level 1 menu items.
  • Opened: This parameter defines the background color gradient for the opened level 1 menu items.

Align

Opened State
  • Image: Choose an image from the list, that you would like to use for level 1. (You can change their color 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.

Level 1 image

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 you can see how to control the font manager.

The other Level Parameters

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