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.

https://gist.github.com/44daee53546a9f48ecad7f52784efa55.git

Button Sidebar

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
• Rows
• Settings

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	btn btn-primary	add-on-sidebar-button--cs

Button

This section lists the Button sidebar widgets and their respective deprecated and new classnames.

Write with AI

Sub-element	Deprecated	New Classnames
NA	btn-primary BeeButton_*	ai-sidebar-icon--cs

Link

This section lists the Button sidebar widgets and their respective deprecated and new classnames.

Sub-element	Deprecated	New Classnames
Special links	href-container__link href-container__link--special-link	href-special-link--cs
Link file	href-container__link href-container__link--link-file	href-link-file--cs
Add custom special link	href-container__link href-container__link--special-link	href-custom-special-link--cs

Attributes

This section lists the Button sidebar widgets and their respective deprecated and new classnames.

Sub-element	Deprecated	New Classnames
Add new attribute	btn btn-primary icon-manager__add-icon icon-manager__add-icon--cs BeeButton_*	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

Sub-element	Deprecated	New Classnames
NA	btn btn-primary icon-manager__add-icon BeeButton_*	icon-manager__add-icon--cs

Draggable Item

Sub-element	Deprecated	New Classnames
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

Sub-element	Deprecated	New Classnames
NA	btn btn-primary BeeButton_*	select-merge-content--cs

Form

This section lists the Form sidebar widgets, sub-elements, and classnames.

Edit Form

Sub-element	Deprecated	New Classnames
NA	NA	content-dialog-button--cs

Manage Fields

Sub-element	Deprecated	New Classnames
Edit	field-edit	form-field-edit--cs
Delete	field-remove	form-field-delete--cs
Add new field	btn btn-primary icon-manager__add-icon icon-manager__add-icon--cs BeeButton_*	toggle-menu-button--cs

Heading

This section lists the Form sidebar widgets, sub-elements, and classnames.

Write with AI

Sub-elemet	Deprecated	New Classnames
NA	btn-primary BeeButton_*	ai-sidebar-icon--cs

Icons

This section lists the Icons sidebar widgets, sub-elements, and classnames.

Add New Icon

Sub-element	Deprecated	New Classnames
Button	btn btn-primary icon-manager__add-icon icon-manager__add-icon--cs BeeButton_*	icons-add-icon--cs

Draggable Icon

Sub-element	Deprecated	New Classnames
Change image	btn-primary BeeButton_* BeeIcons_*	icons-change-icon--cs
Apply effects	btn-default BeeButton_* 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

Sub-element	Deprecated	New Classnames
NA	btn btn-image-editor btn-default BeeButton_*	btn-image-editor--cs

Change Image

Sub-element	Deprecated	New Classnames
NA	btn btn-file-picker btn-secondary BeeButton_*	btn-file-picker--cs

Link

Sub-element	Deprecated	New Classnames
Special links	href-container__link href-container__link--special-link	href-special-link--cs
Link file	href-container__link href-container__link--link-file	href-link-file--cs
Add custom special link	href-container__link href-container__link--special-link	href-custom-special-link--cs

Attributes

Sub-element	Deprecated	New Classnames
Add new attribute	btn btn-primary icon-manager__add-icon icon-manager__add-icon--cs BeeButton_*	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

Sub-element	Deprecated	New Classnames
NA	btn BeeButton_beeButton*	ai-sidebar-icon--cs

Menu

This section lists the Menu sidebar widgets, sub-elements, and classnames.

Add New Item

Sub-element	Deprecated	New Classnames
NA	btn btn-primary icon-manager__add-icon icon-manager__add-icon--cs BeeButton_*	menu-items-add-button--cs

Menu Item

Sub-element	Deprecated	New Classnames
Delete	BeeButton_* BeeMenuItems_*	menu-items-delete-button--cs
Link file	href-container__link href-container__link--link-file	href-link-file--cs

Paragraph

This section lists the Paragraph sidebar widgets, sub-elements, and classnames.

Write with AI

Sub-element	Deprecated	New Classnames
NA	btn-primary BeeButton_beeButton*	ai-sidebar-icon--cs

Social

This section lists the Social sidebar widgets, sub-elements, and classnames.

Add New Icon

Sub-element	Deprecated	New Classnames
Button	btn btn-primary icon-manager__add-icon icon-manager__add-icon--cs BeeButton_*	social-add-icon--cs

Social Icon Item

Sub-element	Deprecated	New Classnames
Delete	icon-remove	icon-remove--cs
Change image	btn-primary BeeButton_* BeeSocialIcons_*	social-change-icon--cs
Apply effects	btn-default BeeButton_* BeeSocialIcons_*	social-edit-icon--cs

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	btn btn-file-picker btn-secondary btn-primary BeeButton_*	btn-file-picker--cs

Row Background Video

Sub-element	Deprecated	New Classnames
Change video	btn btn-file-picker btn-primary BeeButton_*	btn-file-picker--cs

Display Condition

Sub-element	Deprecated	New Classnames
Select condition	btn btn-primary BeeButton_*	row-display-condition-select-button--cs
Add condition	btn-default BeeButton_*	row-display-condition-add-button--cs
Edit condition	btn-default BeeButton_*	row-display-condition-edit-button--cs
Open builder	btn btn-primary BeeButton_*	row-display-condition-builder-button--cs

Column Structure

Sub-element	Deprecated	New Classnames
Add new	column-manager--add BeeButton_*	column-manager-add--cs
Delete	column-manager--delete BeeButton_*	column-manager-delete--cs

Settings

This table lists the classnames for buttons within the settings area of the sidebar.

Favicon

Sub-element	Deprecated	New Classnames
Add favicon	btn btn-primary icon-manager__add-icon icon-manager__add-icon--cs BeeButton_*	favicon-add-icon--cs

Favicon item

Sub-element	Deprecated	New Classnames
Change favicon	btn-primary BeeButton_*	favicon-change--cs
Delete	BeeButton_*	favicon-delete--cs

RadioGroup

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
• Rows & Content
• Content
• Settings

Rows

This section lists the classnames for widgets and content within the row area of the sidebar.

Vertical Align

Content	Deprecated	New Classnames
NA	NA	radiogroup--cs radiogroup-button--cs active--cs

Row Background Image - Apply Image To

Content	Deprecated	New Classnames
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

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

Content	Deprecated	New Classnames
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

Content

This section lists the classnames for widgets and content within the Content area of the sidebar.

Hide on (amp/html)

Content	Deprecated	New Classnames
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

Align

Content	Deprecated	New Classnames
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

Line Height

Content	Deprecated	New Classnames
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 Type

Content	Deprecated	New Classnames
List	icon-toggle icon-toggle--cs icon-toggle-item icon-toggle-item--cs icon-toggle-item--active	radiogroup--cs radiogroup-button--cs active--cs

Label Position

Content	Deprecated	New Classnames
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

Text Directon

Content	Deprecated	New Classnames
Button Heading List Paragraph	paragraph-item paragraph-item--active	radiogroup--cs radiogroup-button--cs active--cs

Select the Content to Use

Content	Deprecated	New Classnames
Dynamic Content	item_1-2 widget__label radio-button radio-button__radio	radiogroup--cs radiogroup-button--cs active--cs

Settings

This section lists the classnames for widgets and content within the Settings area of the sidebar.

Content Area Alight

Content	Deprecated	New Classnames
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

Columns

This section covers classnames for the column structure widget.

Sidebar Tab	Deprecated Classnames	New Classnames
Rows	PanelGroup_handle*	panel-group-dragging--cs column-manager-delete--cs column-manager-add--cs panel-divider--cs

Font Style

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

Content	Deprecated	New Classnames
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

Configure Icon Collection

Content	Deprecated	New Classnames
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

Input Text

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
• Rows
• Settings

Content

This section lists the classnames for widgets within the Content tab.

Image

Widget	Deprecated	New Classnames
URL	number-selector--cs input-image-url item_1-2 widget__label widget__label--textbox btn	input-text--cs input-text-boxed--cs

Image, GIF, and Sticker

Widget	Deprecated	New Classnames
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

Image, Button, Icons, Menu, GIF, and Sticker

Widget	Deprecated	New Classnames
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

Image, Button, GIF, Sticker, and Video

Widget	Deprecated	New Classnames
Attributes	number-selector--cs item_1-2 widget__textbox widget__label widget__label--textbox btn	input-text--cs input-text-boxed--cs

Video

Widget	Deprecated	New Classnames
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

Social

Widget	Deprecated	New Classnames
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

Icons

Widget	Deprecated	New Classnames
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

Form

Widget	Deprecated	New Classnames
Field label	number-selector--cs item_1-2 widget__textbox widget__label widget__label--textbox btn	input-text--cs input-text-boxed--cs

All Modules

Widget	Deprecated	New Classnames
Block identifier	number-selector--cs item_1-2 widget__textbox widget__label widget__label--textbox btn	input-text--cs input-text-boxed--cs

Rows

This section lists the classnames for widgets within the Rows tab.

Widget	Deprecated	New Classnames
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

Settings

This section lists the classnames for widgets within the Settings tab.

Widget	Deprecated	New Classnames
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

Slider

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
• Settings

Content

This section lists the classnames for sliders within the Content tab.

Entity	Sidebar Widget	Deprecated	New Classnames	Data-QA	Notes
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

Settings

This section lists the classnames for sliders within the Settings tab.

Entity	Deprecated	New Classnames	Data-QA	Notes
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