Allow Projects to Customize Cogboard Colours and Fonts

[szymon-owczarzak]

The what

Provide a way for projects to customise the colours and fonts used in Cogboard.

Scope of the idea

For example:
Introduce the ability to control basic visual properties of the board by using a custom CSS style sheet versioned in a Git repository. Clearly define the possible scope of customisation by listing available CSS classes that shouldn't change between versions. These classes should be listed in a blank style sheet provided with the board, allowing a person with basic CSS knowledge to adjust the background colour, text colour and font family of certain classes of UI elements. (Must)

• The above applies to the following classes:
• CSS class for all tiles displaying a successful execution of something.
• CSS class for all tiles displaying a pending execution of something.
• CSS class for all tiles displaying a failed execution of something.
• CSS class for all tiles displaying a warning
• CSS class for all tiles displaying an informational message (default colour of a tile)
• CSS class that can be used to apply background styling for the entire viewport
• CSS class identifying the element wrapping all tiles to allow their positioning against the background.
• CSS class identifying all row headings
• CSS class identifying all column headings
• The ability to control colours via the user interface rather than by a custom style sheet (Won't have)

The image attached shows a Smashing dashboard styled in a similar manner to have Boden-specific branding. As you can see:

• The colours of all 'successful' tiles is a custom shade of green
• The colours of all 'failed' tiles is a custom shade of red
• The row headings' backgrounds are in a particular shade of yellow that's part of Boden's brand identity
• The column headings' backgrounds have a teal blue colour that's also part of Boden's colour scheme used internally
• One tile displays a PNG image and has a transparent background. This is used to display Boden's logo
• The whole table is shifted left in order to allow an image to be presented
• The whole document has a picture of a woman wearing a dress designed and sold by Boden as a background. This ability is to be introduced in CLAN6-218

The why

Benefits

Many of our customers sell cool products and rely on exciting visuals on their sites. Boards displaying build status can be somewhat dreary and uniform. It helps a team's morale if their monitoring experience is personalised. The Boden project uses a board with a branded colour scheme and the same fonts as the actual website.

Examples:

• Looking at the board displayed on a large screen, I will know which project space I'm in.
• Looking at the board, I will get a rough idea of what kind of customer the project is being developed for
• Looking at the board, I will see a sneak preview of what the client is working on as an organisation

Expected Outputs

List the outputs of your idea, for example:

• Ready to use instance of Cogboard that allows the features listed above to be used

Acceptance Criteria

• Admin can set [...]
• User can see [...]
• Widget will [...]

Additional context (optional)

Add any other context or screenshots about the feature request here.