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.)
- Read about how to make configuration changes in the User Interface (UI) layer.
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
- Create a new folder within your tenant folder, named
- If this folder doesn't exist:
- 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:
- 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'scss
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:
- If needed, create a new folder within your tenant folder, named
- If this file and/or folder doesn't exist:
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:
- 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: - Change the
background
property to list the image file name and location. If the image was placed in theimages
directory of your tenant then the directory path can stay the same. - Change the
width
andheight
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: - As above, replace the
background
,width
andheight
properties.
It is possible to combine the shared selector properties for .header-menu-logo
and #name-header-login
so that a single change to background
, width
and height
would be required. This change may be added to a future version of CollectionSpace
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.