Editing Styles

Depending on how the administrator has configured SB Pro, elements on the canvas can have one or more editable style properties. SB Pro allows users to edit these properties by clicking on an element after which the styling editor panel will appear on the left side of the screen.

Please note that it us up the administrator to configure which properties can be edited for every element. SB Pro does come with certain defaults, however the administrator has the final say in which styling properties are available in the style editor panel.

There are two ways of modifying an element’s styling:

  1. Individual style properties and
  2. Style classes

Individual style properties

These are individual properties such as text color, background color, 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 individual style properties which are treated somewhat special. These are the background-image property and all color related properties. The color related properties, such as text color, background color, etc which activate a color picker when clicked. This allows the end-user to easily enter a color 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, SB Pro 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.

 
 

  • Editing Styles
  • 2836 Users Found This Useful
Was this answer helpful?

Also Read

Using Blocks and components

SB Pro takes a block oriented approach to building web pages and web sites. What this means is...

Editing Text

Text based elements, such as headings or paragraphs of text be edited by using using the...

How to Editing Images

SB Pro allows end-users to modify both regular images (using the  tag) and CSS background images....

Editing Links

SB Pro allows users to edit links by either providing a URL, a block (to link to another section...

Editing Videos

SB Pro allows users to edit Youtube and Vimeo videos as well. To edit a video, click the video...