Alpaca 10.6

Alpaca Custom Styling / Branding

Alpaca Styling creates an output CSS file to be used with the Alpaca Server for custom branding and colorization.

Caveats

To maximize forward compatibility only the src/sass/bootstrap/_colors.scss should be modified with the desired colors for the application. Other components can be styled and modified but forward compatibility is not guaranteed. To ensure compatibility with each release, it is recommended that a new branding file be generated for each major release of Alpaca.

Prerequisites

  • Alpaca Style tarball. Can be downloaded from the ECG portal for all major releases.
  • NodeJS
    • Recommended to be installed with nvm.
    • Recommended Node version: v16.15.1
      • This version can be installed with nvm using the command nvm install v16.15.1.
      • Verify version with command node -v.

Process

  1. Extract the project: tar xzf alpaca-styler-<version>-bin.tar.gz
  2. Enter the project: cd alpaca-styler-<version>
  3. Install dependencies: npm install
  4. Edit the src/sass/alpaca.scss and modify the $fa-font-path variable to be empty. This is due to a change in the way Alpaca builds versus the styling project. It should look like: $fa-font-path: "";
  5. Edit the src/sass/bootstrap/_colors.scss file to include the desired colors.
  • Notes:
    • The default palette is grey by default.
    • The primary palette is slate blue by default.
    • The success palette is green by default.
    • The danger palette is red by default.
    • The warning palette is yellow by default.
  1. Build the output CSS: npm run sass:build
  2. The output CSS will be dist/css/alpaca.css. This file will need to be moved to the Alpaca Server or other hosting location.
  3. Update the Alpaca Server client configuration to include the new style sheet in its style-sheets configuration parameter.