Site content and build

On this page, we discuss a few typical ways that CSS and HTML can be used to style your Homepages and Site Homepages even further. We’ll typically discuss these with you after your initial Theme application.

‘Quick Links’ is how we refer to our range of pre-built HTML buttons with icons which are at your disposal. These are available as default on any intranet built from 2022 onwards on the homepage titled ‘Widget HTML’, and they are used via the HTML Widget.
If you do not think your intranet has these links built-in, please raise this with your Onboarding Manager, Designer or via Support.
See the examples below (color, font and radius will be theme-dependent):

How do I add these buttons into my widget?

As a Power User, add a new widget to your homepage and select the “HTML Widget” option. Once on the ‘Configuration’ panel, select the “Source” option within the editing panel and paste the below code before hitting “Save”:

<ul class="quick-links-hp l2">
<li><a class="quick-link has-icon fa-icon" href="https://example.com" target="_blank"><i aria-hidden="true" class="fa fa-user-circle-o"></i>Link Name </a></li>
<li><a class="quick-link has-icon fa-icon" href="https://example.com" target="_blank"><i aria-hidden="true" class="fa fa-file-text-o"></i>Link Name </a></li>
<li><a class="quick-link has-icon fa-icon" href="https://example.com" target="_blank"><i aria-hidden="true" class="fa fa-check"></i>Link Name </a></li>
<li><a class="quick-link has-icon fa-icon" href="https://example.com" target="_blank"><i aria-hidden="true" class="fa fa-credit-card"></i>Link Name </a></li>
</ul>

To change each button’s icon and text, please the section below: Change the text and icon for an individual button

Variations available:

You can choose the colour, text alignment, layout (horizontal vs vertical), and shape (slimline or square) of your buttons.

Colours

There are several variations you can achieve by adding more terminology onto the ul class name – inside the speech marks.

By default, your class name must begin with “quick-links-hp l2” – which produces slimline buttons that will flow horizontally and be in the same color as the theme’s default button color.

Each theme has a primary, secondary, and tertiary brand color declared (so the buttons should already be one of these)…but to set the color of these buttons specifically, you can add is-primary, is-secondary or is-tertiary on to the ul class name. You can also add is-solid onto the ul class to reverse the colors chosen so that they appear as outlined with a solid white background (this is the hover state ordinarily, so it essentially reverses the behaviour).

If for example, the theme colours were blue (primary), green (secondary) and purple (tertiary) – the following classes would give you horizontal purple-outlined buttons with a white background:

<ul class="quick-links-hp l2 is-tertiary is-solid">

Text Alignment:

It’s also possible to center align the text and icon, by adding is-centered onto the <ul> class, as follows:

<ul class="quick-links-hp l2 is-tertiary is-solid is-centered">

Vertical layout:

Depending on the layout of your page, you may want to stack your quick link buttons vertically, to do so, it is simply a matter of adding is-vertical onto the class name.
Following the theme example above, the following <ul> class would result in blue-outlined buttons in a vertical layout:

<ul class="quick-links-hp l2 is-primary is-solid is-vertical">

Square (instead of slimline):

Finally, if a more square shape is required because you are utilising a deeper widget size in the grid layout – you can add to the ul class: is-square.
Following the same theme example the following <ul> class would result in green-block squares:
(These are block colours as there is no is-solid class on this example)

<ul class="quick-links-hp l2 is-secondary is-square">

These buttons styles are all controlled via the Theme but can also potentially be tweaked to look different to the other buttons across your site. For example, changing the font, color, border-width and such – however we do recommend keeping them on-brand with the rest of your theme for consistency.

The styles in a theme can only be edited by Interact, therefore if you would like to change the default styles of these quick links, it would need to be implemented by us. One example of such an edit may be to ask for the quick link buttons to cycle through the theme brand colours – rather than to all be the same. We have the code ready to add this for you, and is achieved by adding ‘is-multicolor’ onto the same <ul> class, once the styles have been added.

Removing the icons to have text-only links is an option in the HTML codetoo. This is done within the indiviudal <li> items themselves. Simply remove the classes ‘has-icon‘ and ‘fa-icon‘ on the <a> class, and everything start from the <i> tag, ending in </i> – basically, the parts in bold from this generic example here:

<li><a class="quick-link has-icon fa-icon" href="https://example.com" target="_blank"><i aria-hidden="true" class="fa fa-user-circle-o"></i>Link Name </a></li>

Another way you may wish to modify these, is to replace the font awesome icons with your own icon imagery uploaded into the Media Manager – this is something that would again need facilitating by Interact and demonstrating by us so that you can maintain these without our support going forward.

Finally, to add or delete more buttons in your list, you can remove an entire <li> item – or copy and paste one of the <li> to add duplicate another item before changing the values. If you just wish to have one singular button, you would need to replace “l2” with “l1” inside the <ul> class name.

Change the text and icon for an individual button:

For each individual button link item, you are able to edit the following for each:

• The icon
• The URL/hyperlink
• The text

Once within the Configuration tab of your HTML Widget, select the “Source” to see these within editor panel – see below.

Once in the source code, you can begin to edit the links:

• The first highlighted section “https://google.com” is the URL to which the link will go. Replace this with your desired URL.

• The icons here are pulled from a font library called “Font Awesome”, which you can browse here: fontawesome.com/v4/icons. Once you have selected your icon, copy the icon title including the (fa-) and replace it in the code . In the example above, we are using “fa-book” for a book icon, but some other examples are “fa-chrome” for a Chrome icon, “fa-check” for a checkmark etc. This class should also contain “fa” by itself followed by a space first – this means for a book icon, the full class needs to be “fa fa-book”.

• The final highlighted section in the example which reads “What’s on the menu?” is the text shown on your link. Replace this with your desired text.

This banner is a piece of HTML, styled via CSS, which is available for you to use within an HTML Widget. By default, you’ll see 4 color variations of this banner on your Widget HTML homepage. These banners are optional, and do not need to be used. As with any widgets, they can only be edited by users who have the permission to edit Homepages (ie. Power Users).

How to add a banner to a homepage

Add a new widget to your homepage and select the “HTML Widget” option. On the ‘Configure Widget’ panel, select the “Source” option within the editing panel and paste the below code before hitting “Save”. You can then change the Heading and Paragraph text to your desired text.

<div class="category-banner">
<h1>Banner Title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipscing elit. Phasellus luctus ante mauris</p>
</div>

Would you like a different style or color?

The style is controlled via the Theme, therefore the styling will be set up by us and we will consult with you. By default, we do set up three color options for you to utilize going forward that match the primary, secondary and tertiary options for the quick links. To set the color of the banner specifically, you can add is-primary, is-secondary or is-tertiary on to the div class name – i.e. class=”category-banner is-primary”.

This refers to templates within an HTML Widget only (within Homepages and Site Homepages). For more information about templates within the Page Editor/Block Editor (when building your content pages) please see the Interact Community.

HTML templates are available within the HTML Widget, and can be managed via the Control Panel (find ‘Templates’). They are a good way to re-use pieces of HTML content easily. These templates are entirely optional.

You’ll see that we have a added a few pre-loaded HTML templates for you to use. Power Users are also free to create their own HTML templates, and utilise the Manage Custom CSS area of the Developer Framework to style their template.

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. This way of working separates the code responsible for the look and feel from the code that adds the actual information on the page.

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“. These may be sufficient for your needs before you consider creating your own HTML.

Please bear in mind that we recommend any classes and elements you create do not conflict with our existing HTML elements or attempt to re-style them, since these items use styles within the underlying theme that are hidden from view.

Similarly, and crucially, you should avoid trying to re-style generic classes such as container and row when creating HTML content. 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.

Using AI to generate CSS and HTML

AI tools are becoming increasingly useful when creating custom HTML content and widgets for your intranet. However, it is important to note that AI-generated code may introduce class names, font definitions or styles that conflict with the existing Interact product.

AI may also generate broad CSS selectors, such as body and html, or introduce its own fonts, colours, spacing and other visual styles. These can inadvertently affect other areas of your intranet or create a custom widget that looks inconsistent with your existing theme, even when the code itself functions correctly.

When using AI to create custom widgets, we recommend being clear in your prompts and asking AI to:

• Avoid generic class names: Ensure any new classes are specific to your custom content and do not conflict with existing product classes. Avoid generic names such as row or container, and broad selectors such as body and html that could affect other areas of the platform.
• Avoid unintended conflicts with existing styles: Do not unnecessarily redefine existing product styles, theme styles, variables or font settings when creating custom widgets. Where changes to existing styling are required, we strongly recommend contacting Interact Support.
• Maintain visual consistency with your intranet: Custom HTML and ADK widgets may introduce their own fonts, colours, spacing or other styling that differs from your existing Interact theme. Even when the widget functions correctly, this can result in an inconsistent appearance. Where possible, aim to follow your intranet’s existing design conventions rather than introducing a separate visual style.
• Review and test your code: If in doubt, check any AI-generated HTML and CSS on a duplicate homepage or using a test user, where possible. Pay particular attention to how your custom content appears across different screen sizes and within the surrounding page layout.

Tip: When prompting AI, explain that the code is for a custom Interact widget. Ask it to use unique class names, avoid broad CSS or Bootstrap selectors, avoid introducing new font styles or overriding existing font settings, and keep all styling specific to the content being created. You can also ask AI to follow your existing intranet’s visual style rather than introducing a completely new design.

Note: We recommend using the Custom CSS area to store your CSS rather than placing it directly inside each HTML widget’s source code. Custom JavaScript should also be added to the Masterpage JavaScript area rather than directly on the page.

Important considerations when using Custom CSS

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, 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 add. A user who navigates the intranet using a screen reader, for example, could be impacted if you use CSS to try to add, hide, change or 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.

Finally, whilst we are happy to help where possible, it’s important to keep in mind that any code you add here is your own responsibility. We advise proceeding with caution when injecting your own code into our software.