CSS Color Theming

avatarJfelizardo
Public2 years ago22 snippets
Testimonial-Grid-Quotation-Theming.txt
Testimonial-Quotation-Theming.txt
Pagination-for-Desktop-and-Mobile-View.txt
MLS-Properties-Grid-Buttons,-Accents,-Dropdowns.txt
Disclaimer-Font-and-Input-Theming.txt
Button-Theming.txt
Font-Color-and-Pop-up-Modal-Theming.txt
Dropdown-Hover-and-Mobile-Button-Theming.txt
Buttons-and-Pagination-Theming.txt
Property-Grid-Cards-and-Status-Not-Changing.txt
Featured-Property-Cards,-Status-and-Links-Color.txt
Background-Color-on-Mobile.txt
Property-Intro-with-Title-Below-Pagination.txt
Font-Color-Theming.txt
Pagination-Theme-Color-for-Properties.txt
Font-Color-and-Pop-up-Modal-Theming.txt
Arrow-Button-on-Mobile-and-Dropdown-Hover.txt
Buttons,-Dropdown-Hover-and-Pagination-Theming.txt
Accent-and-Arrow-Color-Theming.txt
Left-Font-Title-Color.txt
Pagination-Theme-Color-for-Properties.txt
Pagination-Theme-Color.txt
Design Template: Masterpiece
Testimonial-Grid-Quotation-Theming.txt
/*START - testimonial page icon*/
div.testimonials ul.collection 
{
    .avatar {
        background-color:#7BA4C3;
        height: 154px;
        path{
            fill: #fff;
            fill-opacity: 1;
        }
+ 19 more lines
Design Template: Masterpiece
Testimonial-Quotation-Theming.txt
/*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)*/
+ 1 more line
Property Details Design Template: Masterpiece
Pagination-for-Desktop-and-Mobile-View.txt
/*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;
+ 22 more lines
Design Template: Producer
MLS-Properties-Grid-Buttons,-Accents,-Dropdowns.txt
/*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;
+ 68 more lines
Design Template: Producer
Disclaimer-Font-and-Input-Theming.txt
/*START - add theming*/
.lp-input--light {
    color: #000;
    border-color: rgba(0,0,0, 1);
}

.lp-input--light::placeholder {
    color: #000;
}
+ 11 more lines

Button Theming

2 years ago
Design Template: Producer
Button-Theming.txt
/*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;
+ 5 more lines
Design Template: Producer
Font-Color-and-Pop-up-Modal-Theming.txt
               /*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;
+ 17 more lines
Design Template: Producer
Dropdown-Hover-and-Mobile-Button-Theming.txt
/*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;
+ 60 more lines
Design Template: Producer
Buttons-and-Pagination-Theming.txt
/*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;
    }
+ 43 more lines
Design Template: Producer
Property-Grid-Cards-and-Status-Not-Changing.txt
/*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;
}
+ 5 more lines
Design Template: Producer
Featured-Property-Cards,-Status-and-Links-Color.txt
/*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;
+ 41 more lines
Image with CTA Design Template: Producer
Background-Color-on-Mobile.txt
/*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 {
+ 4 more lines
Property Intro with Title Below Design Template: Producer
Property-Intro-with-Title-Below-Pagination.txt
/*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;
        }
+ 3 more lines
Agent Bio with Detail Bar Design Template: Producer
Font-Color-Theming.txt
/*START Font Theming*/
.bottom-container .header h3 {
    color: #fff;
}
/*END*/
5 lines
Featured Properties Showcase Design Template: Producer
Pagination-Theme-Color-for-Properties.txt
/*START - slick arrow*/
.lp-arrow{
    border: solid 2px #000;
    background-color: transparent;
    &:before {
    border-color: #000;
    }
    &:hover{
    border: solid 2px #000;
    background-color: #000;
+ 6 more lines
Neighborhood Overview Design Template: Coldwell Banker Brand
Font-Color-and-Pop-up-Modal-Theming.txt
/*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;
+ 14 more lines
Mortgage Calculator Design Template: Coldwell Banker Brand
Arrow-Button-on-Mobile-and-Dropdown-Hover.txt
/*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 {
+ 24 more lines
Schedule a Showing Design Template: Coldwell Banker Brand
Buttons,-Dropdown-Hover-and-Pagination-Theming.txt
/*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;
    }
+ 55 more lines
Properties Grid Design Template: Coldwell Banker Brand
Accent-and-Arrow-Color-Theming.txt
/*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;
    }
}
+ 27 more lines
Featured Neighborhoods
Left-Font-Title-Color.txt
/*START Change Left Title Color*/
div.col.col-1-2.f-neighborhoods__image-col > h2{
    color: #fff;
}
/*END*/
5 lines
Featured Properties
Pagination-Theme-Color-for-Properties.txt
/*START Pagination Color*/
div.f-properties__slider .slick-arrow {
    color: #000;
     &:hover {
        color: #012169;
    }
    &:focus {
        color: #012169;
    }
    &:focus:hover {
+ 4 more lines
Featured Testimonials
Pagination-Theme-Color.txt
/*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;
+ 4 more lines