Branding CSS Snippets
Branding
Check out this article first if you haven't already to see how to apply these snippets to your campaign, click here
Make YouTube videos big
/* Make YouTube videos big - Item description */
@media only screen and (min-width: 450px){
gb-item-description div iframe.ql-video{
min-width: 390px;
min-height: 530px;
width: 100%;
height: 100%;
}
}
@media only screen and (max-width: 450px){
gb-item-description div iframe.ql-video{
min-width: 200px;
min-height: 200px;
width: 100%;
height: 100%;
}
}
/* Make YouTube videos big - Info page */
@media only screen and (min-width: 450px){
gb-infobooth-content div iframe.ql-video{
min-width: 390px;
min-height: 530px;
width: 100%;
height: 100%;
}
}
@media only screen and (max-width: 450px){
gb-infobooth-content div iframe.ql-video{
min-width: 200px;
min-height: 200px;
width: 100%;
height: 100%;
}
}
Make all images uniform size within the item view screen
/* Make all images uniform size within the item view screen */
gb-item-image-gallery .g-image-item {
object-fit: cover !important;
}
Make all item list images cover the image box
/* Make all item list images cover the image box */
gb-list-item .gbListItemImage img {
object-fit: cover !important;
}
Change item cards' background colour
/* Change item cards background colour */
.item-container gb-list-item mat-card {
background-color: blue !important;
}
Add ‘Starting at’ before every starting bid
/* Add 'Starting at' before every starting bid */
.no-bids .price-and-badge-container .list-item-price:before {
content: "Starting at ";
}
Change background to solid colour for info page and items
/* Change background to solid colour for info page and items */
gb-item-detail .gb-item-detail,
gb-item-detail .gb-item-detail .item-action-card,
gb-item-detail-toolbar .item-toolbar-container {
background-color: #111 !important;
}
gb-infobooth-content {
background-color: #111;
}
Whiter background in item descriptions and infopage descriptions
/* Whiter background in item descriptions */
gb-item-description .description-container {
background-color: rgba(255, 255, 255, 0.8);
color: black;
}
gb-item-description .description-container .item-description {
padding: 20px;
}
/* Whiter background in infopage descriptions */
gb-infobooth-content {
background-color: rgba(255, 255, 255, 0.8) !important;
color: black !important;
}
Change item purchase/bid box border colour
/* change item purchase/bid box border colour */
gb-item-action-container .mat-card {
border-color: blue !important;
}
Multiple banners - increase banner size
/* Multiple banners - increase banner size */
gb-auction-banner .banner-multiple-container {
max-height: none !important;
}
@media only screen and (min-width: 600px) {
gb-auction-banner .banner-multiple img {
max-height: none !important;
height: 30vw;
}
}
@media only screen and (max-width: 600px) {
gb-auction-banner .banner-multiple img {
max-height: none !important;
height: 60vw;
}
}
Change background to solid colour for info page and items
/* Change background to solid colour for info page and items */
gb-item-detail .gb-item-detail,
gb-item-detail .gb-item-detail .item-action-card,
gb-item-detail-toolbar .item-toolbar-container {
background-color: #111 !important;
}
gb-infobooth-content {
background-color: #111;
}
Make images on info pages the same width
/* Make images on info pages the same width */
gb-infobooth-content .quill-html img {
width: 100%;
max-width: 400px;
display: block;
margin: 0 auto;
}
Change background colour for menu button
/* Change background colour for menu button */
.gb-sidenav-container .toggle-button-container button {
background-color: #1d287a;
}
Change side menu colour
/* Change side menu colour */
.gb-sidenav .app-sidenav {
background-color: black !important;
}
Change sidenav activity feed colour
/* Change sidenav activity feed colour */
gb-activity-feed-sidenav .activity-feed-sidenav-container {
background-color: black !important;
}
gb-activity-feed-sidenav gb-activity-feed-post-create,
gb-activity-feed-sidenav gb-activity-feed-message {
color: red !important;
}