Skip to content

Customization

Jump to bottom
Samuel Weirich edited this page Aug 11, 2022 · 15 revisions

v2

Currently in development

General info

Currently it is possible to adjust the images and locales of the application. After adding the customized files the following command must be run to rebuild the application and apply the customizations:

npm run ENVIRONMENT (e.g. dev or prod)

The folders for the customization files are ignored by git and doesn't gets overwritten by pulling a new release.

Images

To customize the images of the applications (e.g. logo) put the custom image with same name as the original image under the path resources/custom/images.

Locales

To customize the locales put a JavaScript file in the following folder resources/custom/js/lang which makes the wanted adjustments, for example:

import i18n from '../../../js/i18n'

i18n.mergeLocaleMessage('en', {
  auth: {
    ldap: {
      usernameHelp: 'Test',
    }
  }
})

It is also possible to adjust the available locales that can be selected by the user by setting the environment variable MIX_AVAILABLE_LOCALES in your .env file. By default all locales for which a localization file exists can be selected.

Custom theme

  1. Copy the content of resources/sass/theme/default to resources/sass/theme/custom
  2. Adjust values in _variables.scss.
  3. Change the MIX_THEME option in the .env file to 'custom'.
  4. Recompile the frontend with: npm run ENVIRONMENT (e.g. dev or prod)

Colors

Not all colors are set via sass styles. Some vue components need the hex color values. To customize the colors of the room usage history chart and the color of the embedded color pickers in the admin UI, change the options in the .env file and recompile the frontend (see above)

# Color of the room history chart
MIX_HISTORY_PARTICIPANT_COLOR='#c0392b'
MIX_HISTORY_VOICES_COLOR='#2980b9'
MIX_HISTORY_VIDEOS_COLOR='#27ae60'
# Colors for color pickers (room type and application banner)
MIX_ROOM_TYPE_COLORS='["#16a085", "#27ae60", "#2980b9", "#8e44ad", "#f39c12", "#d35400", "#c0392b", "#2c3e50"]'
MIX_HISTORY_ROOM_TYPE_COLORS='["#16a085", "#27ae60", "#2980b9", "#8e44ad", "#f39c12", "#d35400", "#c0392b", "#2c3e50"]'
MIX_HISTORY_ROOM_TYPE_COLORS='["#ffffff", "#000000"]'

v1

General info

Currently it is possible to adjust the images and locales of the application. After adding the customized files the following command must be run to rebuild the application and apply the customizations:

npm run ENVIRONMENT (e.g. dev or prod)

The folders for the customization files are ignored by git and doesn't gets overwritten by pulling a new release.

Images

To customize the images of the applications (e.g. logo) put the custom image with same name as the original image under the path resources/custom/images.

Locales

To customize the locales put a JavaScript file in the following folder resources/custom/js/lang which makes the wanted adjustments, for example:

import i18n from '../../i18n'

i18n.mergeLocaleMessage('en', {
  auth: {
    ldap: {
      usernameHelp: 'Test',
    }
  }
})

It is also possible to adjust the available locales that can be selected by the user by setting the environment variable MIX_AVAILABLE_LOCALES in your .env file. By default all locales for which a localization file exists can be selected.

Clone this wiki locally