CSS snippets for Primo VE

May 2022 release, new feedback option

Collecting the CSS codes shared via the Primo mailing list.

work in progress

20.4.2022

For what it’s worth, I was struggling to get a :hover version for the color within the browser development mode.  The following CSS seems to work in Firefox:

prm-report-problem .report-container .md-button.report-problem-btn prm-icon md-icon path {
color: #hexcode;
}
 
prm-report-problem .report-container .md-button.report-problem-btn:hover prm-icon md-icon path {
fill: #hexcode;
}
some people also posted about being able to change the size and position via CSS, will add the code here if I find it again.
 

Edit April 2022: keeping the infos below for reference; not all of them are still visible in our Primo VE view.

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!

Main menu 

  • 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;
    }
     
  • Frame around active language grey, not black
    bcu-lang-switch-component .md-button.md-lang-button.active {
    border-color: rgba(27, 31, 35, 0.15);
    }

    Short title list

  • Make frame around the active pagination grey instead of black
    prm-page-nav-menu .current-bulk, prm-page-nav-menu .current-page {
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    }

    prm-page-nav-menu .current-bulk.hover, prm-page-nav-menu .current-page.hover {
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    }

    a.md-mini.md-button.md-primoExplore-theme.md-ink-ripple:hover {
    color: white !important;
    }

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;
    }

  • 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;
    }

  • Make include and exclude icon more visible
    see CSS here 

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, font, border and hover colour for ‘Back to locations’  
    .back-button.button-with-icon.zero-margin.md-button.md-primoExplore-theme.md-ink-ripple  {
    background-color: #F9F9F9 !important;
    color: #788390 !important:
    border-color: #FFFFFF !important:
    }


    .back-button.button-with-icon.zero-margin.md-button.md-primoExplore-theme.md-ink-ripple:hover  {
    background-color: #DDD !important;
    border-color: #FFFFFF !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;
    }
     
  • 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;
    }

  • 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 !important;
    border-color: #EBEBEB  !important;
    padding: 0px 23px 0px 23px !important;
    margin: 10px 0px 15px 15px !important;
    }

    .button-link.link-alt-color.zero-margin.md-button.md-primoExplore-theme.md-ink-ripple:hover {
    color: #6829FF !important;
    background-color: #EBEBEB  !important;
    border-color: #EBEBEB  !important;
    padding: 0px 23px 0px 23px !important;
    margin: 10px 0px 15px 15px !important;
    }
     
  • Change background and font color of item filter bar
    div.bar.filter-bar.animate-horizontal-swap.margin-bottom-small.layout-fill.layout-wrap.layout-align-start-center.layout-row {
    background-color: #F9F9F9;
    border: 0px ;
    color: #788390;
    }
     

  • Change styling of the location map link
    a.zero-margin.button-with-icon.button-link.md-button.md-primoExplore-theme.md-ink-ripple {
    background-color: #fff !important;
    border: 0px ;
    padding: 1em;
    }
     
    a.zero-margin.button-with-icon.button-link.md-button.md-primoExplore-theme.md-ink-ripple:hover {
    background-color: #A5D7D2  !important;
    border: 0px;
    padding: 1em;
    }

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

Example

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 16.11.2021