Contact Us

Precision Listings Details Template

Precision Listings Details Template

Change Page Layout For Detail Template

Please follow the below steps to change the basic look and layout of your Detail Template page:

Step 1: Select Details Page Template

  • Log into your IDX Broker account.
  • From your IDX Broker Control Panel, click Design > Website > Page Templates. 
  • Go to Details Under Details Pages Title.
  • Then, click Edit under the Layout column.
mobile first details template
  • This link will take you to the Layout Gallery where you can choose a different layout for your page. At the top you will see a thumbnail and description of the layout you are currently using for this page.
  • Click on Activate to select “Precision Listings Details” Template.
listings details template

Step 2: Customize CSS for Details Page Template

To change the appearance of the IDX templates themselves, you can use the Custom CSS area of your IDX control panel.

  • From your IDX Broker Control Panel, click Design > Website > Custom CSS. 
precision listings contact-schedule showing
  • By default, you should see the Global CSS settings load here first. Click on “Pages” Option.
  • Select the Details under Details Title, and add the following css into the text area provided. 
  • Click Save Changes.
real estate website template
Copy 

#IDX-main {
  background: transparent !important;
}

.swiper-wrapper {
  height: auto;
}

#IDX-primaryPhoto #IDX-detailsSlidesOpenHouses {
  top: 5px;
  background-color: #fff061;
  color: #000 !important;
  text-decoration: none;
}

#IDX-main.IDX-category-details .IDX-field .IDX-text>div {
  display: inline-block;
}

#IDX-main.IDX-category-details .IDX-field .IDX-text .IDX-btn {
  background-color: var(--secondary-color);
  color: var(--secondary-text-color);
  border-color: var(--secondary-color) !important;
  outline: none !important;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 14px;
}

.IDX-similar-listings--item .IDX-similar-listings--item-MLSLogo,
.IDX-similar-listings--item .IDX-mlsSelectorRulesCourtesy {
  display: none;
}

#IDX-detailsPageContainer,
#IDX-main.IDX-wrapper-standard #IDX-detailsHeader .IDX-row {
  padding: 0 0px;
}

.IDX-tooltip-wrapper>div {
  display: none !important;
}

#IDX-main.IDX-category-details #IDX-detailsTopNav .IDX-btn {
  color: var(--primary-text-color);
}

#IDX-main.IDX-category-details #IDX-detailsTopNav #IDX-searchControls .IDX-btn {
  color: var(--primary-text-color) !important;
}

.IDX-wrapper-standard .IDX-panel-default>.IDX-panel-heading {
  color: var(--primary-text-color) !important;
  background-color: var(--primary-color) !important;
}

.IDX-wrapper-standard .IDX-panel-default>.IDX-panel-heading:hover {
  background-color: var(--primary-color) !important;
}

#IDX-main.IDX-category-details .IDX-panel-body {
  margin: 16px;
}

#IDX-main.IDX-category-details .IDX-panel-heading a.IDX-panel-collapse-toggle {
  padding: 20px 14px;
}

#IDX-main.IDX-category-details .IDX-panel-heading .IDX-panel-collapse-toggle span {
  border-bottom-color: #fff;
  border-right-color: #fff;
}

.IDX-wrapper-standard .IDX-panel {
  border: 1px solid #ddd !important;
  margin-bottom: 30px !important;
}

#IDX-main.IDX-category-details .IDX-field .IDX-label {
  color: #000;
  font-weight: 600;
}

.IDX-contact-information span {
  font-size: 18px;
  position: relative;
  color: #000;
  display: inline-block;
  font-weight: 600;
}

.IDX-contact-information {
  font-weight: 18px;
}

.IDX-contact-information span,
IDX-details-contact .IDX-contact-information a {
  margin-top: 10px;
}

#IDX-main.IDX-category-details .IDX-details-contact .IDX-contact-information .IDX-contact__name {
  color: #000;
  padding-bottom: 10px;
  font-size: 24px;
  font-weight: 700;
}

#IDX-main.IDX-category-details .IDX-details-contact .IDX-contact-form__title,
#IDX-main #IDX-similar-listings-title {
  background-color: var(--primary-color);
  color: var(--primary-text-color);
}

#IDX-main #IDX-submitBtn,
#IDX-detailsSlidesActions .IDX-btn {
  background-color: var(--secondary-color) !important;
  color: var(--secondary-text-color) !important;
  border: none !important;
  border-radius: 6px !important;
}

#IDX-main #IDX-submitBtn:hover,
#IDX-detailsSlidesActions .IDX-btn:hover {
  background-color: var(--primary-color) !important;
  color: var(--primary-text-color) !important;
  border: none !important;
  filter: unset !important;
}

#IDX-detailsSlidesActions {
  padding-top: 30px;
  background: transparent;

}

#IDX-primaryPhoto .swiper-pagination-fraction {
  left: unset;
  right: 6px;
  top: 6px;
  bottom: unset;
  width: auto;
  background-color: var(--secondary-color) !important;
}

body .swiper-button-prev,
body .swiper-button-next {
  border-radius: 6px;
  height: 36px;
  width: 36px;
  background-color: var(--secondary-color) !important;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after,
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  display: none;
}

#IDX-main.IDX-category-details .IDX-btn.IDX-btn__link:hover,
#IDX-main.IDX-category-details .IDX-btn.IDX-btn__link:focus,
#IDX-main.IDX-category-details .IDX-btn.IDX-btn__link:active {
  filter: none !important;
  outline: none;
  box-shadow: none;
}

#IDX-main.IDX-category-details #IDX-leadToolsBar {
  margin-bottom: 20px;
}

.IDX-loggedIn .IDX-message-column {
  padding-top: 26px;
}

#IDX-main.IDX-category-details .IDX-field {
  margin-bottom: 4px;
}

/* calculate payment */

#IDX-main.IDX-wrapper-standard .IDX-btn.IDX-btn--link:hover,
#IDX-main.IDX-wrapper-standard .IDX-btn.IDX-btn--link:focus,
#IDX-main.IDX-wrapper-standard .IDX-btn.IDX-btn--link:active {
  filter: unset !important;
}

#IDX-main.IDX-wrapper-standard .IDX-PIH {
  align-items: center;
  margin: 0 0 30px 0;
}

#IDX-main.IDX-wrapper-standard .IDX-btn.IDX-btn--link {
  margin-bottom: 16px;
}

#IDX-main #IDX-submitBtn.IDX-btn-default.IDX-btn-block.IDX-submit-btn.IDX-btn.IDX-btn__PL {
  letter-spacing: unset;
}

#IDX-main.IDX-wrapper-standard .IDX-btn.IDX-btn--link,
#IDX-main .idx-btn.idx-button-bottom {
  font-size: 17px;
  font-weight: 600 !important;
  line-height: 26px;
  background-color: var(--primary-color) !important;
  border-radius: 6px 6px 6px 6px !important;
  padding: 9px 27px 9px 27px;
  color: #fff !important;
  border: 2px solid transparent !important;
  outline: none !important;
  box-shadow: none !important;
  filter: unset !important;
  display: inline-block;
  text-transform: capitalize !important;
  letter-spacing: unset;
}

.IDX-contact__actions {
  text-align: center;
}

#IDX-main .idx-btn.idx-button-bottom:hover,
#IDX-main.IDX-wrapper-standard .IDX-btn.IDX-btn--link:hover {
  background-color: var(--secondary-color) !important;
  color: #fff !important;
  filter: unset !important;
}

#IDX-main .IDX-contact-form__title {
  text-align: center;
  font-weight: 600;
  padding-bottom: 17px;
  color: var(--primary-color);
}

.IDX-googleRecaptchaPolicy {
  display: none;
}

#IDX-main .idx-sk-tab-content__total,
#IDX-main .idx-tab-content__total {
  background-color: var(--secondary-color);
  padding: 10px;
  color: #fff;
}

#IDX-main .idx-sk-tab-content__header,
#IDX-main .idx-tab-content__header {
  font-size: 20px;
  line-height: 26px;
}

#IDX-main .idx-form-control {
  background: #fff !important;
  height: 45px;
  border: 1px solid #ccc;
  outline: none !important;
  width: 100%;
  box-shadow: none;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.idx-amortization input[type=range] {
  border: none !important;
}

.IDX-info {
  border: none;
}

#IDX-mortgagePmiUnit {
  top: 39px;
}

#IDX-main .idx-down-payment-group {
  display: block;
}

#IDX-main .idx-down-payment-group>div:nth-of-type(2) {
  margin-top: 14px;
}

#IDX-main .idx-input-group .idx-input-group-text {
  height: 45px;
  color: #555;
  text-align: center;
  background-color: #eee;
  border: 1px solid #ccc;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  line-height: 30px;
}

#IDX-main .idx-input-group .idx-input-group-prepend+.idx-form-control {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

#IDX-main .idx-form-control+.idx-input-group-text {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

#IDX-main,
#IDX-main label {
  font-weight: 700;
  display: block;
  margin-bottom: 5px;
}

#IDX-main .idx-input-item-hoa,
#IDX-main .idx-input-item-pmi {
  border-radius: 0 !important;
}

#IDX-mortgageCalculatorContent .idx-mortgage-calculator {
  grid-gap: 30px;
  margin: 0 40px;
}

#IDX-mortgageCalculatorContent .idx-input-form {
  min-width: 400px;
}

#IDX-main.IDX-category-details .IDX-modal__body {
  padding-top: 40px;
  padding-bottom: 40px;
}

#IDX-main.IDX-category-details .IDX-similar-listings--item-image img {
  height: 300px;
}

.idx-input-group .idx-input-item-down-payment,
.idx-input-group .idx-input-item-hoa,
.idx-input-group .idx-input-item-pmi,
.idx-input-group .idx-input-item-price {
  padding-left: 8px;
}

#IDX-main.IDX-category-details .IDX-modal__header {
  background-color: var(--secondary-color);
}

.idx-tab-content__table .idx-sk-tab-content__table-item,
.idx-tab-content__table .idx-tab-content__table-item {
  padding: 14px 0;
}

.idx-tab-container__tabs .idx-tab-container__tab {
  background-color: #fff;
}

.idx-tab-container__tabs .idx-tab-container__tab--active {
  background-color: var(--primary-color);
  color: #fff;
}

#IDX-main.IDX-category-details .IDX-container-row {
  margin-left: 0;
  margin-right: 0;
}

#IDX-main #IDX-submitBtn.IDX-btn-default.IDX-btn-block.IDX-submit-btn.IDX-btn.IDX-btn__PL,
#IDX-main.IDX-category-details .IDX-btn.IDX-btn,
#IDX-main.IDX-category-details #IDX-resetBtn,
#IDX-main.IDX-category-details #IDX-submitBtn {
  font-weight: 600 !important;
}

@media (min-width:1100px) {
  #IDX-main.IDX-category-details .IDX-btn__PL.IDX-btn__outline {
    background: transparent;
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
  }

  #IDX-main.IDX-category-details .IDX-btn__PL.IDX-btn__outline:hover {
    background: var(--secondary-color);
    color: var(--secondary-text-color) !important;
    border: 1px solid var(--secondary-color);
    filter: none;
  }

  #IDX-detailsSlidesActions {
    padding-top: 0;
  }

}

#IDX-detailsTopNav {
  background-color: var(--primary-color);
}

@media (max-width:1099px) {
  #IDX-detailsDescriptionActions {
    flex-direction: row;
    justify-content: center !important;
  }

  #IDX-main.IDX-category-details .IDX-inline-buttons__link>*:not(:last-child)::after {
    color: var(--idx-primary-color);
    content: "|";
    font-weight: 700;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    position: relative;
  }

  #IDX-detailsHeaderActions {
    background-color: var(--secondary-color);
  }

  #IDX-main.IDX-category-details .IDX-inline-buttons__lg .IDX-btn__lg {
    font-size: 15px;
    max-width: unset !important;
    border-top: 0;
    letter-spacing: unset;
    border: none !important;
  }

  .idx-sk-tab-content,
  .idx-tab-container__body .idx-tab-content {
    display: grid;
    grid-template-areas:
      "graph"
      "header"
      "table";
  }

  .idx-tab-container__body .idx-tab-content__graph {
    margin-top: 10px;
    justify-self: center;
  }

  #IDX-mortgageCalculatorContent .idx-input-form {
    min-width: unset;
    padding: 0 !important;
  }
}

@media (max-width:992px) {
  #IDX-mortgageCalculatorContent .idx-mortgage-calculator {
    margin: 0 20px;
  }

  .IDX-PIH__row--details {
    justify-content: center;
  }

  #IDX-main.IDX-wrapper-standard .IDX-PIH {
    display: block;
    text-align: center;
  }
}

@media (max-width:767px) {
  #IDX-main.IDX-wrapper-standard .IDX-hidden--tablet {
    display: none !important;
  }

  #IDX-main.IDX-wrapper-standard .IDX-hidden--mobile {
    display: block !important;
  }

}

Step 3: Set Common Css Globally used in Page Templates

Set the Color, Font-Family variables and common css in Global css.

  • From your IDX Broker Control Panel, click Design > Website > Custom CSS. 
  • Make Sure Global CSS settings Option is selected and add the following css into the text area provided. 
  • Click Save Changes.
Mobile First Mortgage

Replace Color's with your website color's

  1. Enter 6 digits starting with #
  2. Click on “Get Css” Button.
  3. Css Variables will be replaced by entered color  values.
  4. Click on “Copy ” Button .
Primary Color

Enter 6 digits.

Primary Text Color

Enter 6 digits.

Secondary Color

Enter 6 digits.

Secondary Text Color

Enter 6 digits.

Overlay Color

Enter 6 digits.

Overlay Text Color

Enter 6 digits.

Generate Css
Copy 

:root {
  --primary-color: #000000;
  --primary-text-color: #ffffff;
  --secondary-color: #333333;
  --secondary-text-color: #ffffff;
  --overlay_bg: rgba(0,33,114,0.88);
  --overlay_textColor: #ffffff;
  --text-font-family: 'Open Sans', sans-serif;
  --heading-font-family: 'Open Sans', sans-serif;

}

a,
button,
div,
p,
body {
  font-family: var(--text-font-family);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font-family);
}

#IDX-main {
  width: 100%;
  max-width: 1170px;
  padding: 40px 15px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
boost my ghl

Drive Conversions and Scale Your Business with Our GoHighLevel CRM-Optimized Website, Funnel Templates and Many more!

Quick Links

Contact Us

Twitter Facebook-f Pinterest Instagram