Brand & identity

design
Change text and visual appearance to better represent the brand and identity of the site owner.

The UNICEF Inventory theme includes several options to change text and visual appearance of the site. These options allow for greater customization of the Hugo theme for different brands and identities. This is done so that the UNICEF Inventory theme can be used in many different contexts as a knowledge management tool.

A UNICEF Inventory site can also use a logo in the site navigation. See an excerpt from the config.yaml file of the example site:

1# --- custom settings ---
2
3params:
4  # Shown on all pages. When logo is empty, it will show your site title, set above.
5  logo: "https://example.org/static/some-logo.png"  # hosted externally
6  # …or…
7  logo: "/inventory-hugo-theme/images/favicon.png"  # hosted internally

The logo size will adapt horizontally automatically. Manual vertical scaling may be needed to properly fit logos in a portrait orientation.

2. Favicon 🔗

In order to use a custom favicon, the favicon file must be committed to a specific path in the Hugo site. Additionally, the favicon must be a PNG file. Save the favicon in the repository to /static/images/favicon.png.

3. Default colors 🔗

The UNICEF Inventory theme supports custom colors. The colors are set in the site config. Note that the default colors in the example site align with UNICEF brand and identity guidelines.

See an excerpt from the config.yaml file of the example site:

 1# --- custom settings ---
 2
 3params:
 4  # customize color
 5  primary_color: "#1CABE2"
 6  primary_color_light: "#1b66b1"
 7  body_color: "#f2f4f6"
 8  text_color: "#636363"
 9  text_color_dark: "#374ea2"
10  text_title_color: "#ffffff"
11  white_color: "#ffffff"
12  light_color: "#f8f9fa"

4. Font 🔗

The font family used across the theme is managed in the site config. The Google Font API is used for retrieving fonts. The font family name used in the site config must be an exact match of the font name in the API.

1# --- custom settings ---
2
3params:
4  # font family (choose from https://fonts.google.com/)
5  font_family: "Lato"

Updated on 03 Oct 2022