Frontend customization¶

This page applies to Fleio version 2023.03 or newer.

The frontend created using Angular framework is located at these paths:

/var/webapps/fleio/frontend/staff - staff panel

/var/webapps/fleio/frontend/enduser - enduser panel

Adding new themes¶

Important

If you are adding or changing Fleio files, other than Fleio settings files that are stored in Docker volumes, see Adding or changing files in Fleio Docker images.

First, we’ll use a local environment to write the .scss custom theme and generate our .css file that we’ll deploy on production. Use the following procedure (adapt to your operating system if needed). We’ll use demo as the name for our custom theme.

Requirements:

node v18.20.2

Important

2024.08 Angular versions

If you are using Fleio version 2024.08, you must use different Angular versions than those defined below. Use @angular/cli@18.1.0 and @angular/material@18.1.0 in the below commands.

Also note the generated theme location will look like this: project/dist/project/browser/styles-xxxxxxxx.css.

All other steps are the same.

Important

2024.01 Angular versions

If you are using Fleio version 2024.01, you must use different Angular versions than those defined below. Use @angular/cli@17.0.7 and @angular/material@17.0.4 in the below commands.

Also note the generated theme location will look like this: project/dist/project/browser/styles-xxxxxxxx.css.

All other steps are the same.

Important

2023.09 Angular versions

If you are using Fleio version 2023.09, you must use different Angular versions than those defined below. Use @angular/cli@16.2.0 and @angular/material@16.2.0 in the below commands. All other steps are the same.

apt update
apt install npm
npm install -g @angular/cli@15.1.5
ng new demo --style=scss  # answer no to questions
cd demo
ng add @angular/material@15.1.5  # when asked for prebuilt theme choose CUSTOM then answer no to the next questions

Now, edit the demo/src/styles.scss file. Remove its contents if any.

This is how our template may look starting with 2024.08:

Template for 2024.08¶

Important

In Fleio version 2024.08 we upgraded to latest Angular version (v18).

Adapt this template if you’re using Fleio 2024.08.

@use '@angular/material' as mat;
$mat-demo-blue: (
  50: #e8eaf6,
  100: #c5cae9,
  200: #6294b8,
  300: #386d92,
  400: #144463,
  500: #083652,
  700: #083652,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: rgba(black, 0.87),
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: rgba(black, 0.87),
    A400: white,
    A700: white,
  )
);
$mat-demo-red: (
  50: #ffebee,
  100: #ffcdd2,
  200: #ef9a9a,
  300: #e57373,
  500: #ff3919,
  700: #ff3919,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: rgba(black, 0.87),
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: rgba(black, 0.87),
    A400: white,
    A700: white,
  )
);
$demo-primary: mat.m2-define-palette($mat-demo-blue, 500);
$demo-accent: mat.m2-define-palette($mat-demo-red, 500);
$demo-warn: mat.m2-define-palette(mat.$m2-red-palette, 500);
$demo-theme: mat.m2-define-light-theme((
  color: (
    primary: $demo-primary,
    accent: $demo-accent,
    warn: $demo-warn,
  )
));
.app-theme-demo {
  @include mat.all-component-themes($demo-theme);
  $demo-primary-color: #476190;
  $demo-accent-color: #ff3919;
  .notification-circle {
    background-color: $demo-accent-color !important;
  }
  .topbar-items-container > div,
  .mat-toolbar, .mat-toolbar .mat-icon,
  .mat-mdc-raised-button.mat-primary > span, .mat-mdc-fab mat-icon {
    color: #fff;
  }
  .sidenav-container, .sub-header {
    background: #f1f1f1;
  }
  .fl-card-fixed,
  .fl-card-fixed-md,
  .fl-card-fixed-sm {
    @include mat.elevation(2);
  }
  mat-icon {
    color: grey;
  }
  a[disabled] .mat-icon, button[disabled] .mat-icon {
    color: lightgrey;
  }
  .mat-mdc-button-base {
    text-transform: uppercase;
  }
  .active-link, .active-link mat-icon, .notification-text a, .message-body a, .ticket-message a:not(.timestamp-link) {
    color: $demo-primary-color !important;
  }
  .object-card-content {
    margin-left: 15px;
    font-size: 14px;
    line-height: 20px;
    word-break: break-all;
    color: #616161;
  }
  .fl-tag {
    background-color: #878787;
    color: white;
    padding: 2px 8px 2px 8px;
    border-radius: 2px;
    font-weight: normal;
  }
}

Note

The checkboxes’ checkmark will use a color in contrast with the theme primary color by default. If you want to override it, you can add the following rule in the above template:

.mdc-checkbox__checkmark {
    color: #fff !important;
}

Template for 2023.03¶

Important

In Fleio version 2023.03 we finished migrating components to MDC-based Angular Material components. Thus, theme files slightly differ from previous version.

Adapt this template if you’re using Fleio 2023.03. Themes generated using this template will not work with 2023.02 or older.

@use '@angular/material' as mat;
$mat-demo-blue: (
  50: #e8eaf6,
  100: #c5cae9,
  200: #6294b8,
  300: #386d92,
  400: #144463,
  500: #083652,
  700: #083652,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: rgba(black, 0.87),
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: rgba(black, 0.87),
    A400: white,
    A700: white,
  )
);
$mat-demo-red: (
  50: #ffebee,
  100: #ffcdd2,
  200: #ef9a9a,
  300: #e57373,
  500: #ff3919,
  700: #ff3919,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: rgba(black, 0.87),
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: rgba(black, 0.87),
    A400: white,
    A700: white,
  )
);
$demo-primary: mat.define-palette($mat-demo-blue, 500);
$demo-accent: mat.define-palette($mat-demo-red, 500);
$demo-warn: mat.define-palette(mat.$red-palette, 500);
$demo-theme: mat.define-light-theme((
  color: (
    primary: $demo-primary,
    accent: $demo-accent,
    warn: $demo-warn,
  )
));
.app-theme-demo {
  @include mat.all-component-themes($demo-theme);
  $demo-primary-color: #476190;
  $demo-accent-color: #ff3919;
  .notification-circle {
    background-color: $demo-accent-color !important;
  }
  .topbar-items-container > div,
  .mat-toolbar, .mat-toolbar .mat-icon,
  .mat-mdc-raised-button.mat-primary > span, .mat-mdc-fab mat-icon {
    color: #fff;
  }
  .sidenav-container, .sub-header {
    background: #f1f1f1;
  }
  .fl-card-fixed,
  .fl-card-fixed-md,
  .fl-card-fixed-sm {
    @include mat.elevation(2);
  }
  mat-icon {
    color: grey;
  }
  a[disabled] .mat-icon, button[disabled] .mat-icon {
    color: lightgrey;
  }
  .mat-mdc-button-base {
    text-transform: uppercase;
  }
  .active-link, .active-link mat-icon, .notification-text a, .message-body a, .ticket-message a:not(.timestamp-link) {
    color: $demo-primary-color !important;
  }
  .object-card-content {
    margin-left: 15px;
    font-size: 14px;
    line-height: 20px;
    word-break: break-all;
    color: #616161;
  }
  .fl-tag {
    background-color: #878787;
    color: white;
    padding: 2px 8px 2px 8px;
    border-radius: 2px;
    font-weight: normal;
  }
}

Note

The checkboxes’ checkmark will use a color in contrast with the theme primary color by default. If you want to override it, you can add the following rule in the above template:

.mdc-checkbox__checkmark {
    color: #fff !important;
}

Building the theme for 2024.08¶

It is enough to overwrite $demo-primary, $demo-accent, $demo-warn and $demo-primary-color variables in order to just change the primary/secondary colors. However, you can dig further and edit the styling, positioning, etc. of any element of the app.

You can also make use of some already defined color palettes (e.g.: mat.$m2-blue-palette starting with Angular 18 or mat.$blue-palette on older versions) from Angular Material which can be found in node_modules/@angular/material/core/m2/_palette.scss starting with Angular 18 or node_modules/@angular/material/core/theming/_palette.scss on older versions.

For additional information, you can read: Angular Material theming guide, Sass/scss basics.

Once all changes are done we need to generate the .css file:

ng build

Now locate the demo/dist/demo/styles.xxxxxxx.css file (prior to angular v. 17) or demo/dist/demo/browser/styles-xxxxxxxx.css file (starting with angular v. 17), rename it to demo.css (use your theme name instead of default name, very important) and add the theme to your installation following this guide: Adding new themes in Docker install.

After that include the theme in the available themes list by editing panels configuration files and updating the “availableThemes” setting like described here: Configure which themes show up in my profile.

...
"settings": {
    ...
    "availableThemes": ["demo"],
    ...

Notice we removed “spring” from the availableThemes default array. In this case, we’ll need to also change the app default theme using the defaultTheme property:

...
"settings": {
    ...
    "defaultTheme": "demo",
    ...

Now users will have another default theme and they can change it from their user’s profile page, if any other themes are available.

Adding new themes in Docker install¶

First, you need to generate the theme .css file as in the above docs.

After that, you’ll need to change the index.html file for each panel you want and to and include the customized .css file. To do so, read the following guide: Adding or changing files in Fleio Docker images.

Here are a few notes:

The css theme file should be copied like this (do so for every panel):

COPY theme_name.css "$INSTALL_PATH/frontend/staff/assets/themes/theme_name.css"
COPY theme_name.css "$INSTALL_PATH/frontend/enduser/assets/themes/theme_name.css"

Also, the sed command from the Dockerfile should look like this (do so for every panel):

RUN sed -i \
's^</head>^<link rel="stylesheet" type="text/css" \
href="assets/themes/theme_name.css" \ media="screen"/></head>^' \
"$INSTALL_PATH/frontend/staff/index.html"

RUN sed -i \
's^</head>^<link rel="stylesheet" type="text/css" \
href="assets/themes/theme_name.css" \ media="screen"/></head>^' \
"$INSTALL_PATH/frontend/enduser/index.html"

Remember to update the availableThemes setting from angular configs as described in the previous section by using the following commands (do so for every panel):

fleio edit staff.config.json
fleio edit enduser.config.json

How to change the logo in Docker install¶

Follow this guide to change the logo in Fleio panels: How to change the logo.

Adding custom javascript¶

Follow this guide to add custom javascript in Fleio panels, or to customize request headers: Adding custom JavaScript code.

Documentation

Navigation

Related Topics

Frontend customization¶

Adding new themes¶

Template for 2024.08¶

Template for 2023.03¶

Building the theme for 2024.08¶

Adding new themes in Docker install¶

How to change the logo in Docker install¶

Adding custom javascript¶

Frontend customization¶

Adding new themes¶

Template for 2024.08¶

Template for 2023.03¶

Building the theme for 2024.08¶

Adding new themes in Docker install¶

How to change the logo in Docker install¶

Adding custom javascript¶

Join our mailing list to stay up to date on Fleio development, discounts, OpenStack tutorials and OpenStack news.