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.
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.
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.
This section 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
NA
btnbtn-primary
add-on-sidebar-button--cs
Button
This section lists the Button sidebar widgets and their respective deprecated and new classnames.
Write with AI
NA
btn-primaryBeeButton_*
ai-sidebar-icon--cs
Link
This section lists the Button sidebar widgets and their respective deprecated and new classnames.
Special links
href-container__linkhref-container__link--special-link
href-special-link--cs
Link file
href-container__linkhref-container__link--link-file
href-link-file--cs
Add custom special link
href-container__linkhref-container__link--special-link
href-custom-special-link--cs
Attributes
This section lists the Button sidebar widgets and their respective deprecated and new classnames.
Add new attribute
btnbtn-primaryicon-manager__add-iconicon-manager__add-icon--csBeeButton_*
toggle-menu-button--cs
Delete
field-remove
delete-attribute--cs
Carousel
This section lists the Carousel sidebar widgets, sub-elements, and classnames.
Add New Slide
NA
btnbtn-primaryicon-manager__add-iconBeeButton_*
icon-manager__add-icon--cs
Draggable Item
Change image
NA
carousel-item-change-image--cs
Delete
NA
carousel-item-delete-image--cs
Dynamic Content
This section lists the Dynamic sidebar widgets, sub-elements, and classnames.
Choose a Custom Merge Content
NA
btnbtn-primaryBeeButton_*
select-merge-content--cs
Form
This section lists the Form sidebar widgets, sub-elements, and classnames.
Edit Form
NA
NA
content-dialog-button--cs
Manage Fields
Edit
field-edit
form-field-edit--cs
Delete
field-remove
form-field-delete--cs
Add new field
btnbtn-primaryicon-manager__add-iconicon-manager__add-icon--csBeeButton_*
toggle-menu-button--cs
Heading
This section lists the Form sidebar widgets, sub-elements, and classnames.
Write with AI
NA
btn-primaryBeeButton_*
ai-sidebar-icon--cs
Icons
This section lists the Icons sidebar widgets, sub-elements, and classnames.
Add New Icon
Button
btnbtn-primaryicon-manager__add-iconicon-manager__add-icon--csBeeButton_*
icons-add-icon--cs
Draggable Icon
Change image
btn-primaryBeeButton_*BeeIcons_*
icons-change-icon--cs
Apply effects
btn-defaultBeeButton_*BeeIcons_*
icons-edit-icon--cs
Delete
BeeButton_*BeeIcons_*
icons-delete-icon--cs
Image
This section lists the Image sidebar widgets, sub-elements, and classnames.
Apply Effects
NA
btnbtn-image-editorbtn-defaultBeeButton_*
btn-image-editor--cs
Change Image
NA
btnbtn-file-pickerbtn-secondaryBeeButton_*
btn-file-picker--cs
Link
Special links
href-container__linkhref-container__link--special-link
href-special-link--cs
Link file
href-container__linkhref-container__link--link-file
href-link-file--cs
Add custom special link
href-container__linkhref-container__link--special-link
href-custom-special-link--cs
Attributes
Add new attribute
btnbtn-primaryicon-manager__add-iconicon-manager__add-icon--csBeeButton_*
toggle-menu-button--cs
Delete
field-remove
delete-attribute--cs
List
This section lists the List sidebar widgets, sub-elements, and classnames.
Write with AI
NA
btnBeeButton_beeButton*
ai-sidebar-icon--cs
Menu
This section lists the Menu sidebar widgets, sub-elements, and classnames.
Add New Item
NA
btnbtn-primaryicon-manager__add-iconicon-manager__add-icon--csBeeButton_*
menu-items-add-button--cs
Menu Item
Delete
BeeButton_*BeeMenuItems_*
menu-items-delete-button--cs
Link file
href-container__linkhref-container__link--link-file
href-link-file--cs
Paragraph
This section lists the Paragraph sidebar widgets, sub-elements, and classnames.
Write with AI
NA
btn-primaryBeeButton_beeButton*
ai-sidebar-icon--cs
Social
This section lists the Social sidebar widgets, sub-elements, and classnames.
Add New Icon
Button
btnbtn-primaryicon-manager__add-iconicon-manager__add-icon--csBeeButton_*
social-add-icon--cs
Social Icon Item
Delete
icon-remove
icon-remove--cs
Change image
btn-primaryBeeButton_*BeeSocialIcons_*
social-change-icon--cs
Apply effects
btn-defaultBeeButton_*BeeSocialIcons_*
social-edit-icon--cs
Rows
This section lists the classnames for buttons within the row area of the sidebar.
Row Background Image
Choose image
btnbtn-file-pickerbtn-secondarybtn-primaryBeeButton_*
btn-file-picker--cs
Row Background Video
Change video
btnbtn-file-pickerbtn-primaryBeeButton_*
btn-file-picker--cs
Display Condition
Select condition
btnbtn-primaryBeeButton_*
row-display-condition-select-button--cs
Add condition
btn-defaultBeeButton_*
row-display-condition-add-button--cs
Edit condition
btn-defaultBeeButton_*
row-display-condition-edit-button--cs
Open builder
btnbtn-primaryBeeButton_*
row-display-condition-builder-button--cs
Column Structure
Add new
column-manager--addBeeButton_*
column-manager-add--cs
Delete
column-manager--deleteBeeButton_*
column-manager-delete--cs
Settings
This table lists the classnames for buttons within the settings area of the sidebar.
Favicon
Add favicon
btnbtn-primaryicon-manager__add-iconicon-manager__add-icon--csBeeButton_*
favicon-add-icon--cs
Favicon item
Change favicon
btn-primaryBeeButton_*
favicon-change--cs
Delete
BeeButton_*
favicon-delete--cs
Radiogroups in the context of our web application refer to a UI component that groups together a set of radio buttons, allowing users to select one option from multiple choices. Each radiogroup is associated with specific classnames that define the appearance and behavior of the grouped buttons within the sidebar's layout. These classnames, such as radiogroup--cs and radiogroup-button--cs, are crucial for ensuring consistent and functional navigation in your application's user interface.
This section will cover widget classnames for content in the sidebar. This section will list the classnames for the following sidebar tabs:
Rows
This section lists the classnames for widgets and content within the row area of the sidebar.
Vertical Align
NA
NA
radiogroup--csradiogroup-button--csactive--cs
Row Background Image - Apply Image To
NA
tgl-containertgl-container--csbtn-groupnumber-selectornumber-selector--cstgl_bgdactivebtnmultiToggle_option_background-toggle-content-areamultiToggle_option_background-toggle-rowbtn-primarytgl-label
radiogroup--csradiogroup-button--csactive--cs
Rows & Content
This section lists the classnames for widgets and content within the Row & Content area of the sidebar.
Hide On (Mobile/Desktop) + Confirmation Modal
Button
Carousel
Divider
Form
Heading
Html
Icons
Image
List
Menu
Dynamic
Content
Paragraph
Social
Spacer
Text
Video
hide-on-mobile__desktophide-on-mobile__mobilebtn-primaryhideOn-confirm-modal-icon--cs
radiogroup--csradiogroup-button--csactive--csconfirm-modal-icon--cs
Content
This section lists the classnames for widgets and content within the Content area of the sidebar.
Hide on (amp/html)
Button
Divider
Form
Heading
Html
Icons
Image
List
Dynamic
Content
Paragraph
Social
Spacer
Text
Video
hide-on-amp__amphide-on-amp__htmlbtn
radiogroup--csradiogroup-button--csactive--cs
Align
Button
Form
Form Label Options
Form Button Options
Heading
Icons
Image
Menu
Paragraph
Social
Divider
item_1-2widget__labelbtnbtn-defaultalign-leftactivebtn-align-leftbtn-align-rightbtn-align-centerbtn-align-justify
radiogroup--csradiogroup-button--csactive--cs
Line Height
Button
Form Label Options
Heading
Paragraph
List
Text
item_1-2widget__labelactivebtn-line-height--120btn-line-height--150btn-line-height--180btn-line-height--200
radiogroup--csradiogroup-button--csactive--cs
List Type
List
icon-toggleicon-toggle--csicon-toggle-itemicon-toggle-item--csicon-toggle-item--active
radiogroup--csradiogroup-button--csactive--cs
Label Position
Form Label Options
tgl-containertgl-container--csitem_1-2widget__labelbtn-groupnumber-selectornumber-selector--cstgl_bgdactivebtnmultiToggle_option_descriptor_form_style_labels_label-position_0multiToggle_option_descriptor_form_style_labels_label-position_1btn-primarystatic-labeltgl-label
radiogroup--csradiogroup-button--csactive--cs
Text Directon
Button
Heading
List
Paragraph
paragraph-itemparagraph-item--active
radiogroup--csradiogroup-button--csactive--cs
Select the Content to Use
Dynamic Content
item_1-2widget__labelradio-buttonradio-button__radio
radiogroup--csradiogroup-button--csactive--cs
Settings
This section lists the classnames for widgets and content within the Settings area of the sidebar.
Content Area Alight
NA
tgl-containertgl-container--csitem_1-2widget__labelbtn-groupnumber-selectornumber-selector--cstgl_bgdactivebtnmultiToggle_option_content_computedStyle_align_0multiToggle_option_content_computedStyle_align_1btn-primary static-labeltgl-label
radiogroup--csradiogroup-button--csactive--cs
This section covers classnames for the column structure widget.
Rows
PanelGroup_handle*
panel-group-dragging--cscolumn-manager-delete--cscolumn-manager-add--cspanel-divider--cs
This section covers widget classnames for content in the sidebar, and lists the classnames for the following widgets:
Font Style
Configure Icon Collection
Font Style
Form - Label
tgl-containertgl-container--csitem_1-2widget__labelbtn-groupnumber-selectornumber-selector--cstgl_bgdmultiToggle_option_descriptor_form_style_labels_font-weight_0multiToggle_option_descriptor_form_style_labels_font-weight_1button-default--csbutton-medium--csbutton--cs"active
multi-toggle--csmulti-toggle-btns--cstoggle-btn-pressed--cs
Form - Button
title_iconicon-organizer__panelpanel__icon-preview-wrapperpanel__titlecomp-tree-placeholder
multi-toggle--csmulti-toggle-btns--cstoggle-btn-pressed--cs
Configure Icon Collection
Social
item_1-2widget__labeltitle_iconicon-organizer__panelpanel__icon-preview-wrapperpanel__titlecomp-tree-placeholder
social-collection-list--cspanel__title--cs
Icons
item_1-2widget__labelicon-organizer__panelpanel__icon-preview-wrapperpanel__titlecomp-tree-placeholder
icons-collection-list--cspanel__title--cs
This section discusses and lists the various CSS classnames relevant to the application's sidebar widgets where textual input is required. These classnames facilitate the styling and functional integration of widgets such as URLs, images, alt texts, and more, providing a comprehensive guide for developers to enhance the user interface effectively.
This section will cover button classnames for the following sidebar areas:
Content
This section lists the classnames for widgets within the Content tab.
Image
URL
number-selector--csinput-image-urlitem_1-2widget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cs
Image, GIF, and Sticker
Alt Text
number-selector--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cs
Dynamic Image > Dynamic URL
number-selector--csalternate-text--csitem_1-2widget__textboxwidget__labelwidget__label--textbox btn
input-text--cs inputtext-boxed--csdynamic-image-url--cs
Image, Button, Icons, Menu, GIF, and Sticker
Web page > URL
number-selector--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cs
Send email > Mail to
number-selector--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cs
Send email > Subject
number-selector--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cs
Send email > Body
number-selector--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cs
Tel > Tel
number-selector--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cs
Send SMS> Tel
number-selector--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cs
Send SMS > Message
number-selector--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cs
Image, Button, GIF, Sticker, and Video
Attributes
number-selector--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cs
Video
URL
number-selector--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cs
Title
number-selector--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cs
Social
Item > Title
number-selector--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cs
Item > Alt text
number-selector--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cs
Item > URL
number-selector--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cs
Icons
Item > Image URL
number-selector--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cs
Item > Alt text
number-selector--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cs
Item > Icon Text
number-selector--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cs
Item > Title
number-selector--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cs
Form
Field label
number-selector--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cs
All Modules
Block identifier
number-selector--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cs
Rows
This section lists the classnames for widgets within the Rows tab.
Row background image
number-selector--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cs
Row background video
number-selector--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cs
Settings
This section lists the classnames for widgets within the Settings tab.
Row background image
number-selector--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cs
Title
number-selector--csalternate-txt--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cspage-metadata-title--cs
Description
number-selector--csalternate-txt--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cspage-metadata-description--cs
Subject
number-selector--csalternate-text--csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cspage-metadata-subject--cs
Preheader
number-selector--csalternate-txt-csitem_1-2widget__textboxwidget__labelwidget__label--textboxbtn
input-text--csinput-text-boxed--cspage-metadata-preheader-cs
The various classnames and data-qa attributes associated with entities within the application that feature sliders. These identifiers are crucial for styling and testing purposes, tailored to different areas like Add-On, Button, Form, and Image entities where sliders are a key component.
This section will cover button classnames for the following sidebar areas:
Content
This section lists the classnames for sliders within the Content tab.
Add-On (Image)
Width
BeeImageWidth_*BeeWidthSlider_*rc-slider*
slider--csslider-wrapper--cs
slider-btn
data-qa was moved from a div to the actual input element
Button
Width
BeeImageWidth_*BeeWidthSlider_*rc-slider*
slider--csslider-wrapper--cs
slider-btn
data-qa was moved from a div to the actual input element
Form
Width
Button Width
BeeWidthSlider_*rc-slider*widget-BeeImageWidth
slider--csslider-wrapper--cs
slider-btn
data-qa was moved from a div to the actual input element
Image
Width
BeeImageWidth_*BeeWidthSlider_*rc-slider*
slider--csslider-wrapper--cs
slider-btn
data-qa was moved from a div to the actual input element
Settings
This section lists the classnames for sliders within the Settings tab.
Content Area Width
BeeWidthSlider_*rc-slider*
slider--csslider-wrapper--cs
slider-btn
data-qa was moved from a div to the actual input element
Last updated
Was this helpful?