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.

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

  • Add background colour to the different sections. Via Union College.
    prm-full-view-service-container {
    display: block;
    background-color: #F9F9F9;
    padding: .8em .8em .1em .8em ;
    border-radius: 3px ;
    border-left: 1px solid #D6D6D6  !important; } 

    Border-radius is the same that we use for the tiles on the start page.
    Use the same background colour for the breadcums in Collection discovery.

     
  • Make library name bigger, add space below
    prm-location-items .tab-content-header .md-title {
                   font-size: 1.3em;
                   padding-bottom:  10px;
      }

     
    Make call number bigger, change colour. Via Albion and Hope.
    prm-location-items div.tab-content-header span[ng-if=”$ctrl.currLoc.location.callNumber”] {
                   color: #6829FF !important;
                   font-size: 1.3em;
                   margin-left: 5px;
      }
     
    Change colour of availability statement, add space above
    prm-location-items div.tab-content-header p[ng-if=”$ctrl.currLoc.location.availabilityStatement”] {
                   color: #685E5E !important;

                   padding-top: 10px;
      }

     
  • 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;
    }
     
  • Change background colour of success message after placing a request, via ZHdK 
    .bar.success-bar {
    background-color: #D2EBE8 !important;
    border-color: #D2EBE8 !important;
    }

Patron account

  • In overview tab, only due dates in the past should be red.
    That is not possible, changed to lila, via Salesforce case 00952123
    prm-loans-overview .overdue-line-overview {
            color: #6829ff   
    }

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: #FFF !important;
    }

  • fix styling of the breadcrumbs – also visible in the full title display 
    prm-collection-navigation-breadcrumbs-item .md-button.button-as-link.link-alt-color {
    box-shadow: none;

    color: #14413C !important;
    background: #F9F9F9 !important;
    line-height: 24px;

    }
     
    prm-collection-navigation-breadcrumbs-item .md-button.button-as-link.link-alt-color:hover {
    color: #14413c !important;
    background: #F9F9F9 !important;
    line-height: 24px;

    }

    Other tips


    Last updated 14.5.2021