How do I customize the application icon and the logo?

[jboekesteijn]

We have received questions about customization of your application icon and logo. This is what you can customize:

Login screen

You can choose a favicon.ico for the tab icon and a logo.png that will be shown as header. This is instance data for a session-manager system.

Application screen

You can choose a favicon.ico for the tab icon and a logo-sideways.png that will be shown in the sidebar. This is instance data for a auto-webclient system.

In all cases, these files should be placed in the appropriate system directory in your deployment directory structure. An example for the online IDE project:

Please make sure to follow this structure with the exact filenames, otherwise they will not be recognized:

systems
\ client
  \ instance
    - favicon.ico <-- app screen tab icon
    - logo-sideways.png <-- app screen sidebar logo
\ sessions
  \ instance
    - favicon.ico <-- login screen tab icon
    - logo.png <-- login screen header logo

[Martinique]

For a hobby project I am trying to change the Icon. As you can see, the favicon.ico is different from the Kjerner logo, however, when deploying with from migration, it does not show up.

Is there anything I am missing?

Thank you!

[jboekesteijn]

You can use the locally provided custom icon by changing the deployment.alan file.

In the default online IDE structure, there are two deployment.alan files:

- deployments/default/deployment.alan
- deployments/migrate/deployment.alan

The first one is used for new deployments without migrating existing application data. The second one is used for deployment with migration.

Both files specify how the data for the client system should be provided during deployment.

In deployments/default/deployment.alan:

systems
	'client'
		configuration: 'default'
			'timezone' = "Europe/Amsterdam"
		instance-data: local

In deployments/migrate/deployment.alan:

systems
	'client'
		configuration: 'default'
			'timezone' = "Europe/Amsterdam"
		instance-data: from 'server'/"ide-YOURNAME"/"client"

The last line with the instance-data specifies the source of the data for the client system, which includes the favicon.ico file.

• instance-data: local means: use the provided data/files from the local directory in the (online IDE) project.
• instance-data: from ... means: use the data from an existing system in the active version of the application.

So if you want to use your locally provided favicon.ico during deployments with migration, you should use instance-data: local for the client system in your deployments/migrate/deployment.alan file.

[Martinique]

application-servers
	'server': local

external-systems

systems
	'client'
		configuration: 'default'
			'timezone' = "Asia/Bangkok"
		instance-data: local

	'sessions'
		configuration: custom
			'token interval'               = 86400 // 1 day
			'token limit'                  = 2592000 // ~1 month (30 days)
			'domain name'                  = none
			'base uri'                     = "https://app.alan-platform.com/myide/auth/"
			'known uris'                   = (
				'https://app.alan-platform.com/myide/client/' = "Client"
			)
			'openid authority issuer uris' = ( )
			'openid authority client ids'  = ( )
		instance-data: local

	'server'
		configuration: 'multi-core'
		instance-data: from 'server'/"myide"/"server" @migrate
		schedule: every day every hour
			at 0
			at 30

	'mobile'
		configuration: 'default'
			'timezone' = "Asia/Bangkok"
		instance-data: local

Thank you Joost-Wim!

Still not having the result intended. What should I improve further within my IDE?

[jboekesteijn]

This turned out to have been a browser caching issue after further investigation. So for anyone who does not see their new/updated icons, please check in another browser and/or a private window.

[Martinique]

Thank you for the clear explanation!

Would it also be possible to set colours by default when deploying Alan?

[pvandam]

You can change the colors in the settings.alan of the client system. See the documentation and search for “custom color theme”.
Please note that this will soon change in future versions. We’ve implemented a dynamic color scheme based on some base colors. Preview:

[Martinique]

Good morning!

Considering yar.20, is it still possible to pre-set custom colours on deployment?

Currently our ERP, in yar.15, uses custom colours based on our company colour palette. I would like these colours to be maintained for all users when updating to yar.20, if possible.

Thank you!

[pvandam]

Hi Martinique,

You can still set custom colors, but it works a little different than the previous version. Instead of settings colors in settins.alan, you have to add a section in annotations.alan.

To maintain good contrast throughout the application you can only choose base color from where a color palette is derived.

Example:

global-features: (
feature ‘layout’ = (
‘density’ = ‘comfortable’ ( )
‘custom colors’ = ‘yes’ (
‘primary color’ = “#F26C50”
‘secondary color’ = “#F2A550”
‘tertiary color’ = “#F2BC50”
‘error color’ = “#F25050”
‘neutral color’ = “#F26C50”
‘neutral variant color’ = “#F26C50”
)
)
)

You can also change the colors per browser in the UI settings to try them out:

KR, Paul