Monday Minutes: Adding Color Customizations Per Branch

by Kelly McElligott on May 25, 2020

Tutorial Video on Customizing Staff Interface

The Code

Jessie and Kelly show how a multiple branch system can customize the look of their staff client depending on what branch the staff member is logged in at. This code was created by Lucas, our fantastic ByWater web designer!

This jquery can be added to your system preference: intranetuserjs

$(document).ready(function () {
 /* create key value pairs like this, branchcode: 'color' */
 const library_color_scheme = {
 M: 'MistyRose',
 N: '#9ef0b8',
 S: '#ecf274',
 W: '#a49ef0'
 };
 let librarybranch = $('.logged-in-branch-code:first').text();
 Object.keys(library_color_scheme).forEach(function (item) {
 if ( item === librarybranch ) {
 $('.gradient').css('background' , library_color_scheme[item]);
 }
 });
});

Altering the Code for Your Library

Breakdown on what a library will need to change for their specific library:

M: (this represents the library code). If your library code is several letters long such as MAIN, you would change the code to MAIN: '#528deb',

The number/letter combo that is defined between the single quotes:

#528deb

this represents the Hex code of the specific color. This can be changed depending on what color that the library would like to have the top area of the staff client to look like.

A Google Chrome extension that works well to grab a hex code is called ColorZilla. This will give you an eyedropper to hover over the color on a website and give you the correct hex code.

Note:

Punctuation in this code matters! If you make changes to this code and it doesn't work- check the punctuation! And if you are really stuck and you are a ByWater partner, reach out to us! We are always happy to help!

Note:

For the hex colors you can use color names (see MistyRose above)

Want to Try More jquery?

Lucas presented on more jquery tricks in this presentation:

5 easy jquery hacks for your Koha System