Skip to content

Customization

Jump to bottom
Samuel Weirich edited this page Feb 5, 2024 · 15 revisions

v2/v3

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

Custom locales are now php files in the resources/custom/lang folder. Each locale has its own subdirectory named after the locale code (e.g. en). Within the directory you can create files with the group name (part before the first dot in the translation string) as filename. For example, the string auth.ldap.username_help would be stored in the file auth.php.

Within the file, the keys are organized in nested php arrays. Example for a custom german locale (resources/custom/lang/de/auth.php):

<?php

return [
    'ldap' =>  [
        'username_help' => 'Test'
    ]
];

To customize the date time format and the display name of a locale create a json file metadata.json in the locales directory.

{
    "name": "German",
    "dateTimeFormat":  {
        "dateShort": { 
            "year": "numeric",
            "month": "2-digit",
            "day": "2-digit" 
        },
        "dateLong": {
            "year": "numeric",
            "month": "short",
            "day": "2-digit"
        },
        "time": {
            "hour": "2-digit",
            "minute": "2-digit",
            "hour12": false
        },
        "datetimeShort": {
            "year": "numeric",
            "month": "2-digit",
            "day": "2-digit",
            "hour": "2-digit",
            "minute": "2-digit",
            "hour12": false
        },
        "datetimeLong": {
            "year": "numeric",
            "month": "short",
            "day": "2-digit",
            "hour": "2-digit",
            "minute": "2-digit",
            "hour12": false
        }
      }

}

New locales

To add custom locales that are not part of the core, add them to the resources/custom/lang directory as well. You need to create all php files and metadata.json file. To enable the new locale, you need to add it to the ENABLED_LOCALES .env option and rebuild the frontend.

Locale caching

For better performance, locales should be cached with php artisan locales:cache or, if you use sail: sail artisan locales:cache. If you use the Docker Contrainer, the locales are automatically cached in production when the container is started.

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