Work in Progress: How to Use Custom Selectors

You will find most of what you need as an option to select in the Design Tab. But for some very specific cases, you'll need to find the class of the component you want to style and add it as a Custom Selector.

Step 1: Enable Custom Selectors

• Select the Entire Flow by going to the Layers Tab on the left Sidebar, then to the "All" Tab, and finally clicking on "Entire Flow"

• On the Options Tab on the Right Sidebar, check the "Enable Custom Selectors" box

Step 2: Add the Selector

• Turn on the "Show Custom Selectors" Toggle. You'll find it in the Design Tab of the Right Sidebar. For it to show, you need to select for example "whole thing" of a component (anything selected will do, but it won't show if no component is selected)

• Type or paste the selector in the input field and press Enter.

If the selector is the class of an HTML tag (for example big-button), remember to add a dot in front of it (.big-button). If it's just a specific tag (like ul or li) you don't need the dot, but it will apply to the whole flow.

Step 3: Add the Styles

• After creating the custom selector, try setting some very obvious styles, to confirm that's the selector you need.

• If you delete all styles on that selector, it will disappear and you'll have to create it again.