This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| user_guide:extjs:theme [2022/04/21 13:41] – admin | user_guide:extjs:theme [2022/04/21 15:41] (current) – [Production built] admin | ||
|---|---|---|---|
| Line 3: | Line 3: | ||
| * This part will show you how to modify the base theme which RADIUSdesk uses when building the production optimised Javascript Code. | * This part will show you how to modify the base theme which RADIUSdesk uses when building the production optimised Javascript Code. | ||
| * Make sure you have access to the RADIUSdesk repository to check it out using git. | * Make sure you have access to the RADIUSdesk repository to check it out using git. | ||
| + | |||
| + | <code bash> | ||
| + | # Check out the latest version of RADIUSdesk | ||
| + | # We will check it out in the home directory of the **system** user. | ||
| + | cd ~ | ||
| + | git clone https:// | ||
| + | </ | ||
| + | * Check out the Ext JS GPL version SDK | ||
| + | <code bash> | ||
| + | cd ~ | ||
| + | mkdir extjs-gpl | ||
| + | cd extjs-gpl/ | ||
| + | git clone https:// | ||
| + | ln -s / | ||
| + | </ | ||
| + | * For this reference we will create a black theme with red lettering. | ||
| + | <code bash> | ||
| + | cd / | ||
| + | vi Component.scss | ||
| + | </ | ||
| + | * The file looks as follows | ||
| + | <code bash> | ||
| + | $base-color: | ||
| + | $panel-header-color: | ||
| + | $tab-color-active: | ||
| + | </ | ||
| + | * Please adapt to the them you want. | ||
| + | * After you made the adjustments, | ||
| + | <code bash> | ||
| + | cd / | ||
| + | sencha package build | ||
| + | </ | ||
| + | * Now that the theme is completed we can build the RADIUSdesk production GUI to see how it looks. | ||
| + | ===== Creating A Custom Theme - Part 2 ===== | ||
| + | ==== Development built ==== | ||
| + | * One can create a development and/or a production built using the Sencha Command. | ||
| + | * To build the development code: | ||
| + | <code bash> | ||
| + | cd / | ||
| + | sencha app refresh | ||
| + | sencha app build development | ||
| + | </ | ||
| + | * Create this built if you also want to modify some of the RADIUSdesk GUI code and you want to see the modifications before building the final built. | ||
| + | |||
| + | ==== Production built ==== | ||
| + | * To build the production ready optimized code | ||
| + | <code bash> | ||
| + | cd / | ||
| + | sencha app refresh | ||
| + | sencha app build production | ||
| + | </ | ||
| + | * This will now build the production ready code but we actually need to see how it looks in order to determine that the theme is in order. | ||
| + | * The production ready code will sit in this directory / | ||
| + | |||
| + | ==== Looking At The Results | ||
| + | |||
| + | * Link the rd directory to the rd_tmp directory served in the webroot of the Nginx web server. | ||
| + | <code bash> | ||
| + | sudo ln -s / | ||
| + | </ | ||
| + | * Then to view the theme you can navigate to these URLs | ||
| + | * DEVELOPMENT http:// | ||
| + | * PRODUCTION http:// | ||
| + | |||
| + | |||