Elements on the canvas can have one or more editable style properties. Blox allows you to edit these properties by clicking on an element after which the styling editor panel will appear on the left side of the screen.
There are two ways of modifying an element’s styling:
- Individual style properties and
- Style classes
Individual style properties
These are individual properties such as text colour, background colour, padding, margins, etc. Most individual style properties are represented using a simple input field into which the end-user can input the property value. This is illustrated with the screenshot below:
There are two style properties which are treated somewhat special. These are the background-image property and all colour related properties. The colour related properties, such as text colour, background colour, etc which activate a colour picker when clicked. This allows the end-user to easily enter a colour code. When the background-image property input field is clicked, the image library modal will automatically popup allowing the user to choose an image.
Style classes
In addition to individual style properties, Blox also allows for style classes to be applied to elements. Style classes can be considered as a group of style properties all applied to an element at once. The style classes are represented as dropdown menus from which the end-user can pick a class.
