Customization

Before explaining how Azzurra can be customized, it is important to target Ext JS version you're using.
Change $extjs-version variable in resources/sass/azzurra/_extjs-version.scss to suit your app Ext JS version.

Creating Custom UIs

SCSS files enable simple customization of ui styles. Use SCSS to adjust a theme to corporate colors of your company or add some nice colors not found in the theme.

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 show how to build a custom style based on the existing green ui.

Steps for creating a custom ui called corporate:

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

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

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

4. Tweak theme variables according to your needs.

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

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

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

to the resources/sass/azzurra/azzurra-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.

Creating Custom Sized Themes

Use $theme-scale-factor variable in resources/sass/azzurra/_variables.scss to create themes of custom size.