Where Can Custom Code Be Added to My Project?

This guide introduces the basic (yet flexible) skinning possibilities available in Forsta Visualizations. This uses the standard web development technologies HTML, CSS and JavaScript – with the option to use the JavaScript framework jQuery to create customized project skins. This allows you to change almost everything related to the visual design of a finished report. 

Adding CSS, HTML & JavaScript to your Project

Using the Project Settings page in Project Administration (Project Administration >Project Settings) you will be able to add Custom CSS, Custom HTML or Export Custom HTML to be added on top of the current skin. This allows you to completely review the skin by overriding CSS rules, as well as add new HTML elements.

You can add the Javascript code inside the <script> tag, or add CSS inside the <style> tag. You’ll want to write plain HTML code without any tags inside the Custom HTML block:

You can add plain CSS code to the Custom CSS block, without the <style> element:

Some browsers do not automatically show the applied CSS changes, so you will want to refresh the page (Ctrl + F5) or clear your cache. Depending on the browser, simple refresh often won't be enough, and you will need to clear the cache.

There is also an option to add Export Custom HTML, which is commonly used to optimize the existing custom code (from the Custom HTML block) for the PPT export:

By clicking on the “Disable code” checkbox, the code in the box underneath(“Custom HTML”, “Custom CSS” or “Export Custom HTML” code block) will be temporary disabled, unless it’s unchecked again:

All changes in any of the code blocks will be saved only by clicking the Save button, after which the text “Project Settings saved successfully” will appear to confirm that the save has been successful: