Skip to content

Customization

Jump to bottom
Samuel Weirich edited this page Mar 10, 2023 · 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 (logo and favicon) put the custom images under the path public/images/custom. Next adjust your .env file to the the new path, e.g. DEFAULT_LOGO=/images/custom/logo.svg.

Note: If you have already startet the application (no fresh database), the logo and favicon path must be changed in the admin UI.

Locales

To customize the locales put a json file in the folder resources/custom/lang which makes the wanted adjustments, for example: de.json

{
  "auth.ldap.username_help": "Test"
}

It is also possible to adjust the available locales that can be selected by the user by setting the environment variable VITE_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 VITE_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
VITE_HISTORY_PARTICIPANT_COLOR='#c0392b'
VITE_HISTORY_VOICES_COLOR='#2980b9'
VITE_HISTORY_VIDEOS_COLOR='#27ae60'
# Colors for color pickers (room type and application banner)
VITE_ROOM_TYPE_COLORS='["#16a085", "#27ae60", "#2980b9", "#8e44ad", "#f39c12", "#d35400", "#c0392b", "#2c3e50"]'
VITE_HISTORY_ROOM_TYPE_COLORS='["#16a085", "#27ae60", "#2980b9", "#8e44ad", "#f39c12", "#d35400", "#c0392b", "#2c3e50"]'
VITE_HISTORY_ROOM_TYPE_COLORS='["#ffffff", "#000000"]'

Welcome page and footer

To override the welcome page, feature component and footer you need to copy the file from resources/js/ to resources/custom/js/.

Example custom welcome page

  1. Copy the file from resources/js/views/Home.vue to resources/custom/js/views/Home.vue
  2. Change the file content
  3. Recompile the frontend with: npm run ENVIRONMENT (e.g. dev or build)

Note: The highlighted path and filename needs to stay the same.

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