Branded property search pages

Setup

Three steps in IDX Broker

1. 01

   Wrapper

   In IDX Broker go to Designs → Website → Wrappers. Choose Dynamic for the Global scope and paste the Wrapper URL below, then Save. IDX Broker fetches this page and places search results between our header and footer.

2. 02

   Custom CSS

   Go to Designs → Website → Custom CSS (or Global CSS) and paste the stylesheet below. It restyles buttons, fields, result cards, pagination and detail pages in ivory, navy and gold. It is also linked from the wrapper, so this step is a safety net if the link is ever blocked.

3. 03

   Verify

   Open dallasluxuryrealty.idxbroker.com/idx/search/advanced and confirm the navy header, ivory canvas and gold accents appear. If the wrapper looks stale, click Refresh Wrapper in IDX Broker to clear its cache.

/* Dallas Luxury Realty — IDX Broker brand stylesheet (ivory / navy / champagne gold) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Jost:wght@400;500;600;700&display=swap');
:root{--dlr-ivory:#F4F7FA;--dlr-navy:#0F2A44;--dlr-navy-light:#1A3A5C;--dlr-charcoal:#1C2B3A;--dlr-gold:#2E7DD1;--dlr-gold-hover:#2466AD;--dlr-stone:#DCE4EC;--dlr-white:#fff}
.IDX-wrapper-standard,#IDX-main,#IDX-main *{box-sizing:border-box}
.IDX-wrapper-standard,#IDX-main{font-family:'Jost',sans-serif;color:var(--dlr-charcoal);background:var(--dlr-ivory);line-height:1.6}
#IDX-main h1,#IDX-main h2,#IDX-main h3,#IDX-main h4,#IDX-main .IDX-resultsPrice,#IDX-main .IDX-detailsPrice,#IDX-main .IDX-panel-title,#IDX-main legend{font-family:'Playfair Display',serif;color:var(--dlr-navy);font-weight:500;letter-spacing:-.01em}
#IDX-main h1{font-size:2.5rem;line-height:1.1;margin:0 0 .5rem}
#IDX-main h2{font-size:1.75rem}
#IDX-main a{color:var(--dlr-navy);text-decoration:none;transition:color .3s}
#IDX-main a:hover{color:var(--dlr-gold)}
/* Buttons */
#IDX-main .IDX-btn,#IDX-main .btn,#IDX-main button,#IDX-main input[type=submit],#IDX-main input[type=button]{font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;border-radius:999px;border:1px solid var(--dlr-navy);background:var(--dlr-navy);color:var(--dlr-ivory);padding:.85rem 1.6rem;transition:background-color .3s,color .3s,border-color .3s;box-shadow:none;text-shadow:none;background-image:none}
#IDX-main .IDX-btn:hover,#IDX-main .btn:hover,#IDX-main button:hover,#IDX-main input[type=submit]:hover{background:var(--dlr-navy-light);color:var(--dlr-ivory)}
#IDX-main .IDX-btn-primary,#IDX-main .btn-primary,#IDX-main .IDX-btn-success,#IDX-main #IDX-submitBtn,#IDX-main .IDX-submitBtn{background:var(--dlr-gold);border-color:var(--dlr-gold);color:#fff}
#IDX-main .IDX-btn-primary:hover,#IDX-main .btn-primary:hover,#IDX-main .IDX-btn-success:hover,#IDX-main #IDX-submitBtn:hover{background:var(--dlr-gold-hover);border-color:var(--dlr-gold-hover);color:#fff}
#IDX-main .IDX-btn-default,#IDX-main .btn-default,#IDX-main .IDX-btn-link{background:transparent;color:var(--dlr-navy);border-color:rgba(23,38,59,.3)}
#IDX-main .IDX-btn-default:hover,#IDX-main .btn-default:hover{background:var(--dlr-navy);color:var(--dlr-ivory);border-color:var(--dlr-navy)}
/* Form controls */
#IDX-main .IDX-formControl,#IDX-main .form-control,#IDX-main select,#IDX-main input[type=text],#IDX-main input[type=email],#IDX-main input[type=tel],#IDX-main input[type=number],#IDX-main textarea{font-family:'Jost',sans-serif;font-size:14px;border-radius:0;border:1px solid var(--dlr-stone);background:#fff;color:var(--dlr-charcoal);padding:.7rem 1rem;height:auto;box-shadow:none;transition:border-color .3s}
#IDX-main .IDX-formControl:focus,#IDX-main .form-control:focus,#IDX-main select:focus,#IDX-main input:focus,#IDX-main textarea:focus{border-color:var(--dlr-gold);outline:none;box-shadow:none}
#IDX-main label,#IDX-main .IDX-label,#IDX-main .control-label,#IDX-main .IDX-field-label{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(36,36,36,.7)}
#IDX-main .IDX-panel,#IDX-main .panel,#IDX-main .IDX-well,#IDX-main .well{border:1px solid var(--dlr-stone);border-radius:0;background:#fff;box-shadow:none}
#IDX-main .IDX-panel-heading,#IDX-main .panel-heading{background:var(--dlr-navy);color:var(--dlr-ivory);border-radius:0;border:0;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
/* Results */
#IDX-main .IDX-resultsCount,#IDX-main #IDX-resultsCount{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dlr-gold);font-weight:600}
#IDX-main .IDX-resultsCell,#IDX-main .IDX-resultsRow,#IDX-main .IDX-featuredCell,#IDX-main .IDX-showcaseCell{background:#fff;border:1px solid var(--dlr-stone);border-radius:16px;box-shadow:none;transition:border-color .4s,transform .4s;overflow:hidden}
#IDX-main .IDX-resultsCell:hover,#IDX-main .IDX-featuredCell:hover,#IDX-main .IDX-showcaseCell:hover{border-color:var(--dlr-gold);transform:translateY(-2px)}
#IDX-main .IDX-resultsPhoto img,#IDX-main .IDX-resultsPhoto a img,#IDX-main .IDX-featuredPhoto img{border-radius:0;transition:transform 1.2s ease-out;display:block;width:100%}
#IDX-main .IDX-resultsCell:hover .IDX-resultsPhoto img{transform:scale(1.04)}
#IDX-main .IDX-resultsPhoto{overflow:hidden}
#IDX-main .IDX-resultsPrice,#IDX-main .IDX-featuredPrice,#IDX-main .IDX-field-price .IDX-text{font-size:1.6rem;color:var(--dlr-navy)}
#IDX-main .IDX-resultsAddress,#IDX-main .IDX-resultsAddressLink,#IDX-main .IDX-featuredAddress{font-size:15px;font-weight:600;color:var(--dlr-charcoal)}
#IDX-main .IDX-resultsCityStateZip,#IDX-main .IDX-resultsCity,#IDX-main .IDX-resultsState,#IDX-main .IDX-resultsZip{font-size:12px;color:rgba(36,36,36,.6)}
#IDX-main .IDX-resultsBeds,#IDX-main .IDX-resultsBaths,#IDX-main .IDX-resultsSqFt,#IDX-main .IDX-resultsAcres{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(36,36,36,.7)}
#IDX-main .IDX-resultsDetailsLink a,#IDX-main .IDX-resultsMoreInfo a{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dlr-navy);border-bottom:1px solid var(--dlr-gold);padding-bottom:2px}
#IDX-main .IDX-resultsDetailsLink a:hover{color:var(--dlr-gold)}
#IDX-main .IDX-statusNew,#IDX-main .IDX-propStatus,#IDX-main .IDX-resultsPropStatus,#IDX-main .label{background:var(--dlr-gold);color:#fff;border-radius:0;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;padding:.3rem .6rem}
#IDX-main .IDX-resultsSeparator,#IDX-main hr{border-color:var(--dlr-stone)}
/* Details page */
#IDX-main .IDX-detailsPrice{font-size:2.5rem}
#IDX-main .IDX-detailsAddress{font-family:'Playfair Display',serif;font-size:1.75rem;color:var(--dlr-navy)}
#IDX-main .IDX-detailsField .IDX-label,#IDX-main .IDX-detailsField .IDX-text{font-size:13px}
#IDX-main .IDX-detailsField{border-bottom:1px solid var(--dlr-stone);padding:.5rem 0}
#IDX-main .IDX-detailsContact,#IDX-main .IDX-contactForm{background:#fff;border:1px solid var(--dlr-stone);padding:1.5rem}
/* Pagination, tabs, misc */
#IDX-main .IDX-pagination a,#IDX-main .pagination>li>a,#IDX-main .pagination>li>span{border-radius:0;border:1px solid var(--dlr-stone);color:var(--dlr-navy);font-size:12px;display:block;padding:6px 12px}
#IDX-main .pagination>.active>a,#IDX-main .pagination>.active>span,#IDX-main .IDX-pagination .IDX-current{background:var(--dlr-navy);border-color:var(--dlr-navy);color:var(--dlr-ivory)}
#IDX-main .nav-tabs>li>a{border-radius:0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dlr-navy)}
#IDX-main .nav-tabs>li.active>a{border-color:var(--dlr-gold);border-bottom-color:transparent;color:var(--dlr-gold)}
#IDX-main .IDX-sortContainer select,#IDX-main #IDX-sort{border:1px solid var(--dlr-stone);background:#fff}
#IDX-main .IDX-mapContainer,#IDX-main #IDX-mapCanvas,#IDX-main .leaflet-container{border:1px solid var(--dlr-stone)}
#IDX-main .IDX-disclaimer,#IDX-main .IDX-courtesy,#IDX-main .IDX-mlsLogo{font-size:11px;color:rgba(36,36,36,.6)}