Customize Styles

Using Webfonts

Based on the @import statement you can use external hosted Webfonts with OpenFlower. In the Workspace CSS or App CSS editor, you can add Font Family Import Statements

@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');

Based on the Text-Property "Font Family" you can then activate this Font Family in your Apps at many components.

You can use the interactive Demo to see the Steps based on the Component "Divider"

Customize Component Styles with CSS

With CSS you can further customize the Design of Components. You can use the same CSS Editor for every app or on the Workspace for all apps.

To set CSS Styles for all apps in a Workspace, use the Editors in the Advanced Settings.

OpenFlower Allows you to define Styles at "global Level". That means, you also can customize the style of the Admin Area and the Editor.

To limit the effect of a customized Styling to your Apps only, you can use the prefix class "root-container" in your selectors.

// Use the prefix-class in your Selectors to limit the customized CSS to your Apps only.

// will have an effect for all Buttons of OpenFlower (Editor + Apps)
.button1 {
    border-radius: 50px;
}

// will have an effect for all Buttons of your OpenFlower Apps only
.root-container .button1 {
    border-radius: 50px;
}

// from version v2.3.2 on this class get a new name
// will have an effect for all Buttons of your OpenFlower Apps only
.lowcoder-app-canvas .button {
    border-radius: 50px;
}

Each OpenFlower Component has a root element with the CSS class name "lowcoder-<component-type>. This identifies the class, not the individual item. In styles that you develop for components, you can use this global class identifier to make sure your styles apply only to all children of a component type.

CSS Class names for Types of Components

To address a specific instance of a OpenFlower Component, you can use the CSS Class which is available in the further tree.

Address specific instances of a OpenFlower Component

// will apply to all Buttons in your App
.lowcoder-app-canvas .button {
    border-radius: 50px;
}

// will apply to the specific Button with the name button1 in your App
.lowcoder-app-canvas .button1 {
    border-radius: 50px;
}