Contact Us

Home Studio Details Template

Home Studio 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 “Home Studio Details” Template.
Home Studio 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#IDX-main {
  max-width: 1170px;
  overflow-x: hidden;
  background-color: transparent;
}

.idx-header__nav {
  margin-bottom: 20px;
  background: #f5f5f5;
  border-radius: 6px;
}

.IDX-wrapper-standard .idx-header__nav a.idx-nav__link {
  color: var(--primary-color);
}

.IDX-wrapper-standard .idx-header__nav a.idx-nav__link:hover {
  color: var(--secondary-color);
}

#IDX-detailsWrapper {
  display: flex;
}

.idx-details__main {
  width: 65%;
  padding: 0;
}

.idx-details__sidebar {
  width: 35%;
  padding: 0 0 0 25px;
}

.idx-slideshow {
  flex-direction: column;
  display: flex;
}

.idx-slideshow__thumbs {
  order: 2;
  display: none;
}

.idx-slideshow__main {
  order: 1;
}

.idx-listing__action.idx-listing__action--save {
  right: 10px;
  top: 10px;
}

.idx-listing__action.idx-listing__action--save .fa-heart {
  color: #fff;
  font-weight: 400;
  border-radius: 50%;
  height: 45px;
  background: #EC3323;
  right: 10px;
  width: 45px;
  line-height: 45px;
  font-size: 20px;
}

.idx-listing__photo--is-favorite .idx-listing__action.idx-listing__action--save .fa-heart {
  color: #fff;
  font-weight: 900;
}

.idx-listing__action--save.IDX-propertySaved {
  background: transparent;
  padding: 0;
}

.idx-slideshow__controls .idx-arrow {
  width: 36px;
  padding: 0;
  height: 36px;
  background-color: #EC3323;
  color: #fff;
}

.idx-slideshow__controls .idx-arrow i {
  color: #fff;
}

.idx-details__right {
  display: block;
}

.idx-details__right .idx-details__address,
.idx-details__right .idx-details__share-this {
  grid-column: span 4;
}

.idx-details__share-this {
  text-align: left;
}

.IDX-wrapper-standard .idx-details__right .idx-details__address {
  font-weight: 500;
}

.IDX-wrapper-standard .idx-details__right .idx-details__address small {
  line-height: 27px;
  padding-top: 7px;
  font-size: 20px;
}

.idx-details__right #st-1 {
  text-align: left;
}

.idx-details__right #st-1 .st-btn {
  height: 39px;
  line-height: 39px;
}

.idx-details__right #st-1 .st-btn>img {
  display: inline-block;
  height: 23px;
  width: 25px;
}

.idx-details__right .IDX-panel-body .idx-field .idx-text {
  color: #000;
  font-weight: 500;
}

.idx-details__right .idx-text {
  color: #000;
  font-weight: 500;
}

.idx-field__propStatus,
.idx-field__bedrooms,
.idx-field__totalBaths,
.idx-field__fullBaths,
.idx-field__partialBaths,
.idx-field__sqFt,
.idx-field__countyName,
.idx-field__yearBuilt,
.idx-field__propType {
  width: 33.33%;
  float: left;
  padding: 0 6px;
}

.idx-details__right .idx-field.idx-field__propType+div {
  clear: both;
}

.idx-details__right .idx-field.idx-field__propType+div+.idx-text {
  color: var(--primary-color);
}

.idx-details__body {
  display: block;
}

.idx-details__actions {
  display: flex !important;
  flex-wrap: wrap;
  margin: 20px 0 !important;
}

body .idx-details__actions .idx-action__link {
  display: block;
  font-size: 15px;
  padding: 8px 9px;
  border: 1px solid var(--primary-color);
  background: #fff;
  margin: 0 4px 10px 0;
  color: var(--primary-color);
  border-radius: 6px;
  text-align: center;
}

.IDX-wrapper-standard .idx-page__details .idx-details__price {
  color: red;
}

.IDX-wrapper-standard .idx-page__details .idx-details__price small {
  margin-top: 6px;
}

.idx-details__left {
  display: block !important;
}

body .idx-details__actions .idx-action__link:hover {
  color: var(--primary-text-color);
  background: var(--primary-color);
}

/* accrodion */

.IDX-wrapper-standard .idx-details__body .IDX-panel-title {
  font-weight: 600;
  padding: 0;
  border-bottom: 0;
  font-size: 18px;

}

.IDX-wrapper-standard .idx-details__body .IDX-panel-heading {
  padding: 15px;
  background: #f5f6f7;
}

.IDX-wrapper-standard .IDX-collapse .IDX-field .idx-text,
.IDX-wrapper-standard .IDX-collapse .IDX-field .idx-label {
  display: inline-block;
  padding-left: 5px;
}

.IDX-wrapper-standard .IDX-panel-title>a {
  color: var(--primary-color) !important;
}

.IDX-wrapper-standard .IDX-panel-title>a:hover {
  color: var(--primary-color) !important;
}

.IDX-wrapper-standard .IDX-panel-title>a .IDX-icon-arrow-up {
  border-right: 2px solid var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
  float: right;
  height: 10px;
  position: relative;
  top: 5px;
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
  width: 10px;
}

.IDX-wrapper-standard .IDX-panel-title>a:hover .IDX-icon-arrow-up {
  border-right-color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

#IDX-main.IDX-category-details .IDX-panel-heading .IDX-panel-collapse-toggle.IDX-collapsed span {
  top: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.IDX-wrapper-standard .idx-details__body .IDX-panel-body {
  display: block;
}

.idx-details__body .IDX-panel-body .IDX-label,
.idx-details__body .IDX-panel-body .IDX-text {
  font-size: 17px;
}

.idx-details__body .IDX-panel-body .IDX-label {
  color: #000;
}

.idx-details__body .IDX-panel-body .IDX-field {
  margin-bottom: 7px;
}

/* similar proerty css */

#IDX-similar-listings-title {
  text-align: center;
  padding-bottom: 22px;
  font-size: 24px;
  font-weight: 600;
}

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

.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 .IDX-similar-listings--item-MLSLogo,
.IDX-similar-listings--item .IDX-mlsSelectorRulesCourtesy {
  display: none;
}

.IDX-wrapper-standard .idx-page__details .idx-details__sidebar .IDX-similar-listings--item-image {
  height: unset;
}

.IDX-wrapper-standard .idx-page__details .idx-details__sidebar .IDX-similar-listings--item-image img {
  width: 100%;
  object-fit: cover;
  height: 200px;
}

.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 !important;
  margin-bottom: 7px;
}

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

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

.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);
  border: none;
}

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

/* contact form */

#IDX-detailscontactContent>div:nth-child(2) {
  display: none;
}

#IDX-detailscontactFormWrap {
  width: 100%;
  margin-top: 10px;
}

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

#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 textarea.IDX-form-control {
  height: 100px;
}

.IDX-wrapper-standard a:focus,
.IDX-wrapper-standard a:hover {
  text-decoration: none !important;
}

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

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

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

#IDX-contactAccountInfo {
  text-align: left !important;
}

.IDX-wrapper-standard .idx-page__details .idx-details__sidebar .idx-agent-info .IDX-btn {
  background-color: var(--primary-color);
  color: var(--primary-text-color) !important;
  border: none !important;
}

.IDX-wrapper-standard .idx-page__details .idx-details__sidebar .idx-agent-info .IDX-btn:hover {
  background-color: var(--secondary-color);
  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(--secondary-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(--secondary-color);
}

#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(--secondary-color);
}

#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(--secondary-color);
}

.IDX-wrapper-standard .idx-page__details .idx-details__sidebar .IDX-contactAccountHeader {
  padding-bottom: 14px;
  font-size: 24px !important;
  text-align: center;
}

.idx-field__remarks {
  margin-top: 20px;
}

.idx-details__right .idx-label {
  font-size: 14px;
  color: #000;
  margin-bottom: 3px;
}

#IDX-main.IDX-wrapper-standard .IDX-lead {
  font-size: 16px;
  font-weight: 400;
}

#IDX-openHouseHeader {
  margin-bottom: 20px;
}

.IDX-openHouseWrapper {
  background: var(--primary-color);
  color: var(--primary-text-color) !important;
  padding: 10px 20px 20px;
}

@media (max-width:1023px) {
  #IDX-detailsWrapper {
    display: block;
  }

  .idx-details__main {
    width: 100%;
  }

  .idx-details__sidebar {
    width: 100%;
    padding: 0;
  }

  #IDX-similar-listings-result {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

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

  .IDX-wrapper-standard .idx-page__details .idx-details__sidebar .IDX-similar-listings--item-image img {
    height: 240px;
  }

}

@media (max-width:850px) {
  .IDX-wrapper-standard .idx-page__details .idx-details__sidebar .IDX-similar-listings--item-image img {
    height: 200px;
  }

  body .idx-details__actions .idx-action__link {
    display: block;
    font-size: 14px;
    padding: 8px 5px;
    margin: 0 5px 0px 0;
  }

  body .idx-details__actions .idx-action__link i {
    font-size: 10px;
  }

}

@media (max-width:767px) {
  .idx-header__nav div:first-child {
    margin-top: 0;
  }

  .idx-header__nav div:last-child {
    justify-content: flex-start;
  }

  .idx-header__nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .IDX-wrapper-standard .idx-header__nav div:first-child a.idx-nav__link {
    color: #fff !important;
    background-color: var(--primary-color) !important;
  }

  .IDX-wrapper-standard .idx-header__nav div:first-child a.idx-nav__link:hover {
    color: #fff !important;
    background-color: var(--secondary-color) !important;
  }

  #IDX-similar-listings-result {
    grid-template-columns: 1fr;
  }

  .IDX-wrapper-standard .idx-page__details .idx-details__sidebar .IDX-similar-listings--item-image img {
    height: auto;
  }

  .idx-field__propStatus,
  .idx-field__bedrooms,
  .idx-field__totalBaths,
  .idx-field__fullBaths,
  .idx-field__partialBaths,
  .idx-field__sqFt,
  .idx-field__countyName,
  .idx-field__yearBuilt,
  .idx-field__propType {
    width: 50%;
    float: left;
  }
}

.IDX-wrapper-standard .idx-page__details a:focus {
  outline: none !important;
}

.IDX-wrapper-standard #IDX-map {
  height: 500px;
}

.IDX-wrapper-standard #IDX-saveProperty {
  background-color: transparent !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