Changing the request link in Primo into a button
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.
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
- Branding the Delivery Tabs https://knowledge.exlibrisgroup.com/Alma/Product_Documentation/010Alma_Online_Help_(English)/060Alma-Primo_Integration/060Configuring_Alma_Delivery_System/090Branding_the_Delivery_Tabs#Creating_a_New_Skin
- How to Configure a CSS Skin for the Alma Services Page in Primo? https://knowledge.exlibrisgroup.com/Alma/Knowledge_Articles/How_to_Configure_a_CSS_Skin_for_the_Alma_Services_Page_in_Primo%3F