Why

With Custom CSS, you can style your heyflow beyond the many design settings that Heyflow provides out-of-the-box.

Where

You can find the Custom CSS in the Code tab on the left-hand side in the Build section of your Heyflow.

How

Technically, any CSS you include in the Custom CSS section will be included in your heyflow's source code.

Example 1: Background color

Let's assume you want to change the heyflow's background color. For that, you can simply use the write standard CSS (we're implementing a gradient here):

body {
background: linear-gradient(162deg, rgba(200,199,221,1) 0%, rgba(148,148,255,1) 35%, rgba(0,212,255,1) 100%);
}

Remember to click Save CSS.

Example 2: Style specific element

With Custom CSS, you can also style specific HTML elements in your Heyflow.

Disclaimer: We cannot guarantee that the HTML structure of your heyflows is stable. When we update Heyflow to improve it, we might also have to change parts of the HTML structure so your Custom CSS is never 100% reliable when you republish a heyflow. However, you can consider it stable for each published version: the HTML will not change when you don't republish.

Having said that, this is how it would work:

First, you need an identifier, such as an ID or class. Each block has an ID, e.g. text-block-headline-f6a338f1. You can look that ID up in the Elements panel of your Developer Tools. Right-click an element in the preview and click Inspect (we're using Chrome here). This will open your Developer Tools in the Elements Tab. Find a suitable identifier and copy that.

In the CSS code panel, define your CSS and click Save CSS. Here, we're overwriting the font-family of the h2 in a headline block to 'Courier'.

Less

In the current Heyflow version, we're working with Less. You can also use the less dialect in the Custom CSS.

Did this answer your question?