The Design tab is where you control how the intranet appears to users, both in terms of the visuals and the navigation. Appearance matters because users will be faced with their intranet on a daily basis, and design will help the intranet resonate with your employees.
In This Article
There are two ways of editing your site theme. The Simple Theme Editor which quickly makes changes to your main intranet site, or the Advanced Theme Editor which gives you more detailed controls for all of your intranet sites.
Simple Theme Editor
The Simple Theme Editor alters the design of your Home site only, and is accessed from any screen in your site. Click the edit pencil in the top right corner of your site, and you'll see the design toolbar options shown below.
The choices across the top of the page are arranged in recommended order. Click on any of these options to make a modification. Changes are shown on your site immediately.
- Logo - upload your company or intranet logo. For best results, use a graphic file with a transparent background in GIF or PNG format.
- Header Background - choose the background color of your logo, a complimentary color, or add an image. If you're going to add an image, first prepare it to your intranet's current dimensions. To see the sizes, in the Admin area click Design tab, and click Global Site Layout; here you can see your Header height under Global Layout, and your width under Global Width. If these dimensions are later changed, you'll need to upload an adjusted-size header.
- Site Width - for best results, we suggest using a fixed width (rather than expand to browser) of 1200 pixels.
- Site Background - select a background color or upload an image (note that if the image isn't large enough, it will be repeated, or tiled). If you don't like the image you uploaded, click the red circle icon to delete it.
- Colors - colors pulled from your logo are displayed as options. Try different options for your Menu and Header colors.
- Font - change your font or font size.
After making changes to your theme, either click the blue Save icon to save and exit, or the red X to exit without saving.
Advanced Theme Editor
The Advanced Theme Editor gives you significantly more granular control over modifying 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).
There are so many options in Advanced Theme Editor that it needed its own article, so when you're ready for design details, check out Design Tab: Advanced Theme Editor.
Home Page Design
When you click the link Home Page Design you'll be taken to editing mode of your site Home Page, where you can edit the widgets and other aspects of your Home Page. Learn more about the Home Page.
This is a quick and simple intranet edit. What do you want for the title displayed on a browser's title bar and on browser tabs? On the Design tab, click Browser Title, add your title, and click Save to finalize your choice.
Just as in Hansel and Gretel, breadcrumbs are the trail your site users can follow to help know where there are in the intranet site. Each level in the breadcrumbs is a link to a previous level in the intranet structure, for quick navigation.
When you click Breadcrumbs on the Design tab, the checkbox shows whether breadcrumbs are currently displayed; click Save button if you've made a change. Once enabled, pages will display the navigation above the main page content (see below).
Global Site Layout
In this area you can make global design decisions about site width, frame layouts, and layout dimensions. If you're looking to significantly alter the size of any of page elements, we would suggest trying the changes in your test environment first, to avoid potential impact on users; learn more about creating a test intranet environment.
The three sections below are provided as tabs under Global Site Layout. Note that recommended options are provided as the defaults.
Global Layout allows Admins to adjust sizes and layout for the header, top navigation menu, left column, right column, and other spacing on a page. The affected intranet areas are shown in the example image below.
All dimensions are provided in pixels; note that the right column can be sized in either pixels or as a percentage of the page. In addition to choosing the height or width of the areas shown below, you also have the option to adjust the amount of spacing between the elements on the page.
This page sets the intranet to a fixed pixel width, which will take on the size of your browser window. Our recommendation is to use the fixed width option as a best practice in designing your site, to avoid potential design challenges.
This setting adjusts the pixel spacing between each widgets in a row, and between rows of widgets as outlined in green in the example image below. Learn more about widgets.
What links do you want to make available to users on the top right of each screen? Below is an example of links you could show users (note that "Admin" won't appear to regular users). On the Design tab, click Intranet Toolbar and deselect checkboxes for items you don't want to appear. You also have the option of renaming toolbar links. Click Save when you've finished making changes.
Sitewide Icons include the Favorite Icon (i.e. favicon), which displays in the browser next to the intranet URL. If you don't add one, your site will by default show the Intranet Connections favicon, as shown above in the Browser Title image. If you'd like to customize a favicon to reflect your brand, Google "create favicon" and you'll see how easily it can be done.
In this area you're also given the option of adding your own icons for other intranet functions.