How to add your logo

Task Description

This document describes how to add your museum's logo to CollectionSpace pages.

Prerequisites

This work requires knowledge of how to:

• Make new directories, copy files, and perform similar tasks in your operating system.
• Run commands at your operating system's command prompt.
• Edit text files.
• 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)

Procedure

All the examples here will require changes to be made to one or more CSS files, in the css directory within your tenant folder.

The default CollectionSpace logo is a placeholder for a branded image such as an institutional logo or personal image. This image can be easily changed by changing its name and dimensions within your museum's (tenant-specific) copy of cspace.css, the main CollectionSpace CSS stylesheet file.

Find your tenant folder

(Or instead see Finding your tenant folder.)

Add your logo image to your tenant folder

• Within your tenant folder, find the images folder.
  • If this folder doesn't exist:
    • Create a new folder within your tenant folder, named images
• Copy your logo image file into the images directory within your tenant folder.

After following these steps, you will then have this folder/file structure within the UI layer source code folder, inside the src/main/webapp/tenants folder:

  {your tenant folder}
    images
      {your logo image file}

• Also note the file name and image dimensions. (To find the image dimensions, open the image file in a graphics application or in a web browser.)

Modify a CSS stylesheet to reflect your logo image

• Within your tenant folder, find the css/cspace.css file.
  • If this file and/or folder doesn't exist:
    • If needed, create a new folder within your tenant folder, named css
    • Copy 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:

      cp ../../defaults/css/cspace.css css/cspace.css
      

      Or from the top of the ui source code tree:

      cp src/main/webapp/defaults/css/cspace.css src/main/webapp/tenants/mymuseum/css/cspace.css
      

After following these steps, you will then have this folder/file structure within the UI layer source code folder, inside the src/main/webapp/tenants folder:

  {your tenant folder}
    css
      cspace.css

• Open the cspace.css file in a text editor (or your other favorite application for editing CSS files).
• Search for a reference to #name-header-login. This is the ID selector for the logo on your tenant's Sign In (aka login) page. The declaration block for this selector should be similar to the following:

  #name-header-login {
      margin-top:30px;
      background: #fff url("../images/header-logo.png") no-repeat left top;
      width:270px; 
      height:51px;
  }
  

• Change the background property to list the image file name and location. If the image was placed in the images directory of your tenant then the directory path can stay the same.
• Change the width and height properties to match the actual width and height of your image (typically measured in pixels). It is necessary to provide the correct size of the image so that it will fit in the page header.
• Additionally, search for a reference to .header-menu-logo. This is the logo class selector for all other pages. The declaration block should be similar to the following:

  .header-menu-logo {
      margin-top:15px; 
      float:left; 
      background: #fff url("../images/header-logo.png") no-repeat left top; 
      width:270px; 
      height:51px;}
  

• As above, replace the background, width and height properties.

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) login page. For details, see the Test section of Creating your new tenant.
• Login as a user in your museum (tenant).
• Inspect the logo shown on the landing page.

If it doesn't work

• Clear your browser's cache.
• Check to see if the correct tenant files were edited.

See Also

About the Message Bundle