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

    Change the color of tabs My Account, Queries & e-Shelf

    • Article Type: General
    • Product: Primo
    • Product Version: 4

    Desired Outcome Goal:
    Customize the color of Primo tabs to match institutional "branding" colors

    1. Add the following code to the "customized" css.

    .EXLMyAccountTabsRibbon div li.EXLMyAccountSelectedTab {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #HEXCOLOR;
    background-image: url("../images/");
    background-repeat: repeat-x;
    border-color: #HEXCOLOR;
    border-image: none;
    border-style: solid;
    border-width: 1px 1px 2px;

    2. Update the "background-color" and "border-color" with the desired HEXCOLOR.

    3. Save a local copy of the customized css.

    4. Use the file uploader tool to write the css changes to the server.

    5. Click on Sign-in or My Account link in Primo to see changes.

    Additional Information

    Primo customers like to customize the color of the Basic and Advanced Search buttons in Primo for branding purposes.
    This css code allows for additional Primo tabs to be updated to match the search buttons.
    Use Web Developer tools in Firefox or Chrome to identify which elements to change.
    It is also possible to test changes by 'temporarily' updating the css using Firebug or Chrome Web developer tools.

    Category: Front End- Primo

    Subject: Look and Feel - Primo

    • Article last edited: 6/30/2014