Extra resources

We will configure many of the visual elements of your intranet for you, and others are yours to own. We will, of course, discuss this with you during your Onboarding process. We’ve put together the list below as a brief overview. If you’d like to know the specifications for any assets you may want to provide, please refer to the Assets section below.

*Specific components/areas are defined in the page: Your Intranet Theme

** In the Manage Custom CSS area (via Control Panel), any Power User can, in theory, add CSS to override the styling of the Interact platform. However, this is not recommended usage of this area. The scenario in which you may wish to use this area, is if you decide to add your own HTML content into an HTML Widget, and use the Manage Custom CSS area to style your own HTML content.

We recommend reading through the Your Intranet Theme section on this website, from which you can declare specific colors or styles for as many of the listed Theme elements as you’d like. Furthermore, providing your own mockup or intranet style guide is also an option (see our Customers’ Examples for inspiration) but we recommend discussing this with us before proceeding.

On this page we provide a few details on some of the specific steps along the Onboarding Design journey and your Support thereafter. For any more specific questions about processes and your resources or timeframes however, we recommend that you contact your Onboarding Manager/Customer Success Manager accordingly.

You can think of the ‘Theme’ as the top layer or ‘skin’ of your Intranet, which controls the visual style of the interface and your content – such as the colours, fonts, logo, and (in some instances) imagery. It does not control the functionality of your intranet, or the organisation of your homepage. The Theme is what makes your intranet look and feel as if it truly is your own. Below, you can see a breakdown of some specific elements which can be styled by the Theme:

View in full screen

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.

The examples are also within the Design area on the Community, follow the link here for the selection of homepage examples for your inspiration regarding the homepages’ visual look-and-feel.

We can set the font families which are used on your intranet. This could be just one typeface for all text, or two – one for the body copy and another for titles/headings. We can configure a web-safe font (ie. Arial), a free-to-use font (ie. Roboto), or a licensed/purchased font (ie. Neue Haas Grotesk, or perhaps your own custom-made brand typeface). We’ll discuss this with you, and below you’ll find a breakdown of the different approaches that could be taken.

Web-safe Fonts

“Web Safe” means that a font is likely to be present on a wide range of computer systems, and therefore can be viewed by almost everyone. The most popular and universally accepted web-safe fonts include: Arial, Verdana, Tahoma and Georgia. Learn more about Safe Web fonts. If you’d like to use a web-safe font on your intranet, just let us know which one.

Free-to-use fonts (ie. Google Fonts)

You may choose to use a free font family. A commonly used library of free-to-use fonts is Google Fonts. These fonts are ‘open source’ which means they are free to download and use wherever you wish, in both personal and commercial scenarios. If you’d like to use a Google Font, just let us know the name of the font and we can do the rest. If you’d like to use another free-to-use font, please let us know the details in our discussions.

Licensed fonts (ie. files, or Adobe Fonts)

You may have a licensed font, which you have purchased in order to use as part of your brand identity, or perhaps you have a custom-designed brand typeface. If you have the web license for your font, you will be in possession of the web font files – these are file formats which end in .WOFF, .SVG, .EOT or perhaps .OTF. We will ask you to share these files with us, so they can be hosted on your intranet.

You may use Adobe Fonts (formerly called Typekit) to host your licensed fonts. If this is the case, we’ll ask you to share the embed code for your chosen font families. The default embed code should look something like this: https://use.typekit.net/xxxxxxx.css. For more information on this, see this page from Adobe: https://helpx.adobe.com/uk/fonts/using/embed-codes.html

Please note: Any font you share with us must be licensed to permit web use. It is your responsibility to ensure that you have a web license for any custom font you choose to have uploaded to your intranet. Interact does not purchase fonts on behalf of clients.

Top tip: Keep legibility in mind! The body copy on your intranet, in particular, may not be particularly legible if a typeface is used which is very non-standard. We’ll review this with you if you would like to use a non-standard font family (ie. a very condensed font, or a font only available in uppercase).

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”.

Site Homepage (or “Landing Page”) examples are also within the Design area on the Community, follow the link here for the selection of examples for your inspiration regarding these pages’ visual look-and-feel.

Since the development of our page editor, the Block Editor, you can now easier create more compelling Content Pages. These examples are also within the Design area on the Community, follow the link here for the selection of Content Page examples for your inspiration regarding these pages’ visual look-and-feel.

The first step towards launching a successful intranet is for you to provide us with any branding and assets you wish to be utilized for the visual design of your intranet. The next step is to meet with us, during this call you can discuss the visual direction of your intranet with the Interact designer assigned to your project.

In order to be fully prepared for this call, it is important to read through the ‘What is a theme?’ section on this website.
You may also wish to view our Design Ownership area in our FAQ’s which helps to put the roles of both Interact and Client into context (regards the Intranet design).

After the call the designer you had previously met with will apply an initial theme to your intranet, you will then be invited the feedback on this.

Your initial design call

The initial design call is set up prior to your design starting the design. Your Onboarding Manager will arrange a call from our team who will ask questions to gain an understanding of your design theme requirements. The design is often shaped by existing branding elements, colour choices, and logos, as stipulated by your company’s brand guidelines. However, you may wish to take a departure from this, all of which can be discussed on the design call.

What to bring to the call

It’s beneficial to come to the call having read through this website and having discussed your objectives for the design internally with any stakeholders, creative designers, brand guardians that are involved with the project. The overall aim of the call is to agree a design brief for the Theme.

Attendees to this call should be those who will be making the decisions regarding the Theme and visual aspects of your intranet, and how the brand will be applied.

Questions to consider prior to the call:

• Have you got your assets prepared? (read below)
• Would you like to strictly adhere to the style/branding?
• Do you have a specific logo in mind for your intranet?
• Will you need to share your brand font files with us?
• Have you looked at any of our client examples? If so, which designs do you like and why?

Specific Assets to prepare

Color Scheme

When asked to provide your theme brand colors, logos and other branding elements, it is important to ensure you have the most up-to-date versions. Your Interact theme is not always connected to your external branding however, so the Color Scheme is the first thing we’ll clarify with you.

Intranet Name Logo

A logo is the centre piece of your brand, and also your Intranet. It is important to include your logo is in the format of high quality .png or .jpeg files.

Favicon

A Favicon is the icon that is associated with your Intranet URL, it will appear at the top of your browser when your Intranet is open, just as the Interact logo is at the top of your browser now when the design resource site is open. For more information click here.

Fonts files

Having the correct font family applied to your theme can often act as the cherry on the cake! That’s why it’s important to know which font family you would like to use for your theme and also to be able to provide the font files following the initial design call (.woff files are preferred). For more information, click here.

It is a good idea to consider if you would like to use separate fonts for the body copy and headings. Our designers can set these through the theme.

Additional brand assets (imagery/illustrated backgrounds)

You may want to consider providing the Interact Designer assigned to your project with some additional brand imagery or illustrated backgrounds. Doing so could really enhance your theme by really bringing your brand to life. A few areas where this could be implemented are:

• Profile Banner
• Zone Backrounds
• Synopsis/Search Background

The process our Design team typically supports you through:

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.

These are the icons that appear at the top of your web browser and on your iPhone home screen when bookmarking the Intranet site. We can attach these to your Theme during the design process. If you don’t have the resources in-house, we can use a segment or a smaller version of your intranet logo.

What is the recommended size for the Favicon?

Our recommendation is 32px by 32px.

Content will appear here to help you picture the overall workflow of a typical Design stream within your Onboarding experience.

In the meantime, please familiarise yourself with other information available on this site and reach out to us if you have any questions.

Naming your Intranet (in place of your regular brand logo) can have a hugely positive impact on user’s uptake, so we would typically recommend that you wait until a name is agreed and a logo is ready before our design process begins. If you are looking for some inspiration or advice, just ask your Designer. You have the option of using a different logo image which is also used in other areas, including Email alerts, Daily Digest emails and the Login page.
Some examples are provided below, and within our homepage examples.

What is the recommended logo size?

Our recommendation is a maximum width of 400px, and a maximum height of 150px. A rectangular shape tends to look best. The image should contain no dead space around the edges and be trimmed to the content.

Which file types are accepted for the logo?

The platform accepts PNG and JPG images. If you have an .AI, .PSD or .SVG file, these must be converted before uploading to the site and Interact can help with this.

The top navigation area on your site is known as the ‘Masthead’. This is the sticky header that sits full-width across the top of the site. There are a range of ways that we can customise the visual aspects of the Masthead via the Theme:

We can change the colour and background of this area, along with the colour of the text links, icons and their respective hover states.

Clicking each Masthead navigation item brings up either the Megamenu or dropdown menu, depending on how many items you have assigned to top navigation item. which allows you to browse and select between a number of different sites, pages categories and more throughout your Intranet. This can be managed by a power user in the admin section of your Intranet.

There are two types of menu – the Megamenu, and the simple Dropdown. On both menus, we can adjust the background colour, colour of links and headings and, on the Dropdown only, add a background hover colour.

Megamenu

Simple Dropdown

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.

Colors

We will ask you for at least three brand colors, which are typically provided as hexadecimal codes (ie. #0548AC). We will clarify your colors with you together on the initial design call, but you may specify these colors to us in advance.

Images

Please see the below list of specifications for image assets. Accepted formats include PNG, JPG, .PSD, Sketch, .AI and Figma.

Fonts

Purchased or Custom font: If using a licensed/purchased font family, you’ll need to provide the Web font files so they can be hosted on the intranet. File types typically include: WOFF, OTF, EOT, SVG. WOFF is optimal, to ensure widespread compatibility with web browsers. If using a font licensed through Adobe Fonts, please provide the default embed code for your project, and the font-family definitions to reference.

Websafe or Google font: If using a websafe font (ie. Arial) or one from Google’s library, just let us know which one you’d like to use.

The ‘Synopsis’ area, is the horizontal area that sits full-width underneath the Masthead of the site on certain pages, as well as the area behind the top search. We can change the colour of this area to give contrast to the rest of the site.

The default style for the Synopsis area displays a flat colour like the masthead above it, however it can be changed in a variety of ways. For example, we can also add a background image for you. This could be any brand asset such as a branded illustration, pattern or a photograph.

Another option for the top search, is to ‘flatten’ the search bar against the background to appear simply as a full-width strip.

This image stretches the entire width of the site/browser window, and the height of this image will depend on the specific situation. Therefore, it is not an image we can give an exact specification for, however we would go off a slightly slimmer version of the dimensions of the profile banner – 1600px width by 150px-300px height.

With our Support Team, we have dedicated resource to assist with any visual issues or requests relating to the Theme/customisation/brand of your intranet.

• Support includes the following features, which Interact makes generally available to its customers:
  • Incident Support – Identifying and troubleshooting problems in the Service 
  • Root cause analysis 
  • Assistance with issues during implementation 
  • Assistance with issues during Releases 
  • Identifying and creating bug reports 
  • Guidance around implementation and configuration 
  • Integration support between multiple Interact products
    
• Support excludes the following (this list is not exhaustive):
  • End-of-life features, Beta or Development features 
  • Features in preview only
  • Development questions or requests 
  • Assistance or advice in relation to third-party application integrations or third-party plugins where they are not supplied by Interact and do not form part of the service
  • Assistance, guidance or support for End-Users 
  • Product training
  • Support in languages other than English

Bespoke requests that are not possible out-the-box are also raised here for proper assessment, before an enhancement request with our Product Team may be submitted internally.

There are some areas where our ability to apply branding and visual customisations are more limited. We’ve outlined some of these areas below:

• Notification Emails
  It is not possible to customise the standard notification emails sent by the Interact platform to your users. We can help to adjust the logo, if needed. (You can however, send your own emails via the Block Editor, which allows you to build a page on the intranet and send it as an email.)
  
• Mobile App
  The Mobile App is built on a different framework to the web version of Interact, and as such we have more limited ability to influence the look-and-feel of the Mobile App. We can set the following colours within the Mobile App: Primary Accent Colour, App Bar Text and Background Colour, Text Colour.

We are able to configure the look-and-feel of your Intranet via various application settings – we’ve done our best to outline these within the “Your Intranet Theme” section of this site. If you’d like to change something about your intranet, and we do not have the available settings to make that change for you, we may explore the route of applying a ‘custom override’.

A ‘custom override’ is how we refer to any piece of custom code (usually CSS) which we’d potentially inject into your intranet, in order to force something on your intranet to look a certain way (for example, to change the styling or to hide it completely). We’re not always able to do this, but in the instances where we explore adding a custom override, we will discuss this with you along with any implications.

There are a few important things to keep in mind when considering a custom override. These include:

• Potential inconsistent experience: Interact cannot take custom overrides into account when testing new product releases, therefore the customisation may be impacted or reverted when a new Interact release is sent out. We will not be able to warn you of this beforehand.
• Future maintenance is not guaranteed: If your custom override is impacted by new product release, we can review this via a Support ticket and try to re-instate the achieved effect – however, we can not guarantee that the custom override can be re-applied.
• Limited scope of control: Any custom CSS added will usually only affect the web version of the Interact platform – it is typically unable to impact the Mobile App or other communication channels, such as emails sent out from the intranet.
• 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 or JavaScript, this text will not translate like other content on the intranet

With that in mind, our general recommendation is to avoid proceeding with custom overrides so as to ensure a more stable, accessible experience for your users. We will discuss any instance of a potential custom override with you, on a case-by-case basis.

This is the banner that appears at the top of a user Profile page, behind the avatar and is uploaded as a Theme Image.
We can use an image that is a colour (the default), gradient or any brand-related image of your choice.
We recommend a simple pattern or consistent image, so as not to distract from the content that sits on top of it.

If you do not have any brand assets you feel will work here, you could choose a stock image platform such as Unsplash.

Please note that the Profile Banner is one global image, which means that the same image will be used on all users’ Profile pages on the intranet.

Is there a recommended image size for the Profile page banner?

Our recommendation is a 4:1 ratio size to satisfy most screen sizes – A minimum width of 1600px is advised and therefore 400px height. Your image should not exceed 2000px width by 500px height. By default, the image will expand to fit the space. Keep in mind that the image will also scale up and down with the size of a user’s browser window and device, therefore it will not display at the same dimensions in all situations.

Yes. Under “Manage Homepages” you will see a homepage called ‘Widget List‘. This homepage contains all content widget layouts, displayed for you to have a quick glance. If your intranet does not have this homepage, please request this via your Onboarding Manager.

Content Imagery – What size and format should our Featured Images and general imagery be?

JPEGs are great for photos and colorful images because they compress the file size, making them quicker to load. However, this compression can reduce image quality and they don’t support transparent backgrounds.

PNGs are better for images that need to stay sharp and clear, like graphics or images with text. They also support transparency, which is great for layering images. The downside is that PNG files are usually larger, which can slow down loading times.

Overall, we always recommend using JPEGs first because intranet homepages can contain lots of information, and keeping your file sizes small helps manage loading times and performance. However, PNGs are perfectly acceptable in moderation when image quality and transparency are key.

For specific sizes; we recommend that for images within the content, such as blog posts, should be 600-800 pixels wide and under 200 KB. Hero Images/Banners, such as those displaying in the Full Width Carousel, should be uploaded sparingly, and be between 1500-1800 pixels with a maximum file size of 600 KB.

Are there recommended sizes for other specific images on the intranet?

Featured Image (aka. the image you attach to a Content Page)
Please see the dedicated Featured Images Guide.

Category pages
There are no specific size recommendations for the Category List page specifically. The Associated Images guide (see the previous answer) has our advice regarding Associated Images, and the Category List page pulls through images just like a Widget does, therefore the same advice applies. It is possible to choose from different layouts for your Category List page, some of which do not feature an image at all.

Profile Badges
If you are adding Profile Badges on your intranet, our size recommendation is 75px x 75px.

Blogs
If you are using the Blog feature, there are different layouts to choose from. Our recommended size for the hero Blog image is as follows:

• ‘Cover Background’ layout – 1200px width x 512px height
• ‘Cover Split’ layout – 600px width x 400px height
• ‘Cover Inline’ layout – 1042px width x 600px height

Is it possible for different users to have different Profile banner images?

No, not at this time. It is only possible to have one banner image, which will display on all profiles on the intranet.

Is it possible to change the default image on Blog?

No, not at this time. It is intended to be replaced within each unique post, rather than be a starting suggestion for your post’s main image.

Where do I set the alt text for a Featured Image?

Generally, decorative images do not require an alt tag. Given that the intention and best practice for Featured images is to upload decorative images, an alt tag is not required.

The Application Panel is a feature which can sit on the left or right side of the Intranet, is sticky, and runs down the full height of the browser. The background color and text/icon color of the panel can be customised by an Interact Designer via the Theme.

We typically recommend using a dark colour, to ensure white icons and text remains readable. But this is not necessary if you don’t intend to source/style your icons to be white.

You can add, remove and change the icons at any time via the Control Panel. We do not control these icon images for you.

What is the recommended image size / file type for an Application Bar icon?

Our recommendation is a transparent PNG file with dimensions of 80px by 80px.

Yes, this is possible via the “Manage Custom CSS” page within Control Panel. For more information, see the Add your own custom code section.

Widgets are the boxes via which content is displayed on a homepage. Each widget serves a different purpose and the content displayed is determined by how it is configured.

As part of the Theme, we can set a universal style for all widgets to specify the title colour, title background, and typical font styles within the content (links, headings, body copy).

The homepage named ‘Widget List‘ is a homepage populated by default which displays all our content widget layouts for you to review how your theme is rendered across them all.

By default, the Rewards feature will use Interact’s own core blue colour on the background panel and our default rewards icon. This can be styled according to your brand palette – or it can also be a unique departure from the rest of your theme palette, should you wish to make it stand out. A simple icon can be designed by us, but if you would like to opt for something more bespoke, you can supply an image. Our size recommendation is 200px x 200px.

Your theme’s functional buttons can be styled by an Interact Designer.

Inside the theme, we can specify the buttons’:

• Border radius
• Border width
• Border, text and background colour
• Hover colour

The font used for your buttons is the same as your body copy and link font, the text weight of your button text will also be the same as the weight of your links.

There are multiple types of buttons on your site, these include; primary, information, warning, error, and complete buttons. Each type of button can be edited separately, but we only recommend requesting changes to your primary buttons if you are unhappy with the styling used. If you would like to request changes to your buttons, it is worth considering that any buttons are intended to stand out on the screen and any colour chosen should reflect this.

Please note: this section pertains to the functional buttons in the UI. You can also add your own custom buttons into the HTML widget, such as our provided Quick Links.

Interact does not offer a ‘dark mode’ version of the software at this time. Some alternative options include:

1. Within the intranet, we can add CSS Theme overrides to help you create a dark homepage. This utilises dark backgrounds on the homepage zones. All other pages of the intranet would retain their default white background.
   
2. For users of Chrome, it has a built-in dark mode. Type chrome://flags/ in to the address bar and search for ‘dark mode’.
   
3. It is possible to install a third-party add-on into the platform. These typically consist of a pop-out dialog box which allows users to select their own settings (such as high contrast colours or large text). Some popular examples are Userway and AccessiBe. Whilst these overlays are not designed specifically to provide a ‘dark mode’, many of them do have a dark/high contrast/inverted visual option. See the screenshot below for an example. Please note that Interact does not endorse, nor is affiliated with, any third-party solutions.

Your one-stop shop for help, advice, tips and much more is our Community! Head to community.interact-intranet.com to explore much more. For more technical guidance, you can take a look at our Developer Portal at developer.interactsoftware.com

By default, your Intranet logo will automatically be displayed on the login page, above the login form – however, you now have the ability to upload a custom logo to be displayed on the login page only. Again, our recommendation is a maximum width of 400px, and a maximum height of 150px.
You are also able to upload a custom background image for your login page. The recommended format for this image is a PNG or JPEG with a 3:2 ratio – we’d suggest a minimum width of 1000px and a maximum width of 2000px. We also recommend using a pattern or simple image, as the container will adapt to different browser window / screen sizes.

Whilst there are no configuration options to add custom text on this page, if there’s something you’d like to add we will review your request.

Within the Mobile App area of the Control Panel – there are fields under which you can specify the colors that you would like the Our Native App to include. It is a seperate platform to our Desktop/Responsive version – so the full range of theme items mentioned on this site will not be available with more high-level choices required instead.

Mobile options to specify:
Text & Navigation Menus – Text, Background and Accent/Buttons
Application Bar Menu – Text and Background
Login Page – Text (Title and Body) (Buttons use color specified in first section)
Images – Login Background and Application Bar Icons

For a deeper explanation of the Mobile App, you can read our article on the Community.

By default we will choose your primary and secondary ‘desktop theme’ brand colors for you.

There are a few types of Broadcast that can be utilized on the intranet. The most common type is shown below, and is called a Broadcast Banner. In terms of styling, we customise the following:

• Background color and text color – we can change these to any color
• Icon – we can switch the icon to another icon from the Font Awesome 4.7 library

Our Block Editor includes a color palette for users, which can be configured to include custom colors. At the start of the Onboarding process, we will update these colors to reflect your brand palette. For guidance to change/add/remove a color yourself, see community.interact-intranet.com/page/11893.

The Footer is where your social icons will appear (if you opt to use them). The breadcrumb navigation for the site will also show here by default, but it can also be placed immediately below the Masthead. The main attributes that can be changed are the footer background colour, the positioning of the information (centered or aligned to the sides), and the colour of the breadcrumbsl links, the social icons and their respective hover colours.

If included in the footer, the breadcrumb navigation will include a small logo file which could be the same or different from the logo in the Masthead, see the screenshot examples below.

Whilst technically not a default part of the Theme, but rather the content, adding a background to one one of your Homepage Zones is a great way to enhance the overall design, draw focus on a particular piece of content and divide up your homepage. The backgrounds on your Homepage Zones can be easily edited by either a member of the Interact Design Team, or by yourself. Regardless of who makes these changes, it is always important to check if your new Zone Background is accessible for users with difficulty reading from a screen.

How to add a Background to a Zone

If you would like to learn how to update a zone background yourself, you can do so on the Interact Community here. If you would like to add a gradient to your zone background, this can be done via an image. Alternatively this could be done by an Interact Designer via the theme or in the developer framework.

Ensure that your new background image or colour is accessible

There are a few ways to check that your new zone background is accessible, and there are multiple tools and apps that you can find online to do accessibility checks for you. Generally, you want to ensure that any text that sits directly on top of a Zone Background has a high contrast in colour. For example, a dark background would work best with very light or white text on top of it, and vice versa.

Changes to text or widget colours will require a design request.