The following codes can be copied and pasted into the Advanced Design › Page CSS section in your Branding settings to make some custom tweaks to your client access pages.

Changing the Default Font Styling (Font Family, Sizing, Color)

/* Sets font family for all body text in client access. */
body, div, p, td, th, .font-default {
font-family: "Enter Font Name Here" !important;
font-size: 14px;
font-style: normal;
letter-spacing: 1px;
font-weight: normal;
text-decoration: none;
text-transform: none;
}
/* Sets font family for all headers in client access. */
.h1, .h2, .h3, .h4, h1, h2, h3, h4, label {
    font-family: "Enter Font Name Here" !important;
}

You'll also want to paste the following into the Page Header HTML Tab to install the font's stylesheet:

<link href="https://fonts.googleapis.com/css?family=Enter+Font+Name+Here" rel="stylesheet">

Hiding the “Athletics” box on the Contact Cards in Your Address Book

.athletics-box {
display: none;
}

Removing the Underline on Required Fields on Your Inline Contact Form

/* iFrame Contact Form, no underline */

.contactFormContainer .required label {
text-decoration: none !important;
}

Removing the Electronically Sign Contract and Required Fields Language at the Top of Your Contracts

/* hides the Electronically Sign Contract and Required fields. Add whatever you need to the top of the contract instead. */
.contractsign h1 {
  display:none;
}

.contractText h1 {
  display: block;
}

.contractsign p {
  display:none;
}

.contractText p {
  display: block;
}

/* Inside quotes, hides the Electronically Sign Contract and Required fields. Add whatever you need to the top of the contract instead. */
.quotecontract form h1:first-of-type {
  display:none;
}

.quotecontract form p:first-of-type {
  display:none;
}

Customizing the Stages of a Quote

/* This changes the wording of booking steps in a quote.*/
#QuoteCustomizeStep .title {
font-size: 0;
}
#QuoteCustomizeStep .title:after {
content: "QUOTE";
font-size: 16px;
}
#QuestionnaireStep .title {
font-size: 0;
}
#QuestionnaireStep .title:after {
content: "QUESTIONNAIRE";
font-size: 16px;
}
#ContractSignStep .title {
font-size: 0;
}
#ContractSignStep .title:after {
content: "CONTRACT";
font-size: 16px;
}
#PayRetainerStep .title {
font-size: 0;
}
#PayRetainerStep .title:after {
content: "RETAINER";
font-size: 16px;
}

Changing the Default Electronic Contract Signature Terms Below the Contract Signature Fields

/* Changes the contract signature legal language. */
#ButtonFooter .taveLegal{
font-size: 0;
padding-top: 20px
}
#ButtonFooter .taveLegal:after {
content: "Blah blah blah.";
font-size: 12px;
}

Making Questionnaire Fields Full Width

/* Makes questionnaire fields full width. */
body.questionnaire #Content .qEditor input.largeSize,
body.questionnaire #Content .qEditor select.largeSize,
body.questionnaire #Content .qEditor textarea.largeSize,
body.quotequestionnaire #Content .qEditor input.largeSize,
body.quotequestionnaire #Content .qEditor select.largeSize,
body.quotequestionnaire #Content .qEditor textarea.largeSize {
width: 100%;
}
body.questionnaire #Content .qEditor input.mediumSize,
body.questionnaire #Content .qEditor select.mediumSize,
body.questionnaire #Content .qEditor textarea.mediumSize,
body.quotequestionnaire #Content .qEditor input.mediumSize,
body.quotequestionnaire #Content .qEditor select.mediumSize,
body.quotequestionnaire #Content .qEditor textarea.mediumSize {
width: 100%;
}

Making the Background Transparent On Your Embedded Contact Form 

/* Makes iframe contact form background transparent. */
body.inline,
body.inline #Header,
body.inline #Page,
body.inline #Page > div {
    background: transparent !important;
}

You'll also add the following to your iFrame code where it's embedded on your website: allowtransparency="true" 

Removing the "Editable Until" Wording at the Bottom of Questionnaires

/* Hides editable text at the bottom of questionnaires. */
.questionnaire-edit-notice {
display: none;
}

Did this answer your question?