Skip to main content

Custom Code

This article explains the different methods for adding custom code to Lime Editor layouts.

CSS​

You can add custom CSS to any Lime Editor layout, per-page or sitewide.

tip

To override theme styling, add the CSS to Customize > Additional CSS or your child theme's style.css file.

Per-Page or Per-Post CSS​

This procedure applies if you only want your CSS to apply to specific page or post using Lime Editor. For example, suppose you have a contact form and know that you only want your custom CSS to apply to that form on that single page.

To add CSS code that is restricted to a single Lime Editor page or post:

  1. Open the Tools Menu from the Top Bar.
  2. Click Layout CSS & JavaScript.
  3. On the CSS tab, enter your CSS code.
  4. Click Save.

Sitewide CSS​

This procedure applies if you want your CSS to apply globally for all pages and posts which are using Lime Editor.

To add CSS code that is applied globally to all Lime Editor pages or posts:

  1. Open the Tools Menu from the Top Bar.
  2. Click Global Settings.
  3. On the CSS tab, enter your CSS code.
  4. Click Save.

Utility Classes​

Lime Editor contains two utility classes that can be helpful when writing custom CSS.

fl-builder​

The fl-builder class allows your custom CSS to only style pages or posts using Lime Editor.

.fl-builder .page-id-1 .fl-module-heading h1 { ... }
.fl-builder .page-id-1 .fl-module-button a { ... }

fl-builder-edit​

The fl-builder-edit class is only available when the Lime Editor editor is active on your page or post. This is useful if your theme styling is impacting the builder UI styling.

.fl-builder-edit button { ... }

You can also use fl-builder-edit with the :not() selector to apply complex styling, such as changing the position of a row, column, or module without affecting the builder's functionality.

body:not(.fl-builder-edit).fl-builder .fl-module-heading {
  position: relative;
  top: -100px;
  left: 200px;
}

JavaScript​

You can add custom JavaScript to any Lime Editor layout, per-page or sitewide.

info

To override theme JavaScript, add the code to your theme settings or use the WordPress wp_enqueue_script() function.

caution

The JavaScript tab does not support JavaScript code wrapped with <script>...</script> tags.

Per-Page or Per-Post JavaScript​

This procedure applies if you only want your JavaScript to apply to specific page or post using Lime Editor. For example, suppose you have anchor points and wish to tweak the smooth scrolling effect for that page only.

To do this:

  1. Open the Tools Menu from the Top Bar.
  2. Click Layout CSS & JavaScript.
  3. On the JavaScript tab, enter your JavaScript code.
  4. Click Save.

Sitewide JavaScript​

This procedure applies if you want your JavaScript to apply globally for all pages and posts which are using Lime Editor.

To do this:

  1. Open the Tools Menu from the Top Bar.
  2. Click Global Settings.
  3. On the JavaScript tab, enter your JavaScript code.
  4. Click Save.

Specific point in the page or post​

You can add the JavaScript code to a specific point in your page or post using the HTML module.

Tracking Scripts​

It is not possible to add tracking scripts to Lime Editor layouts, such as Google Analytics and Facebook pixels. Due to the fact that they need to be added to the <head> of your HTML page. In contrast, JavaScript added to either the Global Settings or Layout CSS & JavaScript is merged into the layout.js file, which loads in the footer of your website.

If you're using the BB Theme, you can add your tracking code using these instructions.

For third-party themes, check to see if it has an option to add JavaScript to the <head> section. If not, you'll need to use WordPress wp_head() function.

Per-Node CSS & JS​

The Enable Code Settings option in Lime Editor Advanced settings allows you to add CSS and JavaScript to each node (rows, columns, and modules) individually.

See the CSS & JavaScript article in the Advanced tab section for more information.

HTML​

To add custom HTML to your Lime Editor pages and posts you can use either the Text or HTML modules.

PHP​

Lime Editor doesn't allow you to insert PHP code into post or page layouts. Instead, we recommend using the WordPress Shortcode API to create your own shortcode, then add it to a HTML module.