1. Knowledge Base
  2. Learning Lab
  3. For the all-powerful admins

Look and Feel in edison365ideas

Some examples of how Look and Feel settings affect the platform

The file you link to needs to be saved to the Documents section of the SharePoint site. This ensures that all users have shared access to the file and it can load for everyone.You can find the Look and Feel menu in the Admin panel. Once opened you'll see various options to manipulate the UI.

Table of Contents

Theme Tab

Design Mode

Footer Text

Custom CSS URL

Colours

Header Tab

Logo

Header Background Image

Tagline

Navigation Link


Theme Tab

Design 1 has square edges and category tags on Challenge cards.

Design 2 has rounded edges for UI elements and the description on the Challenge card.

The footer is repeated at the bottom of every page. 

Note: The example text is from the input above. You can choose any custom text to display there.

Tip: For rich text options, swap to Design 2.

For edison365 ideas you have the option to customize the UI with a CSS file. This file should be saved to the SharePoint site collection under Documents so that all users have permissions for it and the platform is uniform against. 

Common customizations include swapping default icons, change font colours, and element colours.

Default Icon

image

Custom Icon

image

Default Font Colour (Grey)

Custom Font Colour (Black)

Primary, Secondary, and Tertiary Colours affect various UI elements throughout the program. Here are some examples:

Design 2 Home Page

Design 1 Footer

Header Tab

 

Note: The file you link to needs to be saved to the Documents section of the SharePoint site. This ensures that all users have shared access to the file and it can load for everyone.

Note: The file you link to needs to be saved to the Documents section of the SharePoint site. This ensures that all users have shared access to the file and it can load for everyone.

The header image runs across the top of the frame. If you leave it blank it will show up as white (as above).

Here's another example (size: 1404px by 360px)

Warning: The header image will repeat if it is too short.

Warning: If your header image is white, then the white font of the tagline will render it invisible. Make sure to add a custom CSS file to change the font color, or change your header image.

With this configuration...

...you get this result.

Warning: If your header image is white, then the white font of the tagline will render it invisible. Make sure to add a custom CSS file to change the tagline font color, or change your header image.

With a trailing space...

The navigation link by default (Back to Site Collection) takes you back to the SharePoint site the app is installed on. It resides across the top banner, above the header image. 

If the "Show Navigation Link" box is not checked it will remove the banner, like so:

Here's a custom configuration example: