LogoLogo
Try it outResourcesAPIsAddOnsBook a demo
  • Getting Started
    • Introduction to Beefree SDK
      • Create an Application
      • Installation and Fundamentals
        • Configuration parameters
          • Configuration Reload
          • Workspaces
          • Debugging the Beefree SDK Editor
        • Methods and Events
        • Authorization Process
        • How the UID parameter works
        • Set up two-factor authentication
        • Naming conventions
      • Development Applications
      • Manage Users
      • Manage Subscriptions
      • Installation and Fundamentals
    • Tracking Message Changes
    • Sample Code
    • Release Candidate Environment
  • Visual Builders
    • Email Builder
    • Page Builder
      • Integrating Page Builder
      • Embedding videos in a page
    • Popup Builder
      • Popup Builder - Getting Started
      • Testing and Integrating
      • Setting layout and size
        • Advanced settings
    • AI-Driven Design Creation
  • APIs
    • Content Services API
      • Authentication
      • Export
      • Convert
      • Row Processing
      • AI Collection
      • Brand Style
    • Template Catalog API
      • Authentication
      • Templates
      • Categories
      • Collections
      • Designers
      • Tags
    • HTML Importer API
      • Authentication
      • Import HTML
  • Forms
    • Form Block
    • Integrating and using the Form block
      • Passing forms to the builder
      • Form structure and parameters
      • Form layout customization
      • Allowed form fields
      • Edit form field modal
  • Rows
    • Reusable Content
      • Create Reusable Content
        • Pre-build Reusable Content
          • Implement Custom Rows
        • Save Reusable Content
          • Implement Hosted Saved Rows
          • Implement Self-hosted Saved Rows
            • Self-hosted Saved Rows Concepts and Tutorial
      • Sync Reusable Content
        • Implement Synced Rows
        • Initialize Edit Single Row Mode
      • Manage Reusable Content
    • Storage for Reusable Content
      • Hosted Saved Rows
      • Self-Hosted Saved Rows
  • File manager
    • File manager application overview
      • Mime Types and Groups
  • Server-side configurations
    • Server-side options
      • Toolbar options
      • Storage options
        • Configure your AWS S3 bucket
        • Connect your file storage system
      • Content options
      • Services options
      • Undo & Changes history
      • Custom JavaScript Libraries Injection
  • Other Customizations
    • Advanced options
      • Special Links and Merge Tags
      • Content Dialog
      • Custom Color Palette
      • Font management
      • Roles and Permissions
      • Smart Merge Tags
      • Commenting
      • Custom Attributes
      • Meta Tags
      • Custom Languages
      • Display Conditions
      • Advanced Permissions
      • Custom File Picker
      • Custom Headers
    • Appearance
      • Content Defaults
      • Custom Sidebar Position
      • Content Tile Sorting
      • Content Tile Grouping
      • Loading Spinner Theme
      • Custom Tab Layout
      • Themes
      • Custom CSS
        • Change Log
    • AMP for Email
    • Collaborative Editing
      • Co-editing Integration Guide
    • Mobile Design Mode
    • Multi-language Templates
    • Cards Style and Image Round Corners
    • Hover Effect for Buttons
    • Content Area Padding
    • Line Height
  • Data Structures
    • Getting Started
    • Schema Catalog
    • Simple Schema
      • Template Schema
      • Definitions Schema
      • Row Schema
      • Column Schema
      • Title Schema
      • Image Schema
      • Button Schema
      • Paragraph Schema
      • HTML Schema
      • Menu Schema
      • List Schema
      • Icon Schema
      • Divider Schema
    • Row Metadata
    • Form Validation Schema
    • Comments Schema
      • Change Schema for Comments
  • Builder AddOns
    • AddOns
      • AddOns Overview
      • Partner AddOns
        • Partner AddOns directory
        • Installing Partner AddOns
        • DeepL
        • Stability AI
        • Azure AI Vision - Image Analysis
          • Alternate Text Generation with AI
          • AI Alt Text Bulk Generation
        • AI Writing Assistant
          • Available Providers
            • OpenAI
            • Azure OpenAI
            • Anthropic
          • AI Providers and Data Security
          • AI-Generated Meta Tag Fields
          • Token Upselling
          • Apply a Brand Tone
        • Custom AI Writing Assistant
      • Custom AddOns
        • AddOn Development
        • Contribute to the Partner AddOn Marketplace
      • AddOns Configuration
      • AddOn FAQs
  • Resources
    • Error Management
      • onWarning
      • Beefree SDK Editor Errors
      • File System Provider errors
      • JSON Parser errors
      • Template Validation and Update
      • Template validation and update errors
    • Scheduled maintenances
Powered by GitBook
LogoLogo

Policies

  • Privacy & Cookies
  • Terms of Services
  • GDPR Compliance
  • Trust Center

Contact Us

  • Submit a request
  • Book a demo
  • Report a security issue

Resources

  • Developer website
  • Create a Developer Account

© Bee Content Design, Inc. San Francisco, CA | Part of Growens

On this page
  • Defining a custom look & feel through a CSS stylesheet
  • Using different values for different users of the builder
  • Best practices and risk management
  • Sample Custom CSS Theme

Was this helpful?

Export as PDF
  1. Other Customizations
  2. Appearance

Custom CSS

PreviousThemesNextChange Log

Last updated 16 days ago

Was this helpful?

This feature is available on Beefree SDK and above. Upgrade a at no extra charge to explore features from higher plan tiers. Note: Usage on a development application still counts toward and limits.

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. 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.

Important Notice

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.

Reliable Selectors

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.

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

Changes & Updates

⚠️
Superpowers plan
development application
usage-based fees
Advanced Permissions