How to add Custom Scripts or CSS to ProSite

Knowledgebase Article

How to add Custom Scripts or CSS to ProSite

ProSite makes it incredibly easy for you to create and launch your own website, without requiring any coding or technical skills.

However, there may come a time when you want to customize your site's appearance or functionality beyond what ProSite's default settings allow. This is where adding custom scripts or CSS code can be incredibly useful.

Custom code can help you achieve the exact look and feel you desire for your website, and can also add functionality that is not included in ProSite's features.

With custom code, you have the ability to take your website to the next level and create a unique online presence that truly stands out.

Please note that this is an advanced feature which should be used by users with developer knowledge.

How to Insert Code onto a Page or the Entire Site

1. Launch the Pages dialogue from the main config menu

2. In the Pages modal, select the Scripts tab. You can insert your custom code including CSS either before the </head>, after the <body> or before the </body> tag. You can insert this code on every page by selecting Default, or you can insert the code on specific pages only.

The code you insert will only be executed on the published site and will not execute in the editor.

3. Depending on what you're inserting, you may wish to assign a custom class attributes to elements in your page. For instance, if you wish to add custom styling to an element on the canvas, you can give it a specific class name and use your CSS code to apply custom styling options.

To do this, select the element you'd like to add a custom class to. In the Advanced config options on the right side, you can enter a cusom class name.

Adding custom code in a Specific Place on a Page

You can also add custom code in a specific place on the page, using the HTML widget. This can be useful to embed 3rd party widgets.

To do this:

1. Drag on an Advanced element in the position you'd like to embed the HTML.

2. Select HTML from the range of options.

3. With the HTML element selected, in the right side config area, click the Pencil icon to edit the contents.

By default, HTML content is disabled in the editor, but will be run on the published or previewed site. This is to ensure the scripts do not affect the developer interface. You may turn off this checkbox if you're confident it's safe to do so based on contents inserted, and the code will be rendered in the editor itself.