CSS Color Theming (yubuec)

Testimonial Grid Quotation Theming

09/26/2024 7:07 PM

Design Template: Masterpiece

/*START - testimonial page icon*/
div.testimonials ul.collection 
{
    .avatar {
        background-color:#7BA4C3;
        height: 154px;
        path{
            fill: #fff;
            fill-opacity: 1;
        }

Testimonial Quotation Theming

09/26/2024 7:05 PM

Design Template: Masterpiece

/*START - Testimonial section theme (Local)*/
svg path{
    fill: #fffaf5;
    fill-opacity: 1;
}
svg circle{
    fill: rgba(123,164,195,0.8);
    fill-opacity: 1;
}
/*END - Testimonial section theme(Local)*/

Pagination for Desktop and Mobile View

09/26/2024 6:45 PM

Property Details Design Template: Masterpiece

/*START - slick arrow theme*/
div.arrows .lp-arrow.slick-arrow{
    background-color: transparent;
    border: solid 2px #fff;
    &:before{
        border-color:#fff;
    }
    &:hover{
        border: solid 2px #fff;

MLS Properties Grid Buttons, Accents, Dropdowns

09/16/2024 5:32 PM

Design Template: Producer

/*START - update card color theme - */
.properties-grid .listing-card__img-wrap .listing-card__label {
        background: #670038 ;
        color: #fff;
        text-transform: uppercase;
    }
.properties-grid .listing-card__info{
        background: #C3BEBE;
        color: #000;
        text-transform: uppercase;

Disclaimer Font and Input Theming

09/16/2024 5:14 PM

Design Template: Producer

/*START - add theming*/
.lp-input--light {
    color: #000;
    border-color: rgba(0,0,0, 1);
}

.lp-input--light::placeholder {
    color: #000;
}

Button Theming

09/16/2024 5:10 PM

Design Template: Producer

/*START - fix button theme on mobile view*/
@media (max-width: 768px){
    .home-valuation .search-wrapper .lp-btn {
    border: 2px solid #fff!important;
    color: #fff!important;
    background-color: transparent!important;
        &:hover {
            border: 2px solid #fff!important;
            color: #670038!important;
            background-color: #fff!important;

Font Color and Pop up Modal Theming

09/16/2024 4:58 PM

Design Template: Producer

               /*START Hover Modal font and BG color*/
.item__copy .item__name--hint{
    &:after {
        background-color: #fff;
    }
    span.item__hint.hint{
        background-color: #fff;
        color:#000;
        &:after {
            background-color: #fff;

Dropdown Hover and Mobile Button Theming

09/16/2024 4:42 PM

Design Template: Producer

/*START Dropdown Hover*/
.custom-select-item {
    color: #000;
}
.custom-select .lp-input--light + .custom-select-menu .custom-select-content {
    background-color: #fff;
}

.custom-select .lp-input--light + .custom-select-menu .custom-select-item:hover {
    background-color: #670038;

Buttons and Pagination Theming

09/16/2024 4:41 PM

Design Template: Producer

/*START - For light background - */
div.type-selector__group label.type-selector__label.lp-btn.lp-btn--outline.lp-btn--dark{
    border-color: #670038;
    background-color: transparent;
    color: #670038;
    &:hover{
        border-color: #670038;
        background-color: #670038;
        color: #fff;
    }

Property Grid Cards and Status Not Changing

09/16/2024 4:35 PM

Design Template: Producer

/*START - Change Card Theme*/
div.redesign.property-list-section span.property-list__label{
   background:#670038;
   color: #fff;
}
.property-list__text {
    color: #000;
    background-color: #C3BEBE !important;
}

Featured Property Cards, Status and Links Color

09/16/2024 4:30 PM

Design Template: Producer

/*START - Change link colors */
div.redesign.featured-properties-section ul.slick-links-nav {
  span.spacer {
    background-color: #000;
  }
  li span.link {
    color: #000;
    border-color: #000;
    &:hover:not(.slick-disabled) {
      color: #670038;

Background Color on Mobile

09/09/2024 10:54 PM

Image with CTA Design Template: Producer

/*START Black Background in Mobile*/
@media (max-width: 768px){
    .lp-title-group.text-left p, .lp-h2{
        color: #fff;
    }
    div.media-text__content {
        opacity: 1;
        background-color: #000;
    }
    div.media-text {

Property Intro with Title Below Pagination

09/09/2024 7:50 PM

Property Intro with Title Below Design Template: Producer

/*START - pagination color*/
.property-intro-2-content .property-intro-2-nav-slider button.slick-arrow{
        background-color: transparent;
        border-color:#fff;
        color: #fff!important;
        &:hover{
            background-color: #fff;
            border-color:#fff;
            color: #000!important;
        }

Font Color Theming

09/09/2024 7:23 PM

Agent Bio with Detail Bar Design Template: Producer

/*START Font Theming*/
.bottom-container .header h3 {
    color: #fff;
}
/*END*/

Pagination Theme Color for Properties

09/09/2024 7:18 PM

Featured Properties Showcase Design Template: Producer

/*START - slick arrow*/
.lp-arrow{
    border: solid 2px #000;
    background-color: transparent;
    &:before {
    border-color: #000;
    }
    &:hover{
    border: solid 2px #000;
    background-color: #000;

Font Color and Pop up Modal Theming

09/05/2024 8:17 AM

Neighborhood Overview Design Template: Coldwell Banker Brand

/*START Hover Modal font and BG color*/
.item__copy .item__name--hint{
    &:after {
        background-color: #fff;
    }
    span.item__hint.hint{
        background-color: #fff;
        color:#000;
        &:after {
            background-color: #fff;

Arrow Button on Mobile and Dropdown Hover

09/05/2024 7:31 AM

Mortgage Calculator Design Template: Coldwell Banker Brand

/*START - mortgage calcu arrow -*/
@media (max-width: 768px){
.results__expand svg {
    stroke: #fff !important;
    }
}
/*mortgage arrow icon theme mobile view */
@media (max-width: 768px){
div.results__expand {

Buttons, Dropdown Hover and Pagination Theming

09/05/2024 7:29 AM

Schedule a Showing Design Template: Coldwell Banker Brand

/*START - For light background - */
div.type-selector__group label.type-selector__label.lp-btn.lp-btn--outline.lp-btn--dark{
    border-color: #012169;
    background-color: transparent;
    color: #012169;
    &:hover{
        border-color: #012169;
        background-color: #012169;
        color: #fff;
    }

Accent and Arrow Color Theming

09/05/2024 5:44 AM

Properties Grid Design Template: Coldwell Banker Brand

/*START Accent and Arrow Color Theming*/
div.properties-grid-list{
    .feature-low {
        background-color: #012169;
        color: #fff;
    }
    a:hover {
        box-shadow: 0 2px 0 0 #012169;
    }
}

Left Font Title Color

09/05/2024 5:24 AM

Featured Neighborhoods

/*START Change Left Title Color*/
div.col.col-1-2.f-neighborhoods__image-col > h2{
    color: #fff;
}
/*END*/

Pagination Theme Color for Properties

09/05/2024 5:23 AM

Featured Properties

/*START Pagination Color*/
div.f-properties__slider .slick-arrow {
    color: #000;
     &:hover {
        color: #012169;
    }
    &:focus {
        color: #012169;
    }
    &:focus:hover {

Pagination Theme Color

09/05/2024 5:21 AM

Featured Testimonials

/*START Pagination Color*/
.slider-arrows  .slick-arrow{
    border-color: #012169;
    color: #012169;
    &:hover{
        border-color: #012169;
        background-color: #012169;
        color: #fff; 
        &:before{
            background-color: #fff;