The Colors section is the second tab on the Theme editing page. To access the options on this page, go to the Admin panel: User interface section > Theme page.

Colors are populated based on the primary and secondary colors that you choose when initially creating a new theme. Previews of the colors selected show on the right of the various theme elements and will update as you choose different colors.



Colors can be specified by entering a Hex color code for the desired color in the # field beside the theme option (to learn more about color codes, see HTML Colors). You can also pick your own custom colors by clicking on the current color associated with a particular theme element to open the color picker. In the color picker you can select a color from the color customizer, enter a Hex or RGB color code, or select a preset color. To close the color picker without making changes, just click outside of the color picker box.

The preview on the right will update immediately with your color selections to give you an idea of what your colors will look like when applied to the intranet.

Bulk color change

This feature allows you to completely change the look of the theme by only selecting two new colors. The Primary and Secondary colors you select will be applied to different parts of the interface. Experiment with a different color scheme easily. Choosing new colors through the Bulk edit color window will override any customizations made on the Color tab.

• The new Primary color will be used for buttons, the background of the main navigation, the background of broadcast banners, and links. Another color is calculated from the primary color for the hover color of buttons and links.
• The new Secondary color will be used as the background when a tab or part of the main navigation is selected, and as the site accent color.

Some colors are not affected by Bulk edit color, such as the main navigation text, body font, page header backgrounds, status indicators and news item background.



To change the Theme colors in bulk using Bulk edit color:

1. Click Bulk edit color in the top right of the Theme editing page. The Bulk edit color pop-up window will open showing the current Primary and Secondary colors.
2. Click the current Primary color shown in the window to open the color picker. Select a color from the color customizer, enter a Hex or RGB color code, or select a preset color. Click outside the color picker to close it.
3. Click the current Secondary color shown in the window to open the color picker. Select a color from the color customizer, enter a Hex or RGB color code, or select a preset color. Click outside the color picker to close it.
4. Click Done. The colors on the color tab will be updated based on the new Primary and Secondary color you selected.
5. Click Save in the top right to save the bulk color changes you have made, or click Cancel to revert back to the previous colors.

Main navigation

The Main navigation section of the Colors tab allows you to customize colors for the main navigation tabs you see on every page of your ThoughtFarmer Intranet.



You can specify the background and text colors for the main navigation tabs in their normal and selected states. A tab is "selected" when you visit the page that tab takes you to, or any pages underneath that page.

Background

We recommend making the Normal and Selected colors the same, or the Selected and Underline colors the same. Avoid having different colors for each of the Normal, Selected and Underline options.
 

• Normal: Background color of the main navigation tabs when not selected.
• Selected: Background color of the main navigation tabs when selected - a tab is selected when you are visiting the page the tab link takes you to, or subpages of that page.
• Underline: Underline color at the bottom of a main navigation tab when it is selected or hovered over.

Navigation text

• Normal: Text color of the main navigation tabs when not selected or hovered over.
• Hover: Text color of the main navigation tabs when hovered over.
• Selected: Text color of the main navigation tabs when selected - a tab is selected when you are visiting the page the tab link takes you to, or subpages of that page.
• Text option: Letter case of the text of the main navigation tabs. Select the radio button AA to display main navigation titles in all capital letters. Select the radio button Aa to display main navigation titles with the capitalization used for the titles on the individual pages.

Button

Where the button field colors are applied:

• Normal: Background of action buttons, or action text, on the site and in pop-up windows. Header colour of pop-up windows. Color of icons in edit mode.
• Hover: Buttons, Action text and certain edit mode icons turn this color when the user hovers over them.

Font color

Where the font color field colors are applied:

Body

• Normal: Many areas of text - includes page body content, comments, text in Cards.

Link

Normal and Visited links can be the same color value, or different values. As an example, you can check your organization's public website to see how links are treated there.
 

• Normal: Links in body copy, Activity streams and other cards; user profile links in News; current page in the SuperNav.
• Hover: Links turn this color when hovered over.
• Visited: Links in body copy turn this color when the user has visited them.

Accent

The site accent colour is used for certain components and icons on Cards such as Activity, Poll, Quotes, and Group Members. It is also used to underline the selected tab in the Application Toolbar and Activity Cards.

Page header background

The Page header background shows on pages where no page header image has been added. The default colors are the same regardless of which primary and secondary colors you select when you first add a theme. The page header background colors can be changed as desired by entering Hex color codes or using the color picker.



You can add multiple page header background colors for users to choose from on edit page. Choosing different colors for top and bottom will create gradient page header backgrounds. If the same color is selected for top and bottom, the headers will be a solid color instead of a gradient. Be sure that every page header background color or gradient works with the page header text color set on the Typography tab of the Theme panel. The first background of the four will be the default gradient used when no page header image has been added.



See Page header images for settings that control using images and photos from galleries in page headers.

Status indicator

Status indicators show beside page titles in the left navigation and search results to indicate that pages are Private, to be published in the Future, recently Updated, or New. The default status indicator colors are the same regardless of which primary and secondary colors you select when you first add a theme. The status indicator colors can be changed as desired by entering Hex color codes or using the color picker. The colors chosen for the indicators often need to work on white and light grey backgrounds.



Where the status indicator field colors are applied:

• Private: Text color of the label Private (shows in the left navigation and search results beside the page title of pages whose security settings are set to private).
• Future: Text color of the label Future (shows in the left navigation and search results beside the page title of future published pages before the published date).
• Updated: Text color of the label Updated (shows beside the page title of updated pages for the time period specified by the config setting dates.maxAge.updatedItem).
• New: Text color of the label New (shows in the left navigation and search results beside the page title of new pages for the time period specified by the config setting dates.maxAge.newItem).

News item background

The News item background color shows in place of an image for news posts that don't have a thumbnail image that are displaying in News: Grid View and News Carousel. The news item background color can be changed as desired by entering a Hex color code or using the color picker. There is a gradient overlay on the News item background to help text legibility when images are used. The color used here will always appear darker due to this overlay.

Broadcast banner colors

The broadcast banner colors are used when a broadcast is sent that includes displaying a banner at the top of intranet pages. By default, the banner is the same color as the main navigation. It can be customized using the color described below. To learn more, see Broadcasts.


 

• Background color: Used for the background of the broadcast intranet banner.
• Text color: Used for the text of the broadcast in the intranet banner.