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 images smaller

‍

/* Make images smaller - Item description*/

.item-description-container .item-description img {
   max-width: 50% ;
}

@media screen and (max-width: 600px) {
   .item-description-container .item-description img {
   max-width: 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;
}
‍
‍