Français

Español

🎉 Home

Voltapp Introduction

CUSTOMIZE A TEMPLATE ⏱

Discover Templates

Create your Airtable

Connect your data

Publish your app

LEARN VOLTAPP ▶️

Discovery of the interface

Nodes

Graph

Variables

Custom the design

https://www.youtube.com/watch?v=i-sbQHixaCA&list=PLd-vdLt174u7Slr7JXR_QhmoyauBQeRNX&index=6

Voltapp's rendering engine is directly based on CSS, it allows you to customize the design of your visual elements with many possibilities.

The "Style" component

Most of the "visual" nodes, in other words those that are displayed on the screen, have a Style component. This component allows you to customize the appearance of nodes according to your desires via different attributes (Background, Rounded, etc.).

Here we add to the image a yellow border of 5px thickness

Here we add a black and yellow gradient background to the text

The theme

At creation, projects contain a theme variable. This variable is an object, i.e. a set of values corresponding to the colors and fonts used globally in the app. The advantage of using this variable to set colors is that most nodes use it to set their default values.

Here by modifying theme.primaryBackground, all the nodes that use this color are also modified (the checkbox for example)

• text defines the default font used for texts in the application
• textBold defines the font used for important texts (like titles or buttons for example)
• background is the background color of the application
• foreground is the foreground color (i.e. text, icons, etc.)
• subBackground is the secondary background color, slightly lighter or darker than background (used for example for the background of inputs or modular windows)
• subForeground is the color used for less important, slightly grayed-out text (such as a caption or subtitle)
• errorBackground is the color used for errors (usually red, used to display an error message or a "dangerous" button for example)
• errorForeground corresponds to the color used in the foreground on errorBackground (usually close to black or white depending on the brightness of the red used in errorBackground)
• primaryBackground is the color used for the primary actions and interactions of the project (such as a link, the background of a button, a slider, etc.)
• primaryHighlight is similar to primaryBackground but a bit lighter, can be used in conjunction with primaryBackground or to signify a hover effect for example
• primaryForeground corresponds to the foreground color used with primaryBackground

Other visual attributes

Apart from the style component, there are other attributes, specific to each node, which allow you to modify their style. For example, you can change the size of a text or the filling mode of an image.

Here you can change the alignment and the way the text is decorated

States

States allow you to change certain visual attributes of a node based on external changes, for example, on mouse-over or click. Each node can contain different states which themselves allow you to change certain attributes of the node. To change the attributes of a node in a given state, use the buttons at the top of the node:

The button node is switched from one state to another. If a state other than Default is selected, the values of the node's attributes will only be applied in that state.

Here we modify the value of the Color attribute, for the hover state only. As a result, when the button is hovered over, the text color becomes yellow.

Nodes that have multiple states also have a Transition component. This component allows you to define the animation to move from one state to another:

Here the transition between attributes from one state to another lasts 0.3 seconds, there is no delay before the beginning of the transition and finally, the interpolation used is slowed down at the beginning and at the end.