Where to add custom CSS

Many of these Knowledge Base articles have CSS code that you can copy and paste, or perhaps you want to create your own CSS. Where should you put it?

Restrict custom CSS to a single Impress Engine page

This procedure applies if you only want your CSS to apply to the content layout on a single Impress Engine page. 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 Impress Engine page:

1. Click the title bar in the upper left corner to open the Tools menu, then click Layout CSS & JavaScript.
2. On the CSS tab, enter your CSS code.
3. Click Save.

You’ll see a green dot next to the Layout CSS & JavaScript menu item in the Tools menu on any page for which you have custom code.

Add custom CSS to apply site-wide

There are several ways to add custom CSS that applies site-wide, but there are slight variations in the behavior with the two methods.

1. Site-wide rules for content area layouts

You can add site-wide rules right in your Impress Engine editing screen. The rules will apply to the content area of every page.

This method is very handy when you’re adding custom ID or class selector names to individual rows, columns, or modules on a page, because you don’t have to leave the Impress Engine editor to add the rule and they still apply site- wide, and you can see the site-wide rules from any Impress Engine editing page.

On the other hand, you might prefer to keep all your rules in a single place so you can find them easily later. In that case, you can use the other method below.

To add a site-wide CSS code for content area layouts:

1. Click the title bar in the upper left corner to open the Tools menu, then click Global settings.
2. On the CSS tab, enter your CSS code.
3. Click Save and preview the result.
   This code will now appear in Tools > Global settings on any page, but the CSS rules will apply to all content areas of your site.

You’ll see a green dot next to the Global Settings menu item in the Tools menu to remind you that you have custom code. Since it’s global, you can edit this code on any Impress Engine editing page.

2. Site-wide rules set on the Customize > Additional CSS tab

From the main website dashboard, click on Customizer and then Additional CSS. There you can add any site-wide css that you’d like.