Skip to main content
ExLibris
  • Subscribe by RSS
  • Ex Libris Knowledge Center

    How do I change my request link in Primo into a button? (For Primo NEW UI)

    Created By: James Miller
    Created on: 5/29/2019



    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.

    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

    The Request link’s appearance in Primo is determined by the div

     .iframeHeader input[type="submit"].

    Below is a modification of this div to change the link into a button, with notes in parentheses and changes in bold.

    .iframeHeader input[type="submit"]

    -webkit-appearance: none;

        -moz-appearance: none;

        background-color: transparent;

        border: none;

        color: #2D2DFD;  (This is the link color)

        font-size: 2em; (This determines the size of your font and the button)

        border-top: 1px solid #CCCCCC;

        border-right: 1px solid #CCCCCC;

        border-bottom: 1px solid #CCCCCC;

        border-left: 1px solid #CCCCCC;

                    background-color: #ede49e; (This is the background-color of your button)

         }

    The border properties give the link the rectangular button edge.

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

    If the request link text appears slightly off-center in the button, you need to make slight modifications to the otb_mashup_newversion=May2019 (the css file name displays the current date). This is a separate CSS file.  OTB means out of the box.

    To access the otb_mashup CSS file you’ll need to go to a browser, right click on the request button and select inspect or inspect element (depending on the browser) and locate the CSS sheet, otb_mashup_newversion=May2019 (current date). Copy the CSS sheet in its entirety into a new CSS file.

    The padding of the linked text inside the button is determined by the div

    .iframeHeaderContent .requestOption:first-of-type

    Ideally, you should test padding adjustments in your browser (using Firefox web developer tools such as Inspector) before altering the otb_mashup file. After testing in the browser you can edit the otb_mashup file. After you are done editing, you’ll need to put the otb_mashup file on a server somewhere so that your version of the otb_mashup overrides the default version of this file. One option is to place otb_mashup file into the customization package in the Back Office.  Go into the Backoffice>Deploy and Utilities>Customization Manager and download your customization package.  Drop your otb_mashup file into the CSS folder in the customization package, and upload the package. Remember to deploy the changes in the Back Office. You can now link to the otb_mashup file in the mashup_new.css file.  

    Place this line at the top of your mashup_new.css file.

    @import url("https://YOURINSTITUTION-primo.hosted.exlibrisgroup.com/primo-explore/custom/YOURVIEW/css/otb_mashup.css");

    Troubleshooting

    My changes to the otb_mashup file aren’t showing up in Primo

    • Test the linking to your otb_mashup file by copying and pasting the link your included in your mashup.css file into a browser

    Ex Libris Relevant Guides and Release Notes