Documentation

Colors

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.

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

  • 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: 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

9.8Admin127261Header.png

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.

9.8.png

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. The first background of the four will be the default gradient used when no page header image has been added.

9.8Admin127261AddHeaderColor.png

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.

 

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.