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.

Claim Your Profile page

Claim Your Profile page thumbnail

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.
The 'Claim Your Free Homes.com Profile' title
.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.
text below title
.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.
additional copy content area
.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.
welcome page text area
.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.
confirmation page title
.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.
confirmation page sub-title
.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.
congrats page title and subtitle area
.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.
confirmation page instruction dialog area
.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.
confirmation page instruction list area
.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.
congrats page instruction dialog and list area
.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*/
}

Partner Connect page

Partner Connect page thumbnail

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.
PartnerConnectName locations
.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;
}