A design theme gives a uniform look and feel to your intranet’s colors, fonts, and graphics. Since it’s managed in one place, using a design theme is an easy way to give your intranet a more professional look.
Once you choose your theme, it’s applied to existing pages as well as new pages that you add later. You can create many design themes, changing them with the season, company event, new quarter, etc.
In This Article
There are two ways of editing your site theme. The Theme option within the toolbar (version 14.5+) which quickly makes changes to your main intranet site, as described in the 'Theme' section of the Admin Toolbar article; or the Advanced Theme Editor described in this article, which gives you more detailed controls over your site layout, color and font choices, and allows you to change the design theme of all of your intranet sites (i.e. not just the Home site).
Watch a video of our UX designer walk through the Advanced Theme Editor.
Choose a Site to Theme
On the Design tab under Home Site Theme, select the Site you want to theme. The Home site is listed first in the drop down box, but every site which exists on the intranet is also listed here.
Click Advanced Editor.
At the top of your screen you'll see the theme currently in use for the site - in the above example, blue. In the drop-down you can Select a Theme if there are more options available. By default, you'll be making changes to the current theme, and changes can't be reverted. Best practice is to Save as new theme (bottom of your screen) before making changes.
Before changing colors, fonts, etc., we strongly recommend that you scroll down to Save Options, click the button for Save as new theme, give your theme a descriptive name, and click Save. This makes a copy of the existing theme, and all changes you make will now be saved to the new theme, leaving the original theme untouched so you can revert to it as needed.
How to Use Themes
Theme Builder is a sandbox - a place for you to experiment with design options. Make modifications to the current theme, create copies by using the Save as New Theme option, or switch between various pre-built themes to assess your choices. Your theme changes will only be made live if you click the Apply to Site button, or if you save changes to a theme that's currently the active site theme. If you have a test site for your intranet, that's the best place to experiment with themes, as you can see them in action on all types of pages, without other users seeing them before you're ready for viewing.
Down the right side of your page, you'll see several Themes boxes: Top Frame, Menu Frame, and Content Frame, as well as Mobile. The image below shows where those sections are on your intranet page. When you click a link in one of these boxes, a new set of options appears at the top of the page, and you'll be presented with the choices you can make for that design area.
Managing Site Themes
When managing site themes, it's important to consider the hierarchy of your sites. Themes created at the home site, which is at the highest level, can be applied universally across all sites. These are the conditions:
- The design theme is currently applied to the Home Site;
- The Team Site theme is “Home Theme”.
To “import” the Main Home Site Design Theme for other team sites to ensure brand consistency, follow these steps:
1. Edit the Home Site design to match your brand consistency and save it. This home theme from your home site can then be applied to other team sites within your intranet.
2. Navigate to the Design tab, select the desired Team Site from the drop-down menu, and click to choose a theme. Select 'home theme' from the drop-down menu and click apply to site. This will use the current Home Site theme and its future modifications to the Team Site.
Alternatively, you can save it under a new name in your team site design log as a way of importing that theme to the team site.
To save your home site design under a new name in another team site design theme:
1. Select the theme "home theme."
2. In the Save options, choose "Save as new theme & rename."
3. Save the theme.
4. Apply it to the site.
Please note that Design Themes created within any Team Site cannot be applied to other sites.
Also, if a Team Site has “Home Theme” applied to them, any design changes added to the Home Site will automatically affect said Team Site. Conversely, if a Team Site is using a specific Theme, not the “Home Theme”, any changes made to the Home Site theme will not be applied to it.
Top Frame
The Top Frame is like the site header, and is viewable on every page of the site. The area consists of:
- Company or intranet logo - always include this, because users expect to be able to click the logo to return to the home page.
- Background colour or image - choose a logo-complementary color or have some fun with images.
- Intranet toolbar - choose the options you'd like displayed by clicking the Design tab, then choosing Intranet Toolbar.
- Search - choose the options you'd like displayed by clicking the Setup tab and looking under Global Settings for Site Search.
Click within the Themes: Top Frame box for the options to upload a graphic or logo, change the background color or image, or change the font and link colors and style.
Add a Logo and Image
If you’d like a top frame which includes an image - similar to Walnut Point as shown above - here's what’s required.
- Click the Admin icon > Design tab and choose Global Site Layout.
- Under Global Layout, set a height for the Header (e.g. 200). Click Save.
- Under Global Width, set a fixed width for the site (e.g. 1250 pixels). Click Save.
Note: if you're using ‘expand to browser’, there's no recommended width for the header graphic, as the size depends on how large the user expands their browser, as well as their monitor resolution and size. We recommend against using this option, as designing can become a challenge without a specified width.
- Create your logo as a transparent GIF or PNG, matching the header height.
- In the Top Frame box on the side, click Upload a graphic/logo. Choose an image on your system and click Upload. The logo shows immediately in the Top Frame preview. If the logo is too large or small, you can adjust the size and upload a new version.
- Create a background image matching the dimensions in #1. Be sure to leave empty space both on the left for the logo to overlay, and on the bottom right for the Intranet Toolbar links to overlay.
- In the Top Frame box on the side, click background color/image. Under Top Frame Background choose Image and click Upload. Click the X to close and preview.
- Adjust the font color of the Intranet Toolbar links if needed, so the links are still visible.
Add a Logo and Colored Background
If you only have a logo, and no background image for the top frame, we recommend the following:
- In the Top Frame box on the side, click Upload a graphic/logo. Choose an image on your system and click Upload. The logo shows immediately in the Top Frame preview. If the logo is too large or small, you can adjust the size and upload a new version.
- In the Top Frame box on the side, click background color/image.
- If your logo background is transparent, you can use a complementary color as the background of the Top Frame.
- If your logo is on a colored background, use a graphic editor to get the hex code of the logo’s background so it will blend.
- Adjust the font color of the Intranet Toolbar links if needed, so the links are still visible.
Want to put your efforts into intranet content rather than design? One approach is to set your intranet font and colors as your main theme - then leave it alone. When you want to change design elements on your intranet to keep things fresh, just change your top frame header, which you can modify as needed in software such as PhotoShop. Create a new header jpg and upload to the intranet. Easy!
Menus & Widgets
Menu Frame refers to the menu widgets which appear on the left side of pages or sites. The colors for menu widgets are set in Advanced Theme Editor, and apply uniformly to all menu widgets, regardless of their location (in the left menu, in a mega menu, embedded on a page). If you want a menu to be a unique color, you'll need to go directly to that menu widget, edit, and change the Effect.
If you want menus and regular widgets to be the same color, you'll have to edit the widget theme separately, as this isn't done in the Advanced Theme Editor.
Widget colors come from the following Advanced Theme Editor options:
These colors correspond to the 3 options available in the Widget theme options:
Global Navigation Menu
The Global Navigation menu - often a mega menu - shows across the top of all intranet pages. If you want to change this bar, there are several main components: the color of the overall bar, the hover color when users mouse over an item, the border around the overall bar, and the background of the Mega Menu.
- Change the color of the Top Menu bar - requires two steps. Click the yellow icon for background color in Top Menu Section (1) and under BG Color either enter your desired color hex code or click on the color and choose from the color wheel. Note: if your font color doesn't work with the new menu bar color, change it here as well. The next step is to click the yellow icon for background color in Top Menu Bar (2) and enter the same hex code for BG Color as you used previously.
- Change the color of the navigation hover in the Top Menu bar - click the yellow icon for background color in Top Menu Section (1) and change Hover BG Color to a color that complements the Top Menu bar.
- Change the color of the border around the Top Menu bar - click the yellow icon for background color in Top Menu Bar (2) and enter a hex code for a border color. If you want the border to 'disappear', use the same hex code as the color of the Top Menu bar.
- Change the background of the Mega Menu - in the area for Top Menu Section (1), click the center icon which looks like a page. Enter a hex code for Item BG Color which will become the background of your Mega Menu.
Fonts & Font Colors
Font and Link Options are available for each of the frame areas in the Advanced Theme Editor.
Your main content font color should contrast well against the background so that it's easy to read. Black can sometimes seem harsh, so a dark grey (e.g. #333333) is often used.
There are three distinct colors set for links:
- Link, or resting color, which indicates that text is linked to a URL. The Link state should differ enough from the regular content font color so that users can easily tell that it is a link.
- Visited state, to indicate a link to which you've gone previously. The Visited color is generally a slightly darker version of the regular Link color. By setting a Visited color, you help users remember that they've been to that link before, which can help in finding content if they don’t remember exactly where they were.
- Hover, for when your mouse is pointing to the link.
Examples of color options for a theme:
Mobile Theme
The mobile site's logo, top frame background color (i.e. behind logo), and font size can be adjusted. The home screen icons, default text colors and white background color can't be changed for mobile.
To adjust the settings for mobile, in the Admin area click the Design tab, ensure Home is chosen in the drop-down menu, and click Advanced Editor. You can only adjust the Mobile Site theme when you're on the Home site.
Scroll down until you see Themes: Mobile Site on the right (1). A preview of the current mobile theme shows on the screen (2), which is the default logo and header color if no changes have been made.
To make a change to the mobile theme, click:
- upload a graphic/logo - click the edit pencil to replace the the site intranet logo which displays, top left, on mobile. In this area you can also choose to hide the logo.
- top frame background - the header color on mobile screens is pulled from the site header color. Note that if you choose a non-logo-background color and you don't have a transparent logo, you'll have the appearance of a logo block and a colored block beside it.
- font size - change the font size of site content on mobile
As you make these changes, the Mobile Theme Preview will adjust to show the new settings. When you're satisfied with your edits, click Apply to Site at the top of the screen to commit the changes.
Manage Themes
Want to rename an existing theme? Select it at the top of your screen, scroll down to Save Options where you'll see the theme name in the box. Rename it as desired and click Save.
Ready to delete an existing theme? Select it at the top of your screen, click the red icon to delete, and click OK in the popup box to confirm your choice.
From the IC Blog
Best Practices for Themes
- Stay true to your brand colors. Use 3-5 colors in total.
- Keep things subtle. Don't let your colors or design be a distraction from the content and information being displayed on the intranet.
- Use white or light colors for large background areas (i.e. Content Frame, Menu Frame, Application Header, Content Area) for legibility and a clean look.
- The editor lets you set the Top Menu Section and Menu Bar backgrounds independently, but we recommend setting them to the same color so you have a consistent color across the entire top bar, instead of two colors.
- If you change the background color of the Top Frame to a dark color, make sure you change the Top Frame fonts to a light color so the links are still visible.
Related Articles