The Banner type Resource Recommender can be used to present a page-width banner with user controls (i.e. X to dismiss for session). Like other resource recommenders, the Banner RR can be configured to Display Always or only when triggered by specified keywords. The default configuration includes large graphics and high contrast mouse-over styling with limited text room.
The following CSS from Justin Dise at University at Buffalo, SUNY (Primo VE) removes or hides the majority of the default style (including graphics and mouseover behaviors) to present a simpler text-oriented banner. The Main Title is used as headline and the description field is expanded; the Name field is hidden from view. Example
/*
--------------------------------------------------
RESOURCE RECOMMENDER BANNER
--------------------------------------------------
*/
/* Remove gradient background */
.__gt-sm prm-banner-card-content .md-button.arrow-link-button .button-content:focus .banner-title, .__gt-sm prm-banner-card-content .md-button.arrow-link-button .button-content:hover .banner-title, .__gt-sm prm-banner-card-content .recommendations-title.hover > span > span .banner-title, .__gt-sm prm-banner-card-content .recommendations-title:hover > span > span .banner-title, .__gt-sm prm-banner-card-content a:focus .banner-title, .__gt-sm prm-banner-card-content a:hover .banner-title, .__gt-sm prm-banner-card-content prm-tags-list .md-chips .md-chip .md-chip-content:hover strong .banner-title, .__gt-sm prm-banner-card-content prm-tags-list .md-chips md-chip .md-chip-content:hover strong .banner-title, .__gt-sm prm-banner-card-content prm-tags-list md-chips .md-chip .md-chip-content:hover strong .banner-title, .__gt-sm prm-banner-card-content prm-tags-list md-chips md-chip .md-chip-content:hover strong .banner-title, .md-button.arrow-link-button .__gt-sm prm-banner-card-content .button-content:focus .banner-title, .md-button.arrow-link-button .__gt-sm prm-banner-card-content .button-content:hover .banner-title, prm-tags-list .md-chips .md-chip .md-chip-content:hover .__gt-sm prm-banner-card-content strong .banner-title, prm-tags-list .md-chips md-chip .md-chip-content:hover .__gt-sm prm-banner-card-content strong .banner-title, prm-tags-list md-chips .md-chip .md-chip-content:hover .__gt-sm prm-banner-card-content strong .banner-title, prm-tags-list md-chips md-chip .md-chip-content:hover .__gt-sm prm-banner-card-content strong .banner-title {
background: transparent;}
/* Set width for name, main title, and description */
prm-banner-card-content .banner-content md-card-title {width: calc(100% - 80px);}
/* Add padding to bottom of Resource Recommender */
prm-resource-recommender {padding-bottom: 10px;}
/* Banner hover overrides (adjustments to match normal styling)*/
.__gt-sm prm-banner-card-content a:hover .banner-subhead, .__gt-sm prm-banner-card-content a:focus .banner-subhead, .__gt-sm prm-banner-card-content div:hover .banner-subhead, .__gt-sm prm-banner-card-content div:focus .banner-subhead {
display: block !important;}
/* Remove min. height for banner */
prm-banner-card-content .banner-content {
min-height: auto !important;
max-height: none !important;}
/* Replace background image with gradient and other styling */
.banner-content.banner-cover-image {
background-image: linear-gradient(to right,#316187 20px,#efefef 20px) !important;
height: inherit;
padding-left: 35px;
border-radius: 5px 0 0 5px;
background: #efefef;}
/* Adjust banner padding */
prm-banner-card-content .banner-content md-card-title-text, .__gt-sm prm-banner-card-content a:hover md-card-title-text, .__gt-sm prm-banner-card-content a:focus md-card-title-text, .__gt-sm prm-banner-card-content div:hover md-card-title-text, .__gt-sm prm-banner-card-content div:focus md-card-title-text {
padding: 15px 0 25px 0 !important; }
/* Remove banner content span padding */
prm-banner-card-content .banner-content md-card-title md-card-title-text span {
background-color: transparent;
color: #3a3a3a;
padding: 0 !important;}
/* Adjust banner content padding */
md-truncate.bigger-title.main-text-banner.md-truncate, md-truncate.banner-subhead.main-text-banner.md-truncate {
padding-left: 10px !important;}
/* Adjust banner text wrap */
md-card-title-text.md-truncate, md-truncate.banner-subhead.main-text-banner.md-truncate, md-truncate.bigger-title.main-text-banner.md-truncate, .__gt-sm prm-banner-card-content a:hover .main-text-banner, .__gt-sm prm-banner-card-content a:focus .main-text-banner, .__gt-sm prm-banner-card-content div:hover .main-text-banner,
.__gt-sm prm-banner-card-content div:focus .main-text-banner {
overflow: hidden !important;
white-space: break-spaces !important;}
/* Hide banner display name */
.banner-display-name {
display: none !important;}
/* Adjust banner main title font */
prm-banner-card-content .banner-content md-card-title md-card-title-text .banner-title, .__gt-sm prm-banner-card-content a:hover .banner-title, .__gt-sm
prm-banner-card-content a:focus .banner-title, .__gt-sm prm-banner-card-content div:hover .banner-title, .__gt-sm prm-banner-card-content div:focus .banner-title {
color: #000 !important;
font-size: 20px !important;
font-weight: 500 !important;
line-height: normal !important;
opacity: 100% !important;
position: relative !important;
text-transform: none !important;
word-spacing: normal !important;}
prm-banner-card-content .banner-content md-card-title-text .bigger-title, .__gt-sm prm-banner-card-content a:focus .bigger-title, .__gt-sm prm-banner-card-content a:hover .bigger-title, .__gt-sm prm-banner-card-content div:focus .bigger-title, .__gt-sm prm-banner-card-content div:hover .bigger-title {
margin: .25em 0 .7em !important;}
/* Adjust banner description font */
prm-banner-card-content .banner-content md-card-title md-card-title-text .banner-subhead {
font-size: 14px !important;}
/* Link text max width */
prm-banner-card-content .banner-content .url-text {max-width: 115px;}
/* Adjust bottom position of banner link text */
prm-banner-card-content .banner-content .url-text {
background: #005bbb;
bottom: 0 !important;}
/* hide RR banner on handheld devices */
@media screen and (max-width: 600px) {
.main-banner-content {
display:none;
}
}21.4.2023
Primo views 