Tech Blog

Changing the request link in Primo into a button

Avatarby James Miller Roanoke College and Hollins University June 5, 2019
PRIMO

Use Case

As a user, I am familiar with online retailers that have buttons for actions like “Add to My Cart” or “Place an Order.” I expect that same experience when I request a book or item in Primo.

Goal

Modify CSS to transform the request link in Primo New UI into a button in the Primo New UI.

Summary

  • Configuration time: 15 – 30 min
  • Configuration difficulty: Low to Medium
  • Changes Live in Primo New UI: Immediately

System Specs

  • Primo New UI
  • Alma
  • Notepad ++ or your preferred editing tool

Workflow

Go to Alma>Settings>General>Delivery System Skins

If you haven’t already, create a new skin. There are directions below for creating a new skin specifically for modifying the delivery tabs in Primo.

Branding the Delivery Tabs

You can use the existing CSS template file (mashup_new.css) to make changes to the Request link’s look and feel OR simply create a new blank CSS file, name it mashup_new.css, and copy/paste the divs below to change your request link into a button.

Below is a modification of the request link div to change the link to a button and create a hover effect. You can copy/paste this CSS into a blank CSS file, name it mashup_new.css, and use it for a delivery skin.

/* Request Link

Make the Request link(s) a more prominent call-to-action.

*/

.iframeHeaderContent input.requestOption {

background-color: #ede49e;

border: none;

border-radius: 6px;

color: #2D2DFD;

cursor: pointer;

padding: 1em;

text-transform: uppercase;

margin-right: 1em;

}

.iframeHeaderContent input.requestOption:first-of-type {

padding-left: 1em; /* Override the left-justification of first item */

}

.iframeHeaderContent input.requestOption:hover {

background-color: #f5fcff;

box-shadow: 0 0 0 1px #3d6e94 inset;

color: #3d6e94;

border-radius: 6px;

font-weight: bold;

}

.iframeHeaderContent input.submitAsLink.requestOption.popout {

padding-right: 1em;  /* undo the reduced padding when popout is following */

margin-right: 0.2em; /* reduced space when a popout is following */

}

.iframeHeaderContent input.submitAsLink.requestOption:not(:first-of-type) {

border-left: medium none; /* undo the separator bar */

}

The code above (contributed by the fine folks in Connecticut) creates the button below.

Ideally, you should test changes to your request link in your browser (using Firefox web developer tools such as Inspector), before making the changes live. When you have the look and feel you like for the request button in your browser, copy the div and the desired changes. Open up the mashup_new.css file, add the changes, and follow the directions in the linked knowledgebase article “Branding the Delivery Tabs” so the new “skin” will appear in the delivery tabs.

Ex Libris Relevant Guides and Release Notes

Leave a Reply