Full License RequiredProcedures explained here apply only if you have purchased a license with source code included.
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
2. Copy content of the file
resources/sass/azzurra/azzurra-ui-green.scss into newly created file.
3. Replace line
4. Tweak theme variables according to your needs.
5. Compile your theme by running compass compile within
6. To include newly created
azzurra-ui-all.css add the following line
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.