Custom CSS
This feature is available on Beefree SDK Superpowers plan and above. If you're on the Core or Essentials plan, upgrade a development application for free to try this and other Superpowers-level features.
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.
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.
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.
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.
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.
For the best possible results, please follow these best practices:
Avoid using generic global styles. (e.g. *, p, input, etc.) that could propagate to the editing stage.
Use CSS selectors to select specific elements and groups (e.g. body.bee–cs h3).
Do not attempt to pass JavaScript or any other scripts via CSS.
Ensure the custom CSS URL is hosted over HTTPS.
Do not link to CSS files hosted on GitHub, or by any 3rd party.
Never style elements on the stage, since those styles will not appear in the final HTML, and therefore lead to a confusing user experience.
Please note that classnames with the --cs
suffix are reliable selectors for customCSS.
Other selectors such as the following should be avoided as much as possible:
Nested tag structure (e.g.
div > div > div
)Siblings (
input + label
)Classnames without –cs (e.g.
.icons__item)
Prefixed classname selectors (e.g.
div[class^="StageModuleIcons_itemRow"]
)
Sample Custom CSS Theme
Reference the following Sample Custom CSS Theme to see an example of how you can use custom CSS in your web application.
Classnames
Classnames in CSS are identifiers used to define and apply specific styles to HTML elements. They enable developers to target elements more efficiently and apply styles across multiple elements consistently. Classnames make it easier to manage and control the appearance of web pages through styling.
Reference classnames for custom CSS.
This article lists the classnames for different buttons within the sidebar, aimed at developers seeking to customize or understand the styling applied to these components. You can use this information to more easily modify or enhance the user interface of your web application.
This section will cover button classnames for the following sidebar areas:
Content
This section lists the classnames for buttons within the content area of the sidebar.
Add-on
This section lists the Add-on sidebar widget sub-elements and classnames.
Add-on CTA
Sub-Element | Deprecated | New Classnames |
---|---|---|
NA |
|
|
Button
This section lists the Button sidebar widgets and their respective deprecated and new classnames.
Write with AI
Sub-element | Deprecated | New Classnames |
---|---|---|
NA |
|
|
Link
This section lists the Button sidebar widgets and their respective deprecated and new classnames.
Sub-element | Deprecated | New Classnames |
---|---|---|
Special links |
|
|
Link file |
|
|
Add custom special link |
|
|
Attributes
This section lists the Button sidebar widgets and their respective deprecated and new classnames.
Sub-element | Deprecated | New Classnames |
---|---|---|
Add new attribute |
|
|
Delete |
|
|
Carousel
This section lists the Carousel sidebar widgets, sub-elements, and classnames.
Add New Slide
Sub-element | Deprecated | New Classnames |
---|---|---|
NA |
|
|
Draggable Item
Sub-element | Deprecated | New Classnames |
---|---|---|
Change image | NA |
|
Delete | NA |
|
Dynamic Content
This section lists the Dynamic sidebar widgets, sub-elements, and classnames.
Choose a Custom Merge Content
Sub-element | Deprecated | New Classnames |
---|---|---|
NA |
|
|
Form
This section lists the Form sidebar widgets, sub-elements, and classnames.
Edit Form
Sub-element | Deprecated | New Classnames |
---|---|---|
NA | NA |
|
Manage Fields
Sub-element | Deprecated | New Classnames |
---|---|---|
Edit |
|
|
Delete |
|
|
Add new field |
|
|
Heading
This section lists the Form sidebar widgets, sub-elements, and classnames.
Write with AI
Sub-elemet | Deprecated | New Classnames |
---|---|---|
NA |
|
|
Icons
This section lists the Icons sidebar widgets, sub-elements, and classnames.
Add New Icon
Sub-element | Deprecated | New Classnames |
---|---|---|
Button |
|
|
Draggable Icon
Sub-element | Deprecated | New Classnames |
---|---|---|
Change image |
|
|
Apply effects |
|
|
Delete |
|
|
Image
This section lists the Image sidebar widgets, sub-elements, and classnames.
Apply Effects
Sub-element | Deprecated | New Classnames |
---|---|---|
NA |
|
|
Change Image
Sub-element | Deprecated | New Classnames |
---|---|---|
NA |
|
|
Link
Sub-element | Deprecated | New Classnames |
---|---|---|
Special links |
|
|
Link file |
|
|
Add custom special link |
|
|
Attributes
Sub-element | Deprecated | New Classnames |
---|---|---|
Add new attribute |
|
|
Delete |
|
|
List
This section lists the List sidebar widgets, sub-elements, and classnames.
Write with AI
Sub-element | Deprecated | New Classnames |
---|---|---|
NA |
|
|
Menu
This section lists the Menu sidebar widgets, sub-elements, and classnames.
Add New Item
Sub-element | Deprecated | New Classnames |
---|---|---|
NA |
|
|
Menu Item
Sub-element | Deprecated | New Classnames |
---|---|---|
Delete |
|
|
Link file |
|
|
Paragraph
This section lists the Paragraph sidebar widgets, sub-elements, and classnames.
Write with AI
Sub-element | Deprecated | New Classnames |
---|---|---|
NA |
|
|
Social
This section lists the Social sidebar widgets, sub-elements, and classnames.
Add New Icon
Sub-element | Deprecated | New Classnames |
---|---|---|
Button |
|
|
Social Icon Item
Sub-element | Deprecated | New Classnames |
---|---|---|
Delete |
|
|
Change image |
|
|
Apply effects |
|
|
Rows
This section lists the classnames for buttons within the row area of the sidebar.
Row Background Image
Sub-element | Deprecated | New Classnames |
---|---|---|
Choose image |
|
|
Row Background Video
Sub-element | Deprecated | New Classnames |
---|---|---|
Change video |
|
|
Display Condition
Sub-element | Deprecated | New Classnames |
---|---|---|
Select condition |
|
|
Add condition |
|
|
Edit condition |
|
|
Open builder |
|
|
Column Structure
Sub-element | Deprecated | New Classnames |
---|---|---|
Add new |
|
|
Delete |
|
|
Settings
This table lists the classnames for buttons within the settings area of the sidebar.
Favicon
Sub-element | Deprecated | New Classnames |
---|---|---|
Add favicon |
|
|
Favicon item
Sub-element | Deprecated | New Classnames |
---|---|---|
Change favicon |
|
|
Delete |
|
|
Last updated