There are many options available to brand the platform. The most used images are captured here in support of optimal setup of Innovation Central modules.  

  • It is recommended that all pictures, images and videos uploaded are kept to web-quality and as small as possible. When using Adobe to create images, use the Save for web option.
  • Graphics files can be in .JPG, .BMP, .PNG or .GIF format, saved at 72 - 100 DPI resolution.
  • Optimizing graphics file size can significantly reduce page load times for site visitors.
  • Using the recommended pixel dimensions listed below also prevents pixelation, distortion, or other undesirable display results.


File-naming:

  • Keep the naming convention sensible so files are easy to find in the FileStore module.
  • Keep file names as short as possible.
  • Avoid blank spaces in file names. Use dashes or underscores between words. Do not use other punctuation in file names except for a period before the file type extension (e.g., .JPG)


When editing images, save with a new file name (i.e., do not just replace the existing image since there can be caching issues).




Event Detail Images


ImageLocationRecommended SizeSettings Options
Event hero imageIn the event panel within the Visual collaboration themeHeight 380px, Width 660px
Event thumbnail imageShows the event within the PortalHeight 150px, Width 250px



Styles: Cobalt


ImageLocationRecommended SizeSettings Options
Banner LogoDisplays above the portal banner to the left of the global navigation barHeight 24px (scaled to this), Width 500 px (max)
Banner Image
(Banner Background Image)		In the rectangular bar above the navigation barHeight 130px (default, but adjustable), Width resizes to fill the space across the top in Cobalt

Suggestion: Use an image with dimensions of 1,600px by 130px, in which you use the middle 1,100px for text and images, works best

Page Background ImageDisplays in the space outside the white main content column
  • Can be set to/not repeat
  • Can select the point to display the image from on the page



Styles: Black


ImageLocationRecommended SizeSettings Options
Banner LogoDisplays in the rectangular space above the Navigation BarHeight 40px (default but adjustable)
Banner Background ImageDisplays in the rectangular space above the Navigation Bar. The title and logo are displayed in front of the image, while the background color is displayed behind the image.Height 90px,  Width 960px
  • Can set image to repeat for a tiled effect
  • Display position can be adjusted
Navigation Bar: Background ImageThis is a picture that covers the navigation bar and is displayed in the tab border when the tab is not selected
Usually matches with the Banner Background Image or is a plain color
Navigation Bar: Selected Tab Background  ImageColor variation/picture to indicate which tab is currently selected
Identifies which Navigation tab is active
Page Background ImageDisplays in the space outside the white main content column
  • Can be set to repeat or not
  • Can select the point from which to display the image on the page



Challenge Images


ImageLocationRecommended SizeSettings Options
Challenge imageWhen Visual Themes is in use, the first image attached to each challenge displays in the carousel, which displays to the right of the event details space just below the navigation buttons.Height 300px, Width 634pxImages scale to Width 724px x Height variable using text to fill the space

 


Mobile Images


ImageLocationRecommended SizeSettings Options
App iconDisplays on the mobile Home Screen and in the top banner of the Mobile app.Square 180px or higher 
  • Ideally with a transparent background or color that matches the banner background color.
  • Event Hero and thumbnail images work best in Mobile when uploaded with a 4x3 ratio.