CSS snippets for Primo VE

We’re live with Primo VE.

There are some CSS snippets that I like but that don’t warrant a post in the Developer Network or the Knowledge Center.

These tweaks are working with ‘Inherit from Central package’ activated.
Some of them will only be activated in April 2021.

Thank you for your help, JC!

Make some links more visible

  • Make ‘Sign in’ link bigger and change font colour.
    button#signInBtn {
    color: #6829ff !important;
    font-size: large !important;
    font-weight: 500 !important;
    }

  • Colour of patron’s name after signing in
    button#signInBtn span.user-name {
    color: #6829ff !important;
    }
     
  • Make ‘Show more items’ more visible (example). Triggered by patron feedback
    .button-link.link-alt-color.zero-margin.md-button.md-primoExplore-theme.md-ink-ripple {
    color: #6829ff !important;
    background-color: #fff;
    padding: 0px 23px 0px 23px !important;
    margin: 10px 0px 15px 15px !important;
    }

    In an earlier version the gap between the list of volumes and ‘Show more’ was gone, but this messes with the new display of multi volume works introduced with the March 2021 release. Because CSS.

Facets

  • Set the font of the facets to normal, not bold. Via Fribourg.
    .section-content .md-chips .md-chip.wrapping-chip strong.facet-title.layout-row {
    font-weight: normal !important;
    padding-top: 0;
    padding-bottom: 3px;
    }

  • Change the colour and hover of ‘Show More’  
    Also influences ‘Remember all filters’ and ‘Save query’
    .md-button.button-as-link.link-alt-color {
    color: #006A6F !important;
    font-size: 100% !important;
    }


    .button-as-link.md-button.md-primoExplore-theme.md-ink-ripple:hover {
    background-color: #ddd !important;
    }

Full display

  • Make call number bigger. Via Albion and Hope.
    prm-location-items div.tab-content-header span[ng-if=”$ctrl.currLoc.location.callNumber”] {
                   font-size: 150%;
                   margin-left: 5px;
      }
     
  • No ‘Search inside’ for print only journals. Via SUNY’s brilliant FAQs.
    .search-within-p-only { display:none; }

  • Background and hover colour for ‘Back to locations’  
    .back-button.button-with-icon.zero-margin.md-button.md-primoExplore-theme.md-ink-ripple  {background-color: #F3F3F3 !important; }


    .back-button.button-with-icon.zero-margin.md-button.md-primoExplore-theme.md-ink-ripple:hover  {
    background-color: #ddd !important;
    }

  • Hover for link in ‘log in’ message
    .button-with-icon.zero-margin.md-button.md-primoExplore-theme.md-ink-ripple:hover {
    background-color: #A5D7D2 !important;
    }

  • When title has one item:
    Make ‘Loan’ and ‘Digitization’ bigger, change background colour, add border
    prm-request-services .md-button.button-as-link
    {
    font-size: large !important;
    font-weight: 500 !important;
    background-color: #D2EBE8 !important;
    border-style: solid;
    border-width: 1px;
    border-color: #A5D7D2;
    }

  • When title has several items: 
    • Make ‘Request’ and ‘Digitization’ bigger, change background colour
      prm-location-items > md-list > md-list-item > div > div > div > div > prm-service-button > button
      {
      font-size: large !important;
      font-weight: 500 !important;
      background-color: #D2EBE8 !important;
      }

    • Show the information for each item on one row
      prm-location-items > md-list > md-list-item > div > div > div.layout-wrap {
      flex-direction: row !important;
      justify-content: flex-start !important;
      max-width: 100% !important;
      }

       
  • Change font of ‘Other loan and request options’ . Via Fribourg.
    .medium-uppercase-bold {
    font-size: 1.3em;
    text-transform: none;
    font-weight: 300;
    margin: 5px !important;
    }

    To collapse this element, see CARLI’s instructions.
     
  • Change opacity of the left frame 
    .md-dialog-container.fixed-container {
        background-color: rgba(68, 68, 68, .7) !important;
    }

Collection discovery

I’ll add a link once we’re out of the testing phase

For more CSS for collection discovery see SUNY’s FAQ page.

  • Make font white.  
    .collection-info {
    color: #ffffff !important;
    }

  • Background of the breadcrumbs – also visible in the full title display 
    prm-collection-discovery-view-switcher .md-button.is-active, prm-collection-discovery-view-switcher .md-button.is-active:focus, prm-collection-discovery-view-switcher .md-button.is-active:hover, prm-collection-navigation-breadcrumbs-item.root-item .md-button span, prm-collection-navigation-breadcrumbs-item .md-button.button-as-link.link-alt-color {
    background-color: #F3F3F3;
    }


    Last updated 27.3.2021 – some of it will only be activated in April 

PS – if you’re new to Primo VE I can wholeheartedly recommend Laura Jacob’s webinar series.
I’m not a fan of learning by video, but she covers a lot of points at a good pace.