Finsemble: White Labeling

White Labeling

As of version 0.4, all of the finsemble system components (toolbars, dialogs, etc) are skinnable.

To get started, follow the instructions below:

  1. Make sure the function buildSass is uncommented in gulpfile.js. If it doesn't exist, paste the function below in to your gulpfile.
  2. If you had to add the buildSass function to your gulpfile, make sure it's a dependency in build (after webpackReactComponents) and devServer (after watchServices).
  3. Pull down the folder and files from: https://github.com/ChartIQ/finsemble-seed/tree/master/src/components/assets.
    • Make sure to get the contents of both folders. The sass files must be in ./src/components/sass for the build process to find them properly.
  4. Add the snippet below to /node_fileserver/FinsembleConfigs.js.
    • Place it under Finsemble.updateBaseURL so that StartupConfig will be defined.
  5. run npm run dev to see the McDonald's theme.
  6. Modify any of the sass files in ./src/components/sass to modify system components. Start in the variables files to see what you can change quickly.

buildSass function

    function buildSass(done) {

        done();

        return gulp.src([
            path.join(__dirname, '/src/components/**/**/*.scss'),
            //compiles sass down to finsemble.css
            path.join(__dirname, '/src/components/assets/*.scss')
        ])
            .pipe(sass().on('error', sass.logError))
            .pipe(gulp.dest(path.join(__dirname, '/built/components/')));
    }

FinsembleConfigs.js additional snippet


    //sets path for any css overwrites. 
    //**FULL PATH REQUIRED IF YOU WANT IT TO WORK WITH USER DEFINED COMPONENTS**
    //Uncomment for a McDonald's themed experience
    //Modify `./src/components/assets/css/finsemble-overrides.scss` to change the styling.
    Finsemble.setCSSOverridesPath(StartupConfig[env].clientRoute +'/components/assets/css/finsemble-overrides.css');