You can adapt the design of the platform to your corporate branding and guidelines to create a unique and welcoming space for your users. You can also create multiple themes to configure different designs for various target groups or introduce seasonal themes such as Easter or Halloween.
Every platform comes with a default theme that is displayed to users who haven't yet registered, e.g., on the login page. The default theme is also used for your email notifications. This design can be edited but not deleted.
Create a theme
You need "Manage themes" permission to manage themes.
- Go to Administration > Themes
- To create a new theme, select Add theme
- Enter a name for your theme. For example, "Haiilo Basic" for a standard theme or "Easter" for a seasonal theme.
- Check to activate the theme.
- Choose the users and groups to which the theme is assigned. We recommend first assigning the theme to yourself so you can preview the theme before making it live for users.
- Define colors, logos, and, optionally, add custom CSS.
- Select Save to create the theme
If a user has multiple themes assigned to them, the list of themes is read from the top, and the first theme in the list that the user is assigned to is displayed for them. You can rearrange themes by dragging and dropping them.
Adjust colors
You can define the color of elements on your platform in hexadecimal values (HEX) (e.g., #FF0000).
- Primary color: The primary color defines the background color for the login page and digital signage page, and smaller design elements such as kudos theme backgrounds.
- Navigation bottom border: The color of a divider under the Administration heading in the Administration. Also, the color of a divider under the email header.
- Navigation bar background: The main color of the navigation bar. If you use a lighter color here, you should choose a darker font color. Also, the color of the email header.
- Main button text: The text color for fixed buttons on the platform and in emails.
- Main background: The background color of the platform and emails.
- Link color: The color for hyperlinks on the platform and in emails. Also, a lightened version of this color is used for the Like reaction.
- Gradient color: The gradient color defines into which other color the background color on the login page should gradient.
- Navigation bar text: The color of text in the navigation bar. We recommend choosing a color that contrasts with the background of the navigation bar (e.g., a white background with black text or a dark blue background with white text).
- Navigation active: The color of an active menu item in the navigation bar and Administration, i.e., where the user is currently located.
- Main button background: The background color for fixed buttons on the platform and in emails, e.g., Create page, Save. Also, defines the color for the Primary style in certain widgets.
- Text color: The color of all text on the platform and in emails, excluding elements where the text color can be separately edited, e.g., in the rich text editor widget.
Upload logos
You can upload your logo(s) to display on the platform and in the browser. The following options are available:
- Front logo: The front logo is displayed on the login screen and should be at least 80px high. It can be in the .png or .jpg file format.
- Navigation bar logo: The navigation bar logo is always at the top left of the navigation and should be at least 100px high. To ensure the best image quality, we recommend utilizing the .svg file format.
- Favicon: 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 the .ico file format.
- iOS homescreen icon: The iOS home screen icon appears as an icon when you add/bookmark the URL of your platform to the home screen of your iPhone, and it should be at least 180x180px in size.
Customize with CSS
You can make custom adjustments to areas and elements on the platform using CSS. For example, via CSS, you can change the font, set additional background colors (or images), and much more. For any design customizations, we recommend asking a developer or someone with in-depth knowledge of CSS to assist you.
When making customizations, it is crucial to exercise caution as they can affect the functionalities of the platform. Therefore, we may not allow the use of custom CSS in certain areas of the platform to ensure optimal platform functionality.
If you make CSS changes that cause issues in your platform, Haiilo's Service Desk cannot correct them.