Your digital home is the first point of contact in the morning to gain important information and interact with colleagues. It is thus important to customize the theme of your digital home according to your corporate design (CD) and coordinate it to suit your needs. This helps your users to feel at home straight away. We’ll show you what, where and how you can customize the theme.
And if, in addition to your desktop environment, you also want to apply your own theme to the Haiilo app, you can find out how to do this in the article on white labeling.
What can you customize?
Where can you customize the theme?
You require certain permissions for this (access to Administration + "Manage themes").
The default theme
During the initial installation, a theme is provided by Haiilo. This theme can be changed but not deleted. The default theme is the theme that is displayed in your Haiilo app.
How can you make customizations?
An essential element in making your Haiilo interface more "homely" is customizing the color scheme of the navigation bar. If you change the color values, the appearance of your navigation changes.
In Haiilo, you can user hexadecimal values to precisely define which colors should be used in the interface (e.g. #FF0000). It is not currently possible to also control the sub-navigation bar for homepages here. However, you have the option – with corresponding expertise – of implementing your preferred changes via CSS (see 3. CSS).
A "color picker plugin" is available for many browsers. For instance, Chrome offers this kind of add-on with "ColorZilla", which can be used to ascertain any color value (e.g. of your website) using a pipette. You can use these color values (hexadecimal) directly for your digital home!
The following color values are important for the navigation bar:
- Primary color:
The main color also defines the font color in the sub-navigation bar for homepages.
- Navigation bottom border:
The area is a color accent below the main navigation. A contrasting color is an option here to create a clear distinction from the main navigation.
- Navigation bar background:
Here you can specify the main color of the bar. If you use a light color here, you should choose a darker font color.
- Navigation bar text:
This part determines in what color the text and icons should be shown on the navigation bar. We recommend choosing a color that contrasts as far as possible with the background of the navigation bar (e.g. white background with black text or dark blue background with white text).
- Navigation active:
Here you can set what color the part of the navigation bar should be that is actively selected or where the user is currently located. If this behavior is not desired, simply select the same color value as for the "Background of the navigation".
Here you can see the default values in Haiilo. We have marked the parts that are relevant to the navigation.
In the second area of the theme settings, you can upload your logo. The following options are available in Haiilo:
- The "Front logo" is displayed on the login screen and cannot be wider than the format of the login screen.
- The "Navigation bar logo" can always be found at the top left in the navigation and should be at least 100 pixels high.
- The "Favicon" is typically displayed in the address bar of the web browser, to the left of the URL, in the browser tab and in bookmarks. The format is 1:1.
- The "iOS homescreen icon" can be found on the user’s iPhone. It appears there in the favorites list or as a homescreen link if you save the URL of your digital home. The format should be 180*180 px.
In the third area of the theme settings, you can make CSS customizations. Using CSS, you can, for instance, change the font, set additional background colors (or pictures), and much more.
Any customizations should be chosen with care as they can have effects on updates. For this part of the theme customizations, we recommend in-depth CSS knowledge.
Frequently asked questions:
How can you locate CSS codes in Haiilo?
- Right click anywhere in Haiilo
- The context menu opens: Select "Inspect" in the menu.
- Once you are in "Inspect" mode, a further row or column opens (depending on the display settings in your browser).
- In the "Elements" tab, you can see a HTML code and a CSS code.
- To find out how a certain element can be addressed, select the mouse symbol and move the mouse over the element that you want to address.
- Now click the mouse once. In our example, the size of the logo in the navigation is of interest.
- In the "Styles" tab, you can see the CSS code for this element and the name of the class that must be addressed.
- You can now use this class to customize the desired element.
Please note that the use of ad blockers can cause a malfunction in web-based applications.