Generating alternative smartadmin module: Difference between revisions

From MiRTA PBX documentation
Jump to navigation Jump to search
No edit summary
No edit summary
 
Line 22: Line 22:
   gulp build
   gulp build
   gulp build-rtlcss
   gulp build-rtlcss
Depending on the system you may need to install gulp using:
  npm install --global gulp-cli


If you just want to change the colors, the relevant change to apply is in ./src/scss/_modules/variables.scss
If you just want to change the colors, the relevant change to apply is in ./src/scss/_modules/variables.scss

Latest revision as of 15:40, 20 March 2021

If you plan to apply substantial changes to the SmartAdmin theme module, it can be worth getting one developer license and compile your own smartadmin theme module. If not used to nodejs, npm and gulp, it can appear troublesome to compile all the data. Hidden in the SmartAdmin documentation there is a Youtube video https://www.youtube.com/watch?v=LwD-kYlZXtw but the relevant steps are the following:

Install nvm to be able to select the nodejs version of choice. The documentation states to use version 6.9.2, but that doesn't work, so I used version 10.16.0

 curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.35.3/install.sh -o install_nvm.sh
 chmod a+x install_nvm.sh
 ./install_nvm.sh

Check the available versions

 nvm -ls-remote

Install the version of your choice

 nvm install 10.16.0
 npm install express

Go in the smartadmin-html-full and run the commands:

 npm install gulp
 npm install
 gulp build
 gulp build-rtlcss

Depending on the system you may need to install gulp using:

 npm install --global gulp-cli

If you just want to change the colors, the relevant change to apply is in ./src/scss/_modules/variables.scss

These are the colors used by default:

 $color-primary: #2198F3;
 $color-success: #52bf11;
 $color-info: #BB1BF4;
 $color-warning: #FF9A13;
 $color-danger: #FC1349;

Don't forget to enable some "speedups" in build.json

               "compile": {
                       "jsUglify": true,
                       "cssMinify": true,
                       "jsSourcemaps": true,
                       "cssSourcemaps": true,
                       "autoprefixer": true,
                       "seedOnly": false,
                       "rtl": false
               },