A classnames change log where you can reference current and past changes to CSS classes.
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.
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.
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"])
Reference the following Sample Custom CSS Theme to see an example of how you can use custom CSS in your web application.
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:
This section lists the classnames for widgets and content within the row area of the sidebar.
NA
NA
radiogroup--cs
radiogroup-button--cs
active--cs
NA
tgl-container
tgl-container--cs
btn-group
number-selector
number-selector--cs
tgl_bgd
active
btn
multiToggle_option_background-toggle-content-area
multiToggle_option_background-toggle-row
btn-primary
tgl-label
radiogroup--cs
radiogroup-button--cs
active--cs
This section lists the classnames for widgets and content within the Row & Content area of the sidebar.
Button
Carousel
Divider
Form
Heading
Html
Icons
Image
List
Menu
Dynamic
Content
Paragraph
Social
Spacer
Text
Video
hide-on-mobile__desktop
hide-on-mobile__mobile
btn-primary
hideOn-confirm-modal-icon--cs
radiogroup--cs
radiogroup-button--cs
active--cs
confirm-modal-icon--cs
This section lists the classnames for widgets and content within the Content area of the sidebar.
Button
Divider
Form
Heading
Html
Icons
Image
List
Dynamic
Content
Paragraph
Social
Spacer
Text
Video
hide-on-amp__amp
hide-on-amp__html
btn
radiogroup--cs
radiogroup-button--cs
active--cs
Button
Form
Form Label Options
Form Button Options
Heading
Icons
Image
Menu
Paragraph
Social
Divider
item_1-2
widget__label
btn
btn-default
align-left
active
btn-align-left
btn-align-right
btn-align-center
btn-align-justify
radiogroup--cs
radiogroup-button--cs
active--cs
Button
Form Label Options
Heading
Paragraph
List
Text
item_1-2
widget__label
active
btn-line-height--120
btn-line-height--150
btn-line-height--180
btn-line-height--200
radiogroup--cs
radiogroup-button--cs
active--cs
List
icon-toggle
icon-toggle--cs
icon-toggle-item
icon-toggle-item--cs
icon-toggle-item--active
radiogroup--cs
radiogroup-button--cs
active--cs
Form Label Options
tgl-container
tgl-container--cs
item_1-2
widget__label
btn-group
number-selector
number-selector--cs
tgl_bgd
active
btn
multiToggle_option_descriptor_form_style_labels_label-position_0
multiToggle_option_descriptor_form_style_labels_label-position_1
btn-primary
static-label
tgl-label
radiogroup--cs
radiogroup-button--cs
active--cs
Button
Heading
List
Paragraph
paragraph-item
paragraph-item--active
radiogroup--cs
radiogroup-button--cs
active--cs
Dynamic Content
item_1-2
widget__label
radio-button
radio-button__radio
radiogroup--cs
radiogroup-button--cs
active--cs
This section lists the classnames for widgets and content within the Settings area of the sidebar.
Content Area Alight
NA
tgl-container
tgl-container--cs
item_1-2
widget__label
btn-group
number-selector
number-selector--cs
tgl_bgd
active
btn
multiToggle_option_content_computedStyle_align_0
multiToggle_option_content_computedStyle_align_1
btn-primary static-label
tgl-label
radiogroup--cs
radiogroup-button--cs
active--cs
This section covers classnames for the column structure widget.
Rows
PanelGroup_handle*
panel-group-dragging--cs
column-manager-delete--cs
column-manager-add--cs
panel-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
Form - Label
tgl-container
tgl-container--cs
item_1-2
widget__label
btn-group
number-selector
number-selector--cs
tgl_bgd
multiToggle_option_descriptor_form_style_labels_font-weight_0
multiToggle_option_descriptor_form_style_labels_font-weight_1
button-default--cs
button-medium--cs
button--cs"
active
multi-toggle--cs
multi-toggle-btns--cs
toggle-btn-pressed--cs
Form - Button
title_icon
icon-organizer__panel
panel__icon-preview-wrapper
panel__title
comp-tree-placeholder
multi-toggle--cs
multi-toggle-btns--cs
toggle-btn-pressed--cs
Social
item_1-2
widget__label
title_icon
icon-organizer__panel
panel__icon-preview-wrapper
panel__title
comp-tree-placeholder
social-collection-list--cs
panel__title--cs
Icons
item_1-2
widget__label
icon-organizer__panel
panel__icon-preview-wrapper
panel__title
comp-tree-placeholder
icons-collection-list--cs
panel__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:
This section lists the classnames for widgets within the Content tab.
URL
number-selector--cs
input-image-url
item_1-2
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Alt Text
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Dynamic Image > Dynamic URL
number-selector--cs
alternate-text--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox btn
input-text--cs input
text-boxed--cs
dynamic-image-url--cs
Web page > URL
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Send email > Mail to
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Send email > Subject
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Send email > Body
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Tel > Tel
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Send SMS> Tel
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Send SMS > Message
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Attributes
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
URL
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Title
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Item > Title
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Item > Alt text
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Item > URL
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Item > Image URL
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Item > Alt text
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Item > Icon Text
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Item > Title
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Field label
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Block identifier
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
This section lists the classnames for widgets within the Rows tab.
Row background image
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Row background video
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
This section lists the classnames for widgets within the Settings tab.
Row background image
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Title
number-selector--cs
alternate-txt--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
page-metadata-title--cs
Description
number-selector--cs
alternate-txt--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
page-metadata-description--cs
Subject
number-selector--cs
alternate-text--cs
item_1-2
widget__textbox
widget__label
widget__label--textboxbtn
input-text--cs
input-text-boxed--cs
page-metadata-subject--cs
Preheader
number-selector--cs
alternate-txt-cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
page-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:
This section lists the classnames for sliders within the Content tab.
Add-On (Image)
Width
BeeImageWidth_*
BeeWidthSlider_*
rc-slider*
slider--cs
slider-wrapper--cs
slider-btn
data-qa was moved from a div to the actual input element
Button
Width
BeeImageWidth_*
BeeWidthSlider_*
rc-slider*
slider--cs
slider-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--cs
slider-wrapper--cs
slider-btn
data-qa was moved from a div to the actual input element
Image
Width
BeeImageWidth_*
BeeWidthSlider_*
rc-slider*
slider--cs
slider-wrapper--cs
slider-btn
data-qa was moved from a div to the actual input element
This section lists the classnames for sliders within the Settings tab.
Content Area Width
BeeWidthSlider_*
rc-slider*
slider--cs
slider-wrapper--cs
slider-btn
data-qa was moved from a div to the actual input element