Themes
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
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.
The properties that make up a theme are divided into sections for clarity and easy of use.
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).
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.
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).
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).
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.
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).
