Homes.com Connect provides a process for approved Partners the option to customize some elements of the Claim Your Profile and Partner Connect pages via CSS and JSON.
Use the following examples and classnames to create your custom.css file.
The following classnames can be used to change elements that will apply to all pages.
a:link,
a:visited,
a:active {
color: #277392;
}
a:hover {
color: #223a58;
}
.page__welcome .activate--title,
.existing--title,
.page__congrats .activate--title,
.page__congrats .page--description,
.page--dialog {
color: #277392;
}
.input-background__welcome {
border-color: #277392;
}
.form .form--item .form--label {
color: #277392;
}
.ui-tooltip {
border-color: #277392;
}
.ui-tooltip:before {
border-color: #277392;
}
.ui-tooltip .ui-tooltip-content {
color: #000;
}
.arrow:after {
border-color: #277392;
background: #277392;
}
.page__welcome .button__pagination,
.page__congrats .button__pagination,
.button__field.button__login {
background: #277392;
color: #ffffff;
}
.page__welcome .button__pagination:hover,
.page__congrats .button__pagination:hover,
.button__field.button__login:hover {
background: #223a58;
color: #ffffff;
}
.header--logo {
max-width: 203px;
height: 32px;
background-image: url('https://via.placeholder.com/203x32');
background-size: contain;
background-position: center ;
background-repeat: no-repeat;
}
.site__welcome {
background-image: url('https://via.placeholder.com/1440x850');
}
.site__welcome {
background-image: none;
background-color: #cccccc;
}
The following classnames can be used to replace certain text elements with an image. To achieve this we need to remove the current text by eliminating any font size and setting it up to use background images.
.page__welcome .activate--title {
font-size: 0;
background-size: contain;
background-position: left;
background-repeat: no-repeat;
padding: 0;
background-image: url('https://via.placeholder.com/351x27');
height: calc(100vw * (27 / 351)); /*(img-height / img-width)*/
max-height: 27px; /*img-height*/
width: 100%;
max-width: 351px; /*img-width*/
}
.page__welcome .activate--sub-title {
font-size: 0;
background-size: contain;
background-position: left;
background-repeat: no-repeat;
padding: 0;
margin: 12px 0 24px 0;
background-image: url('https://via.placeholder.com/800x75');
height: calc(100vw * (75 / 800)); /*(img-height / img-width)*/
max-height: 75px; /*img-height*/
width: 100%;
max-width: 800px; /*img-width*/
}
.page__welcome .activate--copy {
display: block;
font-size: 0;
background-size: contain;
background-position: left;
background-repeat: no-repeat;
padding: 0;
margin: 12px 0 24px 0;
background-image: url('https://via.placeholder.com/800x150');
height: calc(100vw * (150 / 800)); /*(img-height / img-width)*/
max-height: 150px; /*img-height*/
width: 100%;
max-width: 800px; /*img-width*/
}
.page__welcome .activate--title,
.page__welcome .activate--sub-title,
.page__welcome .activate--copy {
display: none;
}
.page__welcome .activate {
font-size: 0;
background-size: contain;
background-position: left;
background-repeat: no-repeat;
padding: 0;
background-image: url('https://via.placeholder.com/800x450');
height: calc(100vw * (450 / 800)); /*(img-height / img-width)*/
max-height: 450px; /*img-height*/
width: 100%;
max-width: 800px; /*img-width*/
}
.page__congrats .activate--title {
font-size: 0;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
padding: 0;
margin: auto;
background-image: url('https://via.placeholder.com/248x27');
height: calc(100vw * (32 / 248)); /*(img-height / img-width)*/
max-height: 32px; /*img-height*/
width: 100%;
max-width: 248px; /*img-width*/
}
.page__congrats .activate--sub-title {
font-size: 0;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
padding: 0;
margin: 12px auto 0;
background-image: url('https://via.placeholder.com/298x22');
height: calc(100vw * (22 / 298)); /*(img-height / img-width)*/
max-height: 22px; /*img-height*/
width: 100%;
max-width: 298px; /*img-width*/
}
.page__congrats .activate--title,
.page__congrats .activate--sub-title {
display: none;
}
.page__congrats .activate {
font-size: 0;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
padding: 0;
background-image: url('https://via.placeholder.com/297x67');
height: calc(100vw * (67 / 297)); /*(img-height / img-width)*/
max-height: 67px; /*img-height*/
width: 100%;
max-width: 297px; /*img-width*/
}
.page__congrats .page--description {
font-size: 0;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
padding: 0;
margin: auto;
background-image: url('https://via.placeholder.com/387x39');
height: calc(100vw * (39 / 387)); /*(img-height / img-width)*/
max-height: 39px; /*img-height*/
width: 100%;
max-width: 387px; /*img-width*/
}
.instructions--list {
font-size: 0;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
padding: 0;
margin: 24px auto 0;
background-image: url('https://via.placeholder.com/360x141');
height: calc(100vw * (141 / 360)); /*(img-height / img-width)*/
max-height: 141px; /*img-height*/
width: 100%;
max-width: 360px; /*img-width*/
}
.page__congrats .page--description,
.instructions--list {
display: none;
}
.page__congrats .page--row__primary {
font-size: 0;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
padding: 0;
margin: 24px auto;
background-image: url('https://via.placeholder.com/387x202');
height: calc(100vw * (202 / 387)); /*(img-height / img-width)*/
max-height: 202px; /*img-height*/
width: 100%;
max-width: 387px; /*img-width*/
}
You can customize the text on the page by placing a json file with the custom text in your approved resource location with this naming format:
<Resource_Location>/<PartnerBrandID>_create.json
For example, let's say your approved resource path is https://www.partnerdomain.com/css/brands
.
if you pass in "partnerbrandid=1234" to the Claim Your Profile page, your json file should be at url:
https://www.partnerdomain.com/css/brands/1234_create.json
.
The json file should be in this format:
{
"heading": "Custom Heading",
"subHeading": "Custom sub heading.",
"activateCopy": "Custom activate copy."
}
Note: The custom content can only be plain text -- HTML and script are not supported.
Each property in the json file corresponds to a section of text on the Claim Your Profile page:
Use the following examples and classnames to create your custom.css file.
The following classnames can be used to change elements that will apply to all pages.
a:link,
a:visited,
a:active {
color: #277392;
}
a:hover {
color: #223a58;
}
.txt-logo {
font-size: 0;
max-width: 556px;
height: 42px;
background-image: url('https://via.placeholder.com/556x42');
background-size: contain;
background-position: center ;
background-repeat: no-repeat;
}
.page--container .custom-branding--name {
color: transparent;
display: inline-block;
}
.page--container .custom-branding--name:before {
content: "";
background-image: url('https://via.placeholder.com/556x42');
background-size: contain;
background-position: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.page--module-bg:before,
.page--module:after {
background-color: #277392;
}
.form .form--item .form--field {
border-color: #277392;
}
.form .form--item .form--label {
color: #277392;
}
.button {
background: #277392;
color: #ffffff;
}
.button:hover {
background: #223a58;
}
You can customize the text on the page by placing a json file with the custom text in your approved resource location with this naming format:
<Resource_Location>/<PartnerBrandID>_connect.json
For example, let's say your approved resource path is https://www.partnerdomain.com/css/brands
.
if you pass in "partnerbrandid=1234" to the Partner Connect page, your json file should be at url:
https://www.partnerdomain.com/css/brands/1234_connect.json
.
The json file should be in this format:
{
"heading": "Demo Partner Brand Name",
"subheading": "A custom subheading",
"paragraph1": "Custom paragraph 1 content",
"paragraph2": "Custom paragraph 2 content"
}
Note: The custom content can only be plain text -- HTML and script are not supported.
Each property in the json files corresponds to a section of text on the Partner Connect page: