How to change the site color scheme

Task Description

This document describes how to change the site color scheme on CollectionSpace pages.

Prerequisites

This work requires:

• Knowledge of how to edit text files.
• Knowledge of how to edit CSS files.

Also helpful is:

• Familiarity with how to use your browser's web development tool. This will help you to debug and test as you go, and can help speed up your work.

In addition, if you have not already done so:

• Create a tenant for your museum. (A tenant is a space or partition on a CollectionSpace system for your museum or collection, within which you'll make most or all of your configuration changes.)
  • Creating your new tenant
• Read about how to make configuration changes in the User Interface (UI) layer.
  • Configuring CollectionSpace's User Interface (UI) Layer - An Overview

Layers involved

To carry out this task, you will need to make changes in the following CollectionSpace layer(s):

• User Interface (UI)

Background

All the examples here will require changes to be made to the various CSS files found in the css directory or lib directories within your tenant. (All or nearly all of these changes will likely be made to CSS files in the css directory, as CSS files in the lib directories provide styles pertaining to third-party libraries.)

CollectionSpace uses a simple color palate across the various record pages, links, buttons, fields, borders and more. Every one of these elements can be edited by changing the appropriate CSS selectors.

For example, say you want to change the color scheme of the record pages from a blue-oriented scheme to one that is green (for a herbaria museum). In this example we will change the following colors: collapsible record tabs, field container background and the record title text.

Before making changes

This image shows the current HTML color codes for each section we wish to edit:

Finding which styles to change

The simplest way to know which CSS styles you want to edit, and where in one or more of CollectionSpace's CSS stylesheet files you will need to edit them, is to use a browser's web development tool to visually examine each element.

With many of these web development tools, after you've opened the tool, you can right-click on an element on the page, and then choose "Inspect Element" (or a similar menu option) to view the CSS selectors that apply to that element, including any properties which set its color.

Examples of styles you can change

By using a web development tool, you will be able to identify the CSS files, line numbers and selector blocks that need changing. For example (with a past version of CollectionSpace, noting that the line numbers below may have changed in subsequent releases), all of the following colors can be changed by editing color properties within your tenant's copy of the cspace.css file:

Record title

Record type description

Record group toggle

Content background

Making your changes

Next, we will (hypothetically) change the color for each element in this list to one of our choosing. Let's choose these colors:

Record title

Record description

Record group toggle

Content background

Here is the page after making the above color changes:

Procedure

Find your tenant folder

(Or instead see Finding your tenant folder.)

Modify one or more CSS stylesheets to change site color schemes

• Within your tenant folder, find the css folder.
  • If this folder doesn't exist, create a new folder within your tenant folder, named css
• Identify each of the relevant CSS stylesheet files in which you'll need to change color styles. See Finding which styles to change for tips on doing this.
• For each such file, copy it from the CollectionSpace defaults/css folder into your tenant folder's css folder.
  • Here's one representative example, which demonstrates copying the default cspace.css file into your tenant folder's css folder. E.g. on a Linux or Mac OS X system, from within your tenant folder:
    Or from the top of the ui source code tree:

• Open each stylesheet file in a text editor (or your other favorite application for editing CSS files).
• Make the necessary changes to color styles in that file, as described in the Background section.

Copy your changes to the CollectionSpace server

(Or instead see Configuring CollectionSpace's User Interface (UI) Layer - An Overview.)

Test

After following the procedure above, use a web browser for the following steps:

If you are not already logged into your museum (tenant) on your CollectionSpace system:

• Visit your museum's (tenant's) Sign In (login) page. For details, see the Test section of Creating your new tenant.
  • Login as a user in your museum (tenant).
  • Inspect the colors shown on any relevant record page. Check whether they now exhibit your expected colors.

If it doesn't work

• Clear your browser's cache.
• Check to see if the correct tenant files were edited.
• Check for syntax errors.
• Check that no other CSS selectors are overriding the changes you make. This may include checking for !important declarations which, in theory, prevent that rule from being overridden.