Add your own CSS code

You are able to add your own custom CSS to your intranet, via the “Custom CSS” page within the “Developer Framework” section of the Control Panel. Our recommended use of the CSS area is to add styling to HTML content which you have added within a HTML Widget, the Homepage Header area or a Homepage Footer area.

Note: We do have some ready-made examples of this type of content on the Widget HTML homepage on your intranet – namely our banners and icon buttons that we refer to as “Quick Links“.

With this in mind, we recommend that any classes and elements that you create do not conflict with these or look to extend them, since these items use styles within the underlying theme that are hidden from view. On a similar note, it would be wise to avoid using and styling generic classes such as “container” and “row” etc when creating html content, as the product is based on a modified version of the Bootstrap framework, and targeting such generic class names could have unintended effects elsewhere in the Product’s UI.

We strongly advise against using the “Manage Custom CSS” page to try to alter the existing layout and appearance of our platform. Reasons for this include:

• Potential inconsistent experience: Interact cannot take your custom code into account when testing new product releases, therefore your code may be affected or undone when a new Interact release is sent out. We will not be able to warn you of this beforehand.
• Ongoing maintenance: Interact’s Support team can advise on a case-by-case basis but cannot maintain or ‘fix’ your code – if your code causes issues on your site, then Interact can help to confirm this and would usually advise you to remove it.
• Limited scope of control: Any custom CSS added will usually affect the web version of the Interact platform – it is typically unable to impact the Mobile App or any other channel such as Emails
• Potential impact on accessibility: The accessibility of your intranet may be impacted by any custom CSS you may add. A user who navigates the intranet using a screenreader, for example, could be impacted if you use CSS to try to add/hide/change/re-order elements on a page.
• Lack of translation: If content is added via CSS, such as using a pseudo element, this text will not translate like other content on the intranet

It’s important to keep in mind that any code you add here is your own responsibility and we advise to proceed with caution when injecting your own code into SaaS software.