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).
Styles: Theme
Image | Location | Recommended Size | Settings Options |
Banner: Top Bar Image | Displays across the top of the page above the navigation bar | Square 180 x 180 px or higher | Picture is optional instead of a banner color. |
Banner: Sub Bar Image | This is the navigation bar. | Height 24 px (scaled to this), Width 500 px (max) | Picture is optional within the navigation bar. |
Footer | Displays at the bottom of all pages. | Standard config = Imaginatik copyright footer | Custom footer can be applied using HTML and/orJavaScript. |
Styles: Black Layout
Image | Location | Recommended Size | Settings Options |
Banner Logo | Displays on the mobile Home Screen | Square 180 x 180 px or higher | Ideally with a transparent background or color that matches the banner background color. |
Banner Background Image | Displays across the top of the page above/alongside the navigation bar. | ||
Navigation Bar: Background Image | The picture that covers the navigation bar. | Usually matches with the Banner Background Image or is a plain color. | |
Navigation Bar: Selected Tab Background Image | Color variation/picture to indicate which Tab is currently selected. | Identifies which Navigation tab is active. | |
Footer | Displays at the bottom of all pages. | Standard config = Imaginatik copyright footer | Custom footer can be applied using HTML and/or JavaScript. |