CSS snippets

  1. Main menu 
  2. Start page
  3. Short title list 
  4. Facets
  5. Patron account
  6. Hiding labels
  7. Banner at the top of each page
  8. Look at others’ CSS
  9. see also separate pages

/* 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);
}

Start page

/* Frame around the elemets on the start page (example) */

prm-search > div > md-content, md-card.default-card._md.md-primoExplore-theme {
border-radius: 0px;
border: solid 1px #e9e9e9;
}

/* Links on the start page */

md-card-content a, prm-service-details a {
color: #006A6F !important;
}

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

/* Add space between resource type and bibliographic description */

prm-brief-result.result-item-details.layout-column {
padding-top: 12px;
}


also works in full title display

/* List of versions (example) */

div.md-toolbar-tools.layout-align-start-center.layout-row {
background-color: #FAFAFA;
}


h2.toolbar-title {
color: #6829ff;
}


/* Text ‘n versions found’ */

span.prm-notice {
font-size: 1.1em !important;
color: #6829ff !important;
}

Facets

/* Set the font of the facets to normal, not bold */

.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 

Patron account

/* In overview tab, only due dates in the past should be red */
/* That is not possible, changed to purple, via Salesforce case 00952123 */

prm-loans-overview .overdue-line-overview {
        color: #6829ff   
}

Hiding labels

/* Primo VE */

In most cases, labels can be hidden by setting the display text via Alma to NOT_DEFINED.
If you need to distinguish between different views, use the View Labels table.
If your interface has more than two languages: you can change and save the first two at once, but then have to save each additional language separately.

[if you need to add a link, see js snippets]

https://knowledge.exlibrisgroup.com/Primo/Knowledge_Articles/Adding_a_top_warning_bar_to_Primo%2F%2FPrimo_VE

/* More padding, and font not bold */

body::before {
content: “Text comes here. Not HTML coding / links possible”;
display: inline-block;
background: #D2EBE8;
text-align: center;
padding: 15px;
width: 100%;
font-weight: normal;
}

/* Hide banner from Central customization package without showing your own */

body::before {
display: none !important;
}

Look at others’ CSS

See here

see also separate pages

Show main menu link on Primo VE Service pages / CARLI


These tweaks are working with ‘Inherit from Central package‘ activated = you probably won’t need to use !important so often.

3.2.2023