With Custom CSS (Cascading Style Sheets), you can individually style your heyflow beyond the many design settings that Heyflow provides out-of-the-box.
Technically, any CSS you include in the Custom CSS section will be included in your heyflow's source code. In the current Heyflow version, we're working with Less. You can also use the less dialect in the Custom CSS.
You can find the Custom CSS in the Code tab on the left-hand side in the Build section of your Heyflow.
Examples
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
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.
With Custom CSS, you can also style specific HTML elements in your Heyflow. 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'.
