Custom CSS

This feature is available on Beefree SDK Superpowers plan and above. Upgrade a development application at no extra charge to explore features from higher plan tiers. Note: Usage on a development application still counts toward usage-based fees and limits.

Defining a custom look & feel through a CSS stylesheet

To define a custom look and feel through a CSS stylesheet, assign the URL of your CSS file to the customCss property in your JavaScript code, as shown in the following example.

customCss: 'https://yourdomain.com/stylesheet.css'

Using different values for different users of the builder

You can customize the builder's CSS for different users by dynamically setting the customCss property with a unique CSS file URL for each user. Simply concatenate the user-specific identifier to the base URL as shown in the example code.

customCss: 'https://yourdomain.com/' + users[config.user].id + '.css'

Best practices and risk management

Custom CSS is an advanced feature, which gives the host application great flexibility to customize the UI/UX of the builder. Please use this feature with caution. If you're looking to hide certain UI elements, we recommend you first check if that can be accomplished with Advanced Permissions, as it may be easier to implement.

When used properly, it is a powerful tool that can be leveraged to accomplish anything from applying custom styles with fine granularity to changing icons.

When misused, however, it may harm the user experience and the rendering capability of the builder’s stage. For example, styles applied to the stage via CSS will not be reflected in the preview or exported HTML.

Important Notice

For the best results, follow these best practices:

• Avoid global styles. Do not use generic global styles (e.g., *, p, input) that could affect the editing stage.

• Use specific CSS selectors. Target elements using precise selectors (e.g., body.bee--cs h3).

• Do not inject scripts via CSS. JavaScript and other scripts should not be included in CSS.

• Ensure HTTPS hosting. The custom CSS URL must be hosted over HTTPS.

• Avoid third-party hosting. Do not link to CSS files hosted on GitHub or other third-party sources.

• Do not style elements directly on the stage. These styles will not appear in the final HTML, which may create a confusing experience.

Reliable Selectors

Only class names with the --cs suffix are reliable for custom CSS. Avoid the following selectors:

• Nested tag structures (e.g., div > div > div)

• Sibling selectors (e.g., input + label)

• Class names without --cs (e.g., .icons__item)

• Prefixed class name selectors (e.g., div[class^="StageModuleIcons_itemRow"])

⚠️ Changes & Updates

Class names without the --cs suffix may change without prior notice. However, any updates to the HTML structure and --cs classes will be communicated in advance.

Changing tile icons in the sidebar

This is an example for the Title block

/* Hide default icon for title block */
.sidebar-draggable-heading--cs .image-drag svg {
  visibility: hidden;
}

/* Replace them with yours */
.sidebar-draggable-heading--cs .image-drag {
  background: url() no-repeat center;
  background-size: contain;
}

Smart Merge Tag Styling

.content-labels--cs code[data-bee-code] {
  border: none !important;
  border-radius: 5px;
  background-color: #effcff;
  color: #34778f;
  padding-left: 24px !important;
}

.content-labels--cs code[data-bee-code]::after {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  content: ''; 
  background-image: url("./cube.svg") !important;
  background-size: contain;
  width: 16px;
  height: 16px;
}

Custom CSS Example Code

Are you looking for an example of how you can use Custom CSS to adjust the look and feel of the Beefree Editor?

This example demonstrates advanced interface theming for the Beefree SDK using a modern React + TypeScript architecture. It showcases how to dynamically apply custom CSS themes to transform the entire editor interface.

beefree-sdk-examples/custom-css-example at main · BeefreeSDK/beefree-sdk-examplesGitHub