All Collections
Customizing Your Táve Account
Branding
CSS Code Snippets for the Advanced Design Editor
CSS Code Snippets for the Advanced Design Editor

Are you a wizard of CSS? Here are some advanced changes to help tweak your branding.

Nicole avatar
Written by Nicole
Updated over a week ago

About CSS

CSS can give you the option to modify the way your Táve looks to your clients. While most of the appearance comes from the inner workings of the software, Táve does allow you to customize the CSS further if you'd like using your Advanced Design Editor that you'll find at the bottom of your branding settings for each brand.

Before you go, you need to know three things:

  1. Táve is a constantly evolving software, and our CSS is subject to change at any time. This means you'll want to keep eye on things and make sure your code still looks perfect.

  2. As wonderful as our support team is, they're experts in Táve, not necessarily CSS, so we do not provide official support for CSS. Any changes you make are done at your own risk and are subject to change in the future.

  3. Be sure to review and adhere to our HTML Content Security Policy

Font Customization

Changing the Default Font Family

If you want to change the font displayed on Client pages, it's recommended that you do so with the method described on our Custom Fonts article.

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

For controlling how fonts display on specific elements you can use the following as a starting point.

/* 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 and color for contact form fields in client access. */
label {
    font-family: "Enter Font Name Here" !important;
    color: #000000 !important;
}
/* Sets font family for all headers in client access. */
h1 {
font-family: "Enter Font Name Here" !important;
font-size:24px;
letter-spacing:.4px;
font-weight:bold;
color:#000000
}
h2 {
font-family: "Enter Font Name Here" !important;
font-size:20px;
font-style:normal;
letter-spacing:.4px;
color:#000000
}
h3 {
font-family: "Enter Font Name Here" !important;
font-size:18px;
letter-spacing:.4px;
color:#000000
}

/* Button Defaults */
.btn-brand, .btn-default, .btn-brand:visited, .btn-primary, .btn-primary:visited {
color: #fff;
background-color: #b5d2c9;
border-color: #42a5a0;
background-image:none;
font-family: 'Adobe Caslon Pro';
font-weight: 700;
color: #fff !important;
}
/* Button Hover */
.btn-brand:hover, .btn-default:hover, .btn-primary:hover {
background-color: #9ac5c3;
border-color: #42a5a0;
background-image:none;
font-family: 'Adobe Caslon Pro';
font-weight: 700;
color: #fff;
}

If you want to set a custom font family for a specific element, you should also include the font family in and @import as described in the Custom Fonts article.

Custom Email Font

This is applied in the Email Container HTML tab of the Advanced Design section at the bottom of Branding in its entirety. Then, you'll replace Enter Font Name Here in the 3 places it's mentioned with the Google Font family of your choice (in the @import url line, if the font family has more than one word, you'll separate each word there with +, i.e. Adobe+Caslon+Pro).

<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">

/* TYPOGRAPHY */
    @import url(https://fonts.googleapis.com/css?family=Enter+Font+Name+Here);

h1,h2,h3,h4,h5,h6 {
font-family: "Enter Font Name Here", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.1; margin-bottom:15px; color:#000000;
}

h1 {
font-size:24px;
letter-spacing:.4px;
font-weight:bold;
}

h2 {
font-size:20px;
letter-spacing:.4px;
}

h3 {
font-size:18px;
letter-spacing:.4px;
}

* { font-family: "Enter Font Name Here", "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-size: 16px; }

a { color:#0000EE; text-decoration: underline; }

</style>
</head>
<body bgcolor="#ffffff" color="#000000">
<br>
<br>
    {{Content}}
<br>
<br>
<img src="{{EmailLogo}}" width="{{EmailLogo.width}}" height="{{EmailLogo.height}}" border="0">
</body>

___

Address Book and Contacts

Hiding the “School & Athletics” Box in the Profile Fields from the Client Portal

/* Hides athletics box from client profile in portal. */
.athletics-box {
display: none;
}

___

Contact Form

Removing the Underline on Required Fields on Your Inline Contact Form and Questionnaires

/* iFrame Contact Form, no underline */

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

#Content .qEditor .requiredField .form-group.required label.draw-under, #Content .qEditor .requiredField label.control-label:not(.draw-under) {
  text-decoration: none !important;
}

/* Remove underline for required questions in questionnaire. */
.required label {
text-decoration: none !important;
}

Making the Background Transparent On Your Embedded Contact Form 

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

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

Set Mobile Date Picker Background to White

/* Sets mobile date picker background to white. */
.datepicker {
    background: white;
}

___

Contracts

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

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

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

___

Favicon

Add to the “Page<head>html” tab include the following:

<link rel="shortcut icon" href="https://link_to_your_favicon_here" type="image/x-icon" />

When creating your own custom favicon, it’s best practice to make it a 32×32 png file.  If yours is too large, it won’t work.  Your favicon image file can be hosted anywhere online, such as on your website, or anywhere with a public URL.

___

Invoices

Hide Payment Options on Invoice

/* Hides payment options on invoice direct link. */
#OtherOptions {
   display: none;
}

Hide "Contact Us" Section on Invoices

/* Hides contact us language on invoices. */
.invoice-contact-call-to-action {
   display: none;
}

___

Quotes

Customizing the Names of 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;
}

Customizing "You may also like..." in a Quote

/* Customize 'You may also like' in quotes. */
h2.optional-items-info {
font-size: 0;
line-height: 16px;
}
h2.optional-items-info:after {
content: 'Customize Your Collection Below';
font-size: 20px;
}

___

Questionnaires

Change Text on Send Response Button on Questionnaires

/* Changes label on send response button on questionnaires. */
body.questionnaire #Continue {
font-size: 0;
}
body.questionnaire #Continue:after {
content: "SUBMIT";
font-size: 16px;
}

Questionnaires › Remove Underline on Required Fields

/* Remove underline for required questions in questionnaire. */
.required label {
text-decoration: none !important;
}

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

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

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%;
}
Did this answer your question?