Contact Us

Mobile First Details Template

Mobile First 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 “Mobile First Details” Template.
mobile detail layout

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-nextLastButtons {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.IDX-wrapper-standard #IDX-nextLastPosition {
  text-align: center;
  color: #000;
  width: 100%;
  margin-bottom: 10px;
}

.IDX-wrapper-standard #IDX-nextLastButtons a {
  width: auto;
  float: none;
  background-color: var(--secondary-color);
  color: var(--secondary-text-color);
  border-color: var(--secondary-color);
  border-radius: 6px;
}

.IDX-wrapper-standard #IDX-nextLastButtons a:hover {
  color: var(--secondary-color);
  background-color: #fff;
}

.IDX-panel-body {
  background-color: #f3f3f3;
}

#IDX-detailsTopActions {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px 0 10px 0;
}

#IDX-detailsTopActions .IDX-btn {
  background-color: transparent;
  padding: 12px 8px;
  font-size: 16px;
  line-height: 14px;
  border-radius: 6px;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

#IDX-detailsTopActions .IDX-btn:hover {
  background-color: var(--secondary-color);
  color: var(--secondary-text-color) !important;
  border-color: var(--secondary-color);
}

#IDX-detailsHotActions {
  display: flex !important;
  justify-content: center;
  flex-wrap: wrap;
}

#IDX-detailsHotActions div {
  margin: 0px 8px 17px;
}

#IDX-detailsHotActions div a {
  background-color: var(--primary-color);
  color: var(--primary-text-color);
  padding: 9px 15px;
  border-radius: 6px;
  text-decoration: none;
}

#IDX-detailsHotActions div a:hover {
  background-color: var(--secondary-color);
  color: var(--secondary-text-color) !important;
}

.IDX-wrapper-standard #IDX-detailsAddress {
  display: block;
  margin: 35px 0;
  text-align: center;
}

.IDX-wrapper-standard #IDX-detailsAddress .IDX-psudolink {
  font-size: 26px;
  font-weight: 500;
}

#IDX-detailsWrapper+div+hr {
  display: none;
}

.IDX-wrapper-standard .IDX-panel-default>.IDX-panel-heading {
  color: var(--primary-text-color) !important;
  background-color: var(--primary-color) !important;
  border-color: #ddd;
  padding: 16px 14px !important;
}

.IDX-wrapper-standard .IDX-panel-body .IDX-field {
  border-bottom: none;
}

.IDX-panel-body {
  background: #fff;
}

.IDX-panel-body .IDX-fieldContainerList:empty {
  display: none;
}

.IDX-panel-body .IDX-fieldContainerList:empty+.IDX-fieldContainerList {
  margin-left: 0;
}

.IDX-field-price .IDX-text {
  color: red;
  font-weight: 600;
}

.IDX-wrapper-standard .IDX-panel-body .IDX-label {
  color: #000;
}

.IDX-wrapper-standard .IDX-arrow {
  background-color: var(--secondary-color);
  border-radius: 6px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--secondary-text-color);
}

.IDX-wrapper-standard #IDX-primaryPhoto {
  max-width: 710px;
  margin: 20px auto;
}

.IDX-wrapper-standard .IDX-thumbnail {
  border: none !important;
}

.IDX-wrapper-standard #IDX-detailsPrimaryImg {
  border: 1px solid #ddd;
  padding: 4px;
}

#IDX-detailsGalleryAction {
  display: none;
}

#IDX-detailsMedia {
  text-align: center;
}

.IDX-carouselWrapper {
  height: 76px;
  padding: 0 10px;
  width: auto !important;
}

.IDX-carouselThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.IDX-carouselNavWrapper {
  width: 36px;
  height: 36px;
  line-height: 36px;
  background-color: var(--secondary-color);
  color: var(--secondary-text-color);
  transform: translateY(-50%);
  top: 50%;
  border-radius: 6px;
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.IDX-carouselThumb {
  margin: 4px;
}

#IDX-detailsShowcaseSlides {
  max-width: unset !important;
  display: inline-block;
  margin-bottom: 20px !important;
}

.IDX-wrapper-standard #IDX-detailsAddress .IDX-psudolink {
  color: #000;
}

/* similar proerty css */

#IDX-similar-listings-title {
  text-align: center;
  padding-bottom: 22px;
}

#IDX-similar-listings-result {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 22px 20px;
}

.IDX-similar-listings--item {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 0 15px rgba(0, 0, 0, .09);
  padding-bottom: 27px;
  overflow: hidden;
  margin: 0;
}

.IDX-similar-listings--item-image {
  width: 100%;
  object-fit: cover;
  height: 260px;
}

.IDX-similar-listings--info {
  display: block;
}

.IDX-similar-listings--details {
  display: flex;
  flex-direction: column;
  padding: 20px 13px 16px 13px;
}

.IDX-similar-listings--details br {
  display: none;
}

.IDX-similar-listings--price {
  order: 2;
  font-weight: 700;
  position: relative;
  font-size: 22px;
  color: #f14812;
  margin-bottom: 7px;
}

.IDX-similar-listings--bed-bath-sqft-acre {
  order: 3;
}

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

.IDX-similar-listings--address {
  order: 1;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  margin: 0 0 7px;
  color: #000;
}

.IDX-similar-listings--redirect {
  display: block;
  padding: 0 13px;
}

#IDX-similar-listings-result .IDX-similar-listings--redirect .IDX-btn {
  font-size: 15px;
  font-weight: 600;
  line-height: 21px;
  background-color: var(--secondary-color);
  border-radius: 6px 6px 6px 6px;
  padding: 10px 12px 10px 12px;
  color: var(--secondary-text-color) !important;
  border: none;
}

#IDX-similar-listings-result .IDX-similar-listings--redirect .IDX-btn:hover {
  background-color: var(--primary-color) !important;
  color: var(--primary-text-color) !important;
}

/* contact form */

#IDX-detailsContactForm {
  padding-top: 40px;
}

#IDX-detailsContactForm .IDX-pageHeader {
  text-align: center;
  padding-bottom: 10px;
}

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

#IDX-detailsContactForm .IDX-btn {
  font-size: 17px;
  font-weight: 600;
  line-height: 26px;
  background-color: var(--primary-color) !important;
  border-radius: 6px 6px 6px 6px !important;
  padding: 9px 27px 9px 27px;
  color: var(--primary-text-color) !important;
  border: 2px solid transparent !important;
  outline: none !important;
}

#IDX-detailsContactForm #IDX-resetBtn {
  background-color: #fff !important;
  color: var(--secondary-color) !important;
  border: 2px solid var(--secondary-color) !important;
}

#IDX-detailsContactForm .IDX-btn:hover,
#IDX-detailsContactForm #IDX-resetBtn:hover {
  background-color: var(--secondary-color) !important;
  color: var(--secondary-text-color) !important;
}

#IDX-contactAccountInfo #IDX-contactAddress,
#IDX-contactAccountInfo div#IDX-contactCityStateZip,
#IDX-contactAccountInfo div#IDX-contactPhone,
#IDX-contactAccountInfo div#IDX-contactPhone2 {
  font-size: 18px;
  position: relative;
  padding-left: 30px;
  padding-bottom: 10px;
}

#IDX-contactAccountInfo #IDX-contactAddress:before {
  content: '\f5a0';
  position: absolute;
  left: 0;
  top: 3px;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: var(--primary-color);
}

#IDX-contactAccountInfo div#IDX-contactCityStateZip:before {
  content: '\f64f';
  position: absolute;
  left: 0;
  top: 3px;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: var(--primary-color);
}

div#IDX-detailscontactContent #IDX-contactAccountInfo div#IDX-contactPhone:before {
  content: '\f2a0';
  position: absolute;
  left: 5px;
  top: 3px;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  color: var(--primary-color);
}

div#IDX-detailscontactContent #IDX-contactAccountInfo div#IDX-contactPhone2:before {
  content: '\f2a0';
  position: absolute;
  left: 5px;
  top: 3px;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  color: var(--primary-color);
}

#IDX-contactInformation .IDX-contactAccountHeader {
  color: #000;
  padding-bottom: 10px;
}

@media (max-width:992px) {
  #IDX-similar-listings-result {
    grid-template-columns: 1fr 1fr;

  }

  .IDX-similar-listings--item-image {
    width: 100%;
    object-fit: cover;
    height: 200px;
  }

}

@media (max-width:767px) {
  #IDX-similar-listings-result {
    grid-template-columns: 1fr;
  }

  #IDX-detailsHotActions div {
    margin: 0px 3px 6px;
  }

  .IDX-wrapper-standard #IDX-detailsAddress .IDX-psudolink {
    font-size: 21px;
  }

  .IDX-similar-listings--item-image {
    width: 100%;
    object-fit: cover;
    height: 100%;
  }
}

@media (max-width:641px) {
  #IDX-detailsTopActions .IDX-topAction {
    margin: 0 8px 8px 0;
  }

}

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