Manage logos and colors

Starting from 2023.3.0, Starter kit provides a user interface for managing logos and colors. It is now possible to change the logos/pictures and the colors used on portal.

Configuration capabilities

The interface accessible from /wedia-config/ui/appearance/logos-and-colors, allow you to configure :

  • Logos :

    • One logo for the Portal (Header)

    • One logo for the Portal (login Page), also used for the email notifications

    • One logo for the Backoffice (Header)

    • One logo for the Portal (homepage) and Backoffice (login page)

  • Favicon

  • Colors :

    • Main color

    • Secondary color

 

Please note that these colors and logos are now automatically displayed in the email notifications sent by the platform.

Colors

Under the “Appearance” and “Logos & Colors” menu two inputs allow for changing colors.

Simply enter the hexadecimal color codes for the main and secondary colors, and save the changes. The colors will automatically apply to the portal and the notification emails sent by the platform. It may be necessary to clear the browser cache to see the changes.

Logos

Under the new “Appearance” > “ Logos and colors” menu, four inputs allow for changing the logos.

There are some rules to be followed for the uploaded files. They are always specified for each logo by the 'Authorized formats' information on the view.

After filling in the 4 logos, save to apply the changes, which will then be directly visible on the portal and in the backoffice.

 

For developpers

For the logos and the favicon the behaviour is the same as if the change has been made from the old admin : we write values for i18n keys of bov3/wcm

The written values are paths to the files under the san : san/bov3/css/v11/customerupload/filename.ext

Advanced configuration

Activate the color switch for Starter kit projects older than 2023.3

To enable the color switch feature we have to :

  • Add a new parameter inside the used wediaportalrc configuration and set it to true => "useServerStyles": true,

"environments": { "starter-kit": { "": { "useServerStyles": true, "useServerConfigResolution": true, "deploy_server": "https://starter-kit.wedia-group.com", "vue_app_config_path": "portal", "appConfigs": { "portal": "starter-kit", "wediaConfig": "__wedia_config", "portal@picker": "starter-kit@$starter-kit-picker", "portal@picker@office": "starter-kit@$starter-kit-picker@office", "portal@picker@office@outlook": "starter-kit@$starter-kit-picker@office@outlook", "_postProcessors": [ [ "", "starter-kit-mobile" ] ] } }, "development": { "vue_app_api_path": "https://starter-kit.wedia-group.com" } } }
  • set jspMode to true

The above-mentioned conditions are also used to enable the favicon switch. The favicon changes can be done from wedia-config “Appearance” / “Logos & Colors”, but will only be effective if the conditions are fulfilled.

The colors switch is allowed by endpoints added with PACKAGED_Appearance_Config. Therefore to use this new feature the plugin must be activated

Customize or add email notifications

If you need to customize email notifications (beyond the logo and colors) or create new notification templates for your project, please refer to the following documentation : Email templates & customization