Tags:
• Creator

In this article

1. Styling your Dashboards with CSS
   • Inline styles (Individual elements)
   • Container Styling (Multiple Containers)
     • Add an HTML<style> tag
     • Page-Level Styling
   • Custom CSS File (Site-Wide Styling)
2. CSS Rules and Customization
   • CSS Priority Rules in Harmoni
   • Styling Links
   • Styling Images
3. Managing Assets and Fonts
   • Assets
   • Fonts

1. Styling your Dashboard with CSS

The text container includes an HTML editor that offers great design flexibility with a combination of HTML and CSS (Cascading Style Sheets). With CSS styling, you can customize the look of your dashboard to control aspects like colors, fonts, layout, and responsiveness. You can learn more about CSS here.

There are several ways to customize your Harmoni dashboard CSS:

• Add inline CSS to specific HTML elements.
• Use the <style> tag in the head to define CSS rules for multiple containers.
• Create a separate Custom CSS file to affect all dashboard pages.

Inline Styles (Individual Elements)

To style a single HTML element, you can use the style attribute for inline CSS. This approach allows you to override other styles from in-container CSS or a Custom CSS file when needed.

Add inline styles:

1. Insert the style attribute in the desired HTML element.
2. Within double quotes, include CSS property-value pairs separated by semicolons.

For example:

We can change the font size, spacing, and color.

• Open the HTML editor in your text container
• Add style attribute to the element
• Insert all inline CSS
• Save

Container Styling (Multiple Containers)

A style can be defined in one container, and used in another. You can create classes or IDs and include a CSS <styles> block at the start of your HTML code. This approach supports complex CSS and external resources like Google Fonts or background images.

Add an HTML<style> tag

1. Add unique class names or ID names to the HTML elements you want to style.
2. Add the <style> block in at the top of your HTML code.
3. Use CSS selectors to target elements and place the rules inside the <style> tags.

For example:

• Click Edit Html to open the editor
• Define a class attribute for the HTML element
• Create a <style> tag and add the CSS rules
• Save

Page-Level Styling 

When you use the same Id or class name in different containers, all HTML elements with that name will share the same styles, regardless of their location. This can be quite useful if you want to apply the same styles to several containers on the same page.

For example, in one container with the following style:

To apply the same style in another container, use the class or ID name:

• Create a style tag in one of the containers
• Use the same class name to all text containers
• Items sharing a class name have same CSS styles

Custom CSS File (Site-wide Styling)

To maintain a consistent look for your site, including elements like font, color, and a specific template that aligns with your corporate identity for your dashboard, you can create a Custom.css file.

The Custom.css is an external style sheet that applies CSS styling globally to your entire site, and can be used by all the different dashboard pages. 

Add styles across multiple dashboards:

1. Create a file named custom.css
2. Add your CSS rules within this file
3. Contact Harmoni Support to upload your custom.css
   This is also a great time to upload any additional dashboard assets, e.g., images, logos, etc.
4. After uploading, style your HTML elements by adding the right class names or IDs in the HTML editor in each text container

• Once the Custom.css is loaded, use the HTML editor to apply styles
• Add the defined class name from the CSS style sheet
• All containers with the same class share the CSS style

2. CSS Rules and Customization

CSS Priority Rules in Harmoni

When multiple styles are specified for the same HTML element, they "cascade" according to these priority rules, with the first having the highest priority:

1. In-line styles (highest priority)
2. In-file/In-container styles
3. Custom CSS file
4. Default Harmoni CSS (lowest priority)

Styling Links

Harmoni automatically assigns the container to a default class name .e-richtexteditor .e-rte-content .e-content. If you want to customize link styles, select both the default class and your custom class, along with the a tag in your CSS.

For example:

Styling Images

Harmoni automatically assigns images to a default class name e-rte-image e-imginline. To apply custom styles, define a new class and reference it in your image tag's class attribute. 

For example:

3. Managing Assets and Fonts

Assets

While you can use the Image or Embed containers to personalize your dashboard and add information, you need to use the HTML editor in the text container to add some extra styling.

Images and documents need to be uploaded to Harmoni's hosting platform first. Please get in touch with support@infotools.com for more information.

• Supported image formats include .jpg, .png, .svg, and .gif
• Animated GIF (when exported to PowerPoint, only the first frame displays)

Fonts

Harmoni supports system fonts by default. These include Arial, Courier New, Georgia, Impact, Lucida Console, Tahoma, Times New Roman, Trebuchet MS, and Verdana.

To use custom fonts, add your font files (.woff and .woff2) to assets or link fonts from sources like Google Fonts. Edit the Custom.css file or use the <style> tag in the Text Container.

Here is an example of how to create inline CSS with web fonts using Text Containter, which works similarly to adding them to the Custom.css file:

Where to from here?

Learn more about Harmoni:

• Display Media Items in Dashboards
• Dashboard Design