1. Haiilo Support Center
  2. Administration
  3. Additional platform settings

Creating themes

In Haiilo, you can adapt the design to follow your corporate design (CD) and brand guidelines. This helps your users feel at home right away.

Basics

For each created theme, you can adjust the colors and logos in Administration > Themes. If you have the necessary know-how, you can also make advanced adjustments via CSS.

Screenshot_2023-04-12_at_17.29.33.png

In addition, you also have the option to create further themes via Add theme. This way, you can configure different designs for different target groups, for example, for subsidiaries.

Each Haiilo comes with a default theme that is displayed to each user if they have not yet registered. This design can be changed but not deleted.

Colors

An essential element to make your Haiilo interface more lively is to adjust the colors. You use hexadecimal values to precisely define which colors should be used in the interface (e.g., #FF0000). Below you can see an example of where the colors are used on a homepage:

colors.png

  • Primary color: The primary color defines the font color in the sub-navigation bar for homepages. It also defines the background color for the login page.
  • Navigation bottom border: Adds a color accent below the main navigation. A contrasting color is an option to create a clear distinction from the main navigation.
  • Navigation bar background: 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 the color of the text and icons in the navigation bar. We recommend choosing a color that contrasts with the background of the navigation bar (e.g., white background with black text or dark blue background with white text).
  • Navigation active: The color that the navigation bar should be if actively selected, i.e., where the user is currently located. If this behavior is not desired, simply use the same color as for the Navigation bar background.
  • Gradient color: The gradient color defines into which other color the background color on the login page should gradient
  • Main button background: The background color for fixed buttons in the interface, e.g., Create page, Save.
  • Main button text: The text color for fixed buttons in the interface.
  • Link color: The color for hyperlinks in the interface.
  • Text color: The color of all text, excluding elements where the text color can be separately edited, e.g., in the rich text editor widget.

Logos

In the second tab of the theme settings, you can upload your logo.

Screenshot_2023-04-12_at_17.29.45.png

The following options are available in Haiilo:

  • The front logo is displayed on the login screen and should be at least 80px high.
  • The navigation bar logo is always at the top left of the navigation and should be at least 100px high.
  • The favicon is typically displayed in the browser address bar, the browser tab, bookmarks, and to the left of the URL. The image should be 16x16px and in file format .ico.
  • The iOS homescreen icon appears as an icon when you save the URL of your Haiilo on the homescreen of your iPhone, and it should be at least 180x180px in size.

Advanced

In the third section of the design settings, you can make CSS adjustments. For example, via CSS, you can change the font, set additional background colors (or images), and much more.

Screenshot_2023-04-12_at_17.29.51.png

Any customizations should be chosen wisely, as they may have an impact on updates. For this part of the design customizations, we recommend sound CSS knowledge.

If changes have been made in this area and turn out to be incorrect, then this correction does not fall under Haiilo's regular support services. If you need assistance with CSS customizations, we recommend that you consult experienced consultants in this area.

Custom CSS may not be available for certain areas of Haiilo as we reserve the right to limit its use for optimal platform functionality.

Was this article helpful?