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
  • Custom styles (themes)
  • Applying styles to the HTML
  • Popup HTML
  • Order of operations
  • Starting from scratch
  • Applying custom styles
  • Adding a border
  • Adding a drop shadow
  • Example:
  • Deep-dive into CSS properties
  • Custom layouts
  • The layout HTML
  • Div List and Descriptions
  • Changing the position of a layout

Was this helpful?

Export as PDF
  1. Visual Builders
  2. Popup Builder
  3. Setting layout and size

Advanced settings

What if the default styles and standard settings aren’t enough? No worries! In the following sections, we will look at styling your popup to make it look and feel more like the one real visitors will interact with.

Custom styles (themes)

A theme is simply a set of custom styles that give the popup its look and feel. Separate from your layout, Popup Builder comes with some preset themes. The primary is our default theme that is loaded when no settings are specified. We also provide an empty theme that has no styles, which you can use a blank canvas to create your own theme. This is one of the most powerful features of Popup Builder, and we’ll be covering custom styles in depth below.

Here is a preview of the configuration:


workspace: {
  popup: {
    customStyles: {
      ...
    },
  }
}

Applying styles to the HTML

To understand the best way to apply your styles, let’s start by inspecting the underlying HTML structure so you can view where the system will map your styles.

Popup HTML


<div id="popup-container">
  <div id="popup-header">
    <div></div>
    <div></div>
  </div>
  <div id="popup-content">
    <!-- BEE CONTENT -->
  </div>
  <div id="popup-footer">
    <div></div>
    <div></div>
  </div>
</div>  

Here is a quick break down of what each div does:

popup-container

This is where you will apply any styles related to how the popup looks, such as border-radius, drop shadows, background colors, or padding.

popup-header

The header is sometimes used to add a close icon to a popup or display a title.

popup-content

The div that holds the editable content of your Beefree application.

popup-footer

You can use this div to show a traditional footer for your popup or position some icons outside the popup container (e.g., a close button).

The above HTML structure is represented in your bee config as the following JSON object.


customStyles: {
  container: {},
  header: {},
  content: {},
  footer: {},
  overlay: {},
}, 
  

Add styles to the JSON section that corresponds to the HTML element you want to style.

For example, if you want to apply styles to the div with id popup-container, then you would add the styles to the following JSON:


customStyles: {
  container: {
    ...styles,
  },
},  
 

We’ll go deeper into styling in the following sections.

Order of operations

You may be wondering at this point if you have to design an entire theme to get started. Well, you can if you want to, but thanks to the order of operations, you don’t have to. You can start with our default theme and pass in the styles that you want to override. Any style you provide will take priority over any of the defaults.

Starting from scratch

We said that you could start from scratch if you want, and the easiest way to do that is by using our theme parameter. This allows you to avoid overriding every default style and gives you an empty canvas to build your own theme.

Example:


beeConfig: {
  workspace: {
    popup: {
      theme: 'custom'
    }
  }
}

Applying custom styles

Now that you have seen what the HTML looks like and have some idea where to apply your styles, let’s look at how you get your styles into the editor. The best way to show you is by example, so let’s get started with some common use cases!

Adding a border

Using the schema JSON above and your HTML structure knowledge, you probably guessed that the border is defined on the popup container. So here’s what that would look like:

Example:


workspace: {
  popup: {
    customStyles: {
      container: {
        border: '1px solid black'
      }   
    }
  }
}

Adding a drop shadow

Example:


workspace: {
  popup: {
    customStyles: {
      container: {
        boxShadow: '0 5px 15px rgba(0, 0, 0, 0.5)'
      }
    }
  }
}

Deep-dive into CSS properties

After looking at a couple of samples, you may notice these parameters are looking familiar. That’s because every layer of our schema maps to a layer of HTML with the same name AND can be styled with any valid CSS property.

Basically, CSS properties are the same as CSS used by web developers in style sheets, but instead of dashes to separate words, it uses a camel case.

Example:

The CSS property of the style box-shadow would be boxShadow.

Why not use CSS styles as defined by CSS3 specification directly? Well, simply put, CSS properties are better suited for JSON and can easily be shared with any FE application using the popular React framework.

Custom layouts

We covered the default layout settings in Setting layout and size section. To recap, the layout determines the type of popup (e.g., a bar) and its location on the screen (e.g., bottom, top, or side). Our research team looked into it, and it turns out, nearly all popups fall into one of the most popular layouts, which we’ve included as presets. But, when that’s not enough, the configuration option customLayout can be used to make minor adjustments to a preset layout or create an entirely new layout from scratch.

Here is a preview of the configuration:


workspace: {
  popup: {
    customLayout: {
      ...
    },
  }
}

The layout HTML

The popup is positioned in the workspace using divs and CSS flexbox. We created a layout structure that mimics an HTML page to map your page’s styles to the workspace.

Layout HTML:


<div id="html">
  <div id="body">
    <div id="main">    
      <div id="popup-wrapper">
        <!-- Popup -->
      </div>
      <div id="popup-overlay">
    </div>
  </div>
</div>  

Div List and Descriptions

Here is a quick break down of what each div does:

HTML

We will apply the styles placed here to the document HTML tag.

body

We will apply the styles placed here to the HTML body tag

main

This is the main container div of the workspace.

popup-wrapper

The wrapper of the popup is used entirely for positioning the popup within the workspace main div.

Changing the position of a layout

Example:


workspace: {
  popup: {
    layout: 'classic-center',
    customLayout: {
       wrapper: {
        maxWidth: '700px'
      }  
    }
  }
}
PreviousSetting layout and sizeNextAI-Driven Design Creation

Last updated 8 months ago

Was this helpful?