DevHub Docs
  • Welcome
  • Analytics
    • What events are tracked automatically?
    • Custom events
    • Google Analytics
  • API documentation
  • Domains
    • Registering a new domain
    • Renewing a domain
    • Pointing an existing domain
    • Pointing a subdomain of an existing domain
    • Transfer a domain
      • Transfer a domain to another registrar
    • Validating your domain
      • Validate with Google Webmaster Tools
    • Domain expiration process
  • Email accounts
    • Hosted email (rackspace)
      • Configure email clients to use POP or IMAP
  • Forms
    • Form and field options
    • Using fieldsets
    • Spam filtering
    • Configure SMTP For outbound emails
    • Using Marketo forms
  • Google Sheets
  • Hosting options
    • Embed pages
    • Wordpress plugin for path override
    • Server path override
      • Apache configuration
      • IIS configuration
      • NGINX configuration
    • CDN (content delivery network) support
  • Maps
    • Location finder
    • Map options explained
    • Google Maps API keys
  • Privacy
    • OneTrust integration
    • Cookies
  • Reverse proxy
    • Privacy and security
    • Proxy Configuration
    • Proxy Gating
    • Form lead tracking
    • Blocking and Whitelisting
      • Whitelisting Options
      • Google Ads rejections or disapprovals
      • 3rd Party Services/Widgets
      • Common Security System Restrictions or Domain Errors
  • SEO
    • Schema.org support
    • Sitemap XML
    • Enable No Index
  • Site builder
    • Getting Started
    • Images and video
    • Pages and content
      • Using page drafts
      • Adding Text
      • Adding and Managing Pages
      • Adding Images
      • Page templates and Templated pages
      • Maps
    • Redirects
    • Site Settings
    • Style Options
    • Adding a Business and location
    • Adding a site
    • Adding a user
    • Adding Custom Forms
    • Adding HTML to Sites or Pages
    • Blogs
  • SSL and security
    • SSL Troubleshooting
    • SSL certificate install options
      • Use your own purchased SSL certificate
    • Enable HTTPS for Sites and Proxies
  • Support
    • Creating a Zendesk account
    • Ticketing submission workflow
    • Builder URL and Site ID
  • Themes and custom templates
    • Getting started
    • Using macros
    • Using custom fields
    • Using URL parameters
    • Hours of operation
    • Using date and time in templates
    • Template variables
    • Site Builder Markup
      • Avoiding Site Builder CSS and HTML duplication
    • Example themes
      • Location focused page with bootstrap
      • Store locator theme example
    • Advanced Examples
      • Theme module templates
      • Static Google maps
      • Content translations
      • Page navigation
      • Override page title and meta tags
      • Adding line breaks to content
      • Get objects
      • Handling boolean values
      • Right to left languages
      • Access current URL
      • Social sharing links
      • Standard filters
      • Serializing data to JSON
      • Form events
      • Schema.org FAQ utility
  • Trace technology
    • What is Trace?
    • Configuration options
  • Data Sources
    • External Contexts
Powered by GitBook
On this page
  • Avoiding Site Builder CSS
  • Avoiding duplication of Site Builder HTML element classes

Was this helpful?

  1. Themes and custom templates
  2. Site Builder Markup

Avoiding Site Builder CSS and HTML duplication

PreviousSite Builder MarkupNextExample themes

Last updated 3 years ago

Was this helpful?

Avoiding Site Builder CSS

Our Site Builder adds some markup (classes, IDs, etc) to . You should avoid adding your own CSS styles to these elements directly as those can adversely effect the Site Builder editing of those pages.

If you do want to use these classes for your own custom styles, then you should add styles to child elements of these instead of directly to these elements.

Correct

Incorrect

.sb-formbuilder form {

/* styles here */ }

.sb-formbuilder {

/* styles here */ }

Avoiding duplication of Site Builder HTML element classes

Our Site Builder adds HTML around the various Modules and Widgets that you add to the page. Examples of the HTML and class names can be found here:

You should avoid using those same classes and should not copy entire blocks of HTML from a current page into a new HTML widget on the page without first checking to make sure none of the reserved HTML elements are present.

Otherwise, after adding this code to the site, it can negatively impact the behavior of the Site Builder.

certain elements within the pages
Site Builder Markup