The following codes can be copied and pasted into the Page CSS tab of the Advanced Design Editor 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 {
font-family: "Enter Font Name Here";
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";
}

Changing the Default Color and Hover Color of the Buttons on Quotes

The code below sets the button background color to red, changing to black on hover, but you can change the color codes as needed to fit your branding.

.btn-default, .btn-brand {
color: #fff;
background-color: red;
border-color: black;
background-image:none;
}
.btn-default:hover, .btn-brand:hover {
color: #fff;
background-color: black;
border-color:black;
background-image:none;
}
.btn-default.disabled, .btn-default.disabled.active, .btn-default.disabled.focus, .btn-default.disabled:active, .btn-default.disabled:focus, .btn-default.disabled:hover, .btn-default[disabled], .btn-default[disabled].active, .btn-default[disabled].focus, .btn-default[disabled]:active, .btn-default[disabled]:focus, .btn-default[disabled]:hover, fieldset[disabled] .btn-default, fieldset[disabled] .btn-default.active, fieldset[disabled] .btn-default.focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:hover {
background-color: #f1f1f1;
border-color: #ccc;
}

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;
}

Hiding Images from Order Printouts

/* This hides images that were part of the quote message on an order printout.*/
#OrderPrintout .quoteMessage img{
display:none;
}

/* This hides images that were part of the ordered products on an order printout.*/
#OrderPrintout .quoteContainer .quoteItems img{
display:none;
}

Customizing Font Formatting in Quotes

/* This changes the font of product titles in a quote.*/
#PageContainer .invoice-items-table .nameCell .title {
    font-family: Lato,"Open Sans","Helvetica Neue",sans-serif;
    font-size:18px !important;
}

/* This changes the font of product descriptions in a quote.*/
#PageContainer .invoice-items-table .descCell {
    font-family: Lato,"Open Sans","Helvetica Neue",sans-serif;
    font-size:16px;
}

/* This changes the font of the booking steps in a quote.*/
#BookingFlow {
    font-family: Lato,"Open Sans","Helvetica Neue",sans-serif;
}

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. */
.transparentBackground {
  background: transparent !important;
}

body.inline {
  .transparentBackground;

  #Page, #Header, #Page>div {
    .transparentBackground;  
  }
}

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