Page Location:
Admin > Prepare For Your Event > Styles


The Styles page is where you set preferences for how the site pages look, including colors, font styles and images.

_______________________________________________________________________________________

Field Descriptions

Style 

  • Start From Theme: Use a pre-set style theme, or start with the set colors and then modify selections below.
  • Custom Configuration: Make all your selections individually.
  • Custom CSS: Overwrite the standard Cascading Style Sheet. Only those experienced with CSS should use this option.
  • Black Layout: This option is only available if your Innovation Central deployment was prior to Version 12 (it is the default since then). This is the only style option that allows changes to the Global Navigation bar.
  • Cobalt: This option became available with Innovation Central V13.50, which provides enhanced style and navigation options, including: navigation icons for Analytics, Modules, Portals and Log Out; Profile headshot display in the Collaborate Space; Enhanced Filter, Sort, Search buttons and Comments box.If you don't see the Cobalt option, then please contact Support.  Click here to override the Cobalt colors. 
Theme: This field is enabled when the Start From Theme option is selected above. Choose a color from the list and 3 variations of the color theme are displayed. The fields below display the colors that will be used for each element. You can change any of these individually if desired.


Global Navigation options are only available when the Black Layout option is selected in Styles.
  • Background Color: Color displayed behind the text in the Global Navigation bar, as shown in the image below.
  • Link Color: Color of hyperlinks in the Global Navigation bar.
  • Text Color: Color of regular text in the Global Navigation bar.
  • Imaginatik Logo: Choose to display the Imaginatik logo in white or black text, or none at all.
Banner Title is the label to be displayed above the Navigation bar, as shown in the image below.
  • Event Name: Use the name configured in Event Details.
  • Custom Text: Identify your own label. Leave the Custom Text box empty to have no banner title displayed.
  • Position: Choose whether the banner title is aligned with the left, center or right side of the banner area.


Banner Logo: To include an image in the banner space above the navigation bar, as in the above example, select an image file by clicking the image button here. Follow the prompts to either select an existing image or upload a new image, and then click OK.
  • Position: Alignment of the image within the banner area.
  • Height: Size of the banner area in number of pixels.

Banner Colors

  • Background Color: Color of the area behind all text and images in the banner area.
  • Background Image: Image to display behind the text and images in the banner area. Note that this is different from the Banner Logo above. Select an image file by clicking the image button here. Follow the prompts to either select an existing image or upload a new image, and then click OK.
  • Position: Alignment of the background image within the banner area.
  • Repeat: Use this option to display the image multiple times across the banner area to create a tiled effect.
  • Text Color: Font color for the Banner Title identified above.

Navigation Bar

  • Background Color: Color of the area behind the tabs in the Navigation Bar. Note that the color shown may not display if a Background Image is designated below.
  • Background Image: Image to display behind the text in the Navigation Bar. Select an image file by clicking the image button here. Follow the prompts to either select an existing image or upload a new image, and then click OK.
  • Tab Background Color: Color displayed on tabs in the Navigation Bar when the tab is not selected or being hovered over (the cursor is pointing to the tab but not selecting the tab). In the example above, this is the lighter green color.
  • Tab Background Image: Image to display behind the text on tabs in the Navigation Bar when the tab is not selected or being hovered over. Select an image file by clicking the image button here. Follow the prompts to either select an existing image or upload a new image, and then click OK.
  • Tab Background Hover Color: Color displayed on tabs in the Navigation Bar when the tab is being hovered over. In the example above, this is the lighter green color.
  • Tab Background Hover Image: Image to display behind the text on tabs in the Navigation Bar when the tab is being hovered over. Select an image file by clicking the image button here. Follow the prompts to either select an existing image or upload a new image, and then click OK.
  • Tab Corner Color: Color of the tab outline in the Navigation Bar. This is usually the same or similar to the Tab Background Color.
  • Tab Text Color: Color of the text displayed on tabs in the Navigation Bar when the tab is not selected or being hovered over.
  • Tab Text Hover Color: Color of the text displayed on tabs in the Navigation Bar when the tab is being hovered over.

Fonts and Text Colors

  • Global Font: Font style for all text, including text in guidance blocks and menu items. If the name of the desired font is not available, identify a font name in the Specify Custom Font field.
  • Headings Font: Font style for page headings and titles, including Challenge titles, Idea titles and widget titles.
  • Banner Font: Font style for text in the banner area above the Navigation Bar.
  • Main Content Headings Color: Font style for the text in the primary display area.
  • Menu Headings Color: Font style for the main headings in the menus displayed in the right-hand panel.
  • Menu Sub-Headings Color: Font style for the sub-headings displayed in the right-hand panel.

Link Colors

  • Link Color: Color of hyperlinks that have not been visited by the current user or are not being hovered over.
  • Link Hover Color: Color of hyperlinks when they are being hovered over.
  • Link Visited Color: Color of hyperlinks after the current user have visited them.
  • Back to Space Link Color: Color of the links that return you to the main Space page, as shown in the red box in the example below.


Page Basics

  • Page Background Color: Color to be displayed outside the primary content area, as identified in the example below.
  • Page Background Image: Image to be displayed in the page background area.
  • Frame Width: Width, in pixels, of the main content area plus the menu area.
  • Main Content Percentage: Percentage of the Frame Width for the display of the main content area.
  • Side Menu Percentage: Percentage of the Frame Width for the display of the menu area.

Additional CSS
This option allows you to identify CSS to be used in addition to the standard CSS. Note this is different from the Custom CSS option, which is used instead of the standard CSS. Only those experienced with CSS should use this option.