Theme Customization

SCSS License Required

Procedures explained here apply only if you have purchased a license with source code included.

SCSS (source code) files enable simple customization of theme appearance, in case you need to adjust the theme to match corporate colors of your company or add new ui colors that are not included in the precompiled package.

Creating Custom UIs

Use SCSS to customize ui styles.

The process of creating new ui styles is very simple and consists of copying of existing ui style code and adjusting few variables.

In the following section, we'll explain how to build a custom style based on the existing blue ui.

Steps for creating a custom ui called corporate:

1. Create new file resources/sass/azzurra-legacy/azzurra-legacy-ui-corporate.scss.

2. Copy content of the file resources/sass/azzurra-legacy/azzurra-legacy-ui-blue.scss into newly created file.

3. Replace line $custom-ui-label:'blue'; with $custom-ui-label:'corporate';.

4. Tweak theme variables according to your needs.

5. Compile your theme by running compass compile within resources/sass folder.

6. To include newly created ui in azzurra-legacy-ui-all.css add the following line

@import 'azzurra-legacy-ui-corporate.scss';

to the resources/sass/azzurra-legacy/azzurra-legacy-ui-all.scss file.

7. Modify your application code to use newly created ui styles: corporate-panel, corporate-button , corporate-tab, ...

8. Refresh your browser.