Theme Settings

The first step is to change the settings of the site using the “site theme” tab of the CMS.

NB if you are using source safe for you project, please check out the following files before makings to the site theme settings so that these files can be updated:

- Eonic.web.config
- Eonic.theme.config
- The variables.less file within the theme you are updating.

The first time you make changes in the current theme settings, press the save settings button at the bottom of the form before you start, as the settings need saving twice and can sometimes revert back to the defaults the first time you hit the save button.

Presets

in most instances this can be left on the default setting and you will not need to save a new preset.

Main Colours

When adding the main colours, it is important to use the options logically:

Primary – the main colour for the clients branding
Action – a colour which will stand out against the brand in order to pick out important details
Info – a colour which will not be as prominent and can be used for less important details
Success – indicates actions have been completed successfully, so a shade of green is best her
Warning – indicates possible problems, so a shade of yellow or orange is best
Danger – Indicates a problem, so red is best here.

If you need to use more colours in addition to the 6 available here, you can add these in the variables.less .

Font Settings

Each theme comes with a few font options already included. If you need to add a new font here, you will need to make changes in 2 places. First, add the new font to the top of the theme-custom.less file within the css folder of your theme. You can delete other fonts which you are not using from here to speed up the load time of the site.

Secondly, you need to add the new font the the SkinSettings file. This can be found within the theme folder under xforms/Config. Please see changing the skin settings for more details. The next time you edit the skin settings, you should then be able to pick the new font from the dropdowns.

Once you have made all the changes you require to the skin settings, hit the save button at the bottom of the form. You can go back in and edit these at any stage.

Skin Settings

The SkinSettings.xml file can be found within the theme folder under xforms/Config. This form controls the site theme form within the CMS, so this is where you can add extra options. Please follow the example already featured in the form to add new fields, or see the guide on xml forms.

NB Make sure within the instance the key matches the name of the variable you are using, to make sure this form can update the variable.

Making more changes

Changing the settings through the CMS updates settings in the eonic.theme.config file and the variables.less file. There are additional changes that can be made in these files which are not accessible through the CMS. See the variables section  for more details.