1. How it works
2. Using a predefined theme
3. Building your own theme
4. Available settings explained

How it works

This Beefree SDK configuration allows you to change the builder’s appearance when rendered within your application so that it will blend even more seamlessly with the rest of your user interface.

Technically speaking, it allows you to change some parts of the CSS (Cascading Style Sheets) that controls the look & feel of the editor. If you want to use your own CSS, please refer to our Custom CSS feature.

Using a predefined theme

To change the builder’s appearance with just one click – and to familiarize with this feature – try one of the available, pre-built themes. All of them were created based on UI best practices, such as using the right amount of contrast between elements.

You can apply one of these themes as is, or use them as a starting point. And you can roll back to the default theme at any time, if things go wrong.

Note that themes will not be applied automatically, but rather will change the Look & feel values displayed in the lower part of the page.

Once you’re happy with your selection, press Save to apply the new theme to your Beefree SDK application.

Building your own theme

The properties that make up a theme are divided into sections for clarity and easy of use.

Available settings explained

General

The basic settings for your theme. They provide control over the font used and the general color scheme.

Font URL

You can use a Web font by adding the URL of a public CSS file (e.g., https://fonts.googleapis.com/css?family=Roboto)

Font-family stack

Will be used as font-family property. Remember that – when using web fonts – a fallback value will help to deal with downtime or network issues.

Brand color palette

Use this section to configure basic properties of your color scheme. These colors will be displayed in buttons, active widgets, hover & selection helpers, etc.

The Primary color will be the most important color in your scheme, as it will identify highlighted elements. Here are two examples of how a highlighted row is rendered using two different themes (the default theme is shown at the top).

Stage

The stage is the area where the message is displayed while you design it. The main elements will inherit colors from General | Brand Color Palette so only the text color is available as an editable property.

Right panel tabs

This section controls the appearance of the right panel’s top tabs. You can add custom colors and even hide the default icons (which may be useful for some translations in order to create more real estate for the text labels). Here is an example (left: default theme, right: aubergine).

Draggable tiles and Tile icons

These sections will help you customize the tiles that are used for content items and row structures. Here is an example  (left: default theme, right: aubergine).

Properties top bar

This is the title bar that is displayed in the right side panel when you select an item on the editing stage. It displays important information and actions that can be performed on that item.

Widgets

All the properties displayed in the right side panel when you select an item in the editing stage are a mix of shared widgets.

The following is a visual guide of the available customizations (left: default theme, right: aubergine).

Sections

Input fields

Toggle control

Social icons