Custom CSS
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
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.
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 , 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.
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.
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"])
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.
Reference the following Sample Custom CSS Theme to see an example of how you can use custom CSS in your web application.