Themes
If you're on the Essentials plan, upgrade a development application for free to try this and other Core-level features.
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
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
Available settings explained
General
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
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
Right panel tabs
Draggable tiles and Tile icons
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).