Homes.com Connect Partner-Side Custom Branding
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.
Claim Your Profile page
Use the following examples and classnames to create your custom.css file.
Global Elements
The following classnames can be used to change elements that will apply to all pages.
Link Color
You can override the colors for all links just by targeting anchor tags.
a:link,
a:visited,
a:active {
color: #277392;
}
a:hover {
color: #223a58;
}
Title Color
You can override the colors for all titles using the following:
.page__welcome .activate--title,
.existing--title,
.page__congrats .activate--title,
.page__congrats .page--description,
.page--dialog {
color: #277392;
}
Form Field Color
You can alter the border colors on all the form fields with the following:
.input-background__welcome {
border-color: #277392;
}
Form Label Color
You can alter the label color on all the form fields with the following:
.form .form--item .form--label {
color: #277392;
}
Form Tooltip Color
The agent and broker code fields have toolips on the hover state. You can alter the colors of this element with the following:
.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;
}
Buttons
You can override the button colors using the following:
.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;
}
Custom Header Logo Image
To add a custom logo, you can override the default by replacing the background image. It's advised to use a transparent background if possible. Adjust the below styles based on your image location and dimensions.
.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;
}
Custom Page Background Image
To add a custom page background image, you can override the default by replacing the background image. It's advised to use a higher resolution image. Adjust the below styles based on your image location.
.site__welcome {
background-image: url('https://via.placeholder.com/1440x850');
}
Remove Page Background Image
To remove the background image and alter the background color you can use the following:
.site__welcome {
background-image: none;
background-color: #cccccc;
}
Replace Copy with Text Images
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.
Welcome Page Title
You can replace the 'Claim Your Free Homes.com Profile' title text with a text image using the following example. Adjust the below styles based on your image location and dimensions.
.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*/
}
Welcome Page Sub-Title
You can replace the text below the title with a text image using the following example. Adjust the below styles based on your image location and dimensions.
.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*/
}
Welcome Page Additional Copy
You can use the additional copy content area to add a text image, if necessary. Adjust the below styles based on your image location and dimensions.
.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*/
}
Welcome Page All Copy
You can replace all the text with a single image, instead of separate images as outlined above, using the following example. Adjust the below styles based on your image location and dimensions.
.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*/
}
Confirmation Page Title
You can replace the 'Congratulations' title text with a text image using the following example. Adjust the below styles based on your image location and dimensions.
.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*/
}
Confirmation Page Sub-Title
You can replace the 'Please Check Your Email!' sub-title text with a text image using the following example. Adjust the below styles based on your image location and dimensions.
.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*/
}
Congrats Page Title/Sub-title
You can replace both the title and sub-title text with a single image, instead of separate images as outlined above, using the following example. Adjust the below styles based on your image location and dimensions.
.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*/
}
Confirmation Page Instruction Dialog
You can replace the instruction dialog text with a text image using the following example. Adjust the below styles based on your image location and dimensions.
.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*/
}
Confirmation Page Instruction List
You can replace the instruction list with a text image using the following example. Adjust the below styles based on your image location and dimensions.
.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*/
}
Congrats Page Instruction Dialog & List
You can replace both the instruction dialog and list text with a single image, instead of separate images as outlined above, using the following example. Adjust the below styles based on your image location and dimensions.
.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*/
}
Custom Text
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:
Partner Connect page
Use the following examples and classnames to create your custom.css file.
Global Elements
The following classnames can be used to change elements that will apply to all pages.
Link Color
You can override the colors for all links just by targeting anchor tags.
a:link,
a:visited,
a:active {
color: #277392;
}
a:hover {
color: #223a58;
}
Custom Header Logo
To add a custom logo, you can override the default by using a background image. It's advised to use a transparent background if possible. Adjust the below styles based on your image location and dimensions.
.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;
}
[PartnerAccountName] Text
You can replace all instances of [PartnerAccountName] text within the copy, with an image using the following example. It's advised to use a transparent background if possible. Adjust the below styles based on your image location.
.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;
}
Custom Background Color
You can change the page background color that spans full page width behind the form using the following:
.page--module-bg:before,
.page--module:after {
background-color: #277392;
}
Form Field Color
You can alter the border colors on all the form fields with the following:
.form .form--item .form--field {
border-color: #277392;
}
Form Label Color
You can alter the label color on all the form fields with the following:
.form .form--item .form--label {
color: #277392;
}
Buttons
You can override the button colors using the following:
.button {
background: #277392;
color: #ffffff;
}
.button:hover {
background: #223a58;
}
Custom Text
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:
