About CSS

IMPORTANT!

Before changing any CSS it's important to note:

Táve is constantly evolving software and our CSS is subject to change at any time. The means you'll want to keep an eye on things and make sure your code still looks perfect.
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.
Be sure to review and adhere to our HTML Content Security Policy

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 the Advanced Design › Page CSS editor in your branding settings for each brand.

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).

NOTE: The customizations made to your email font will be applied upon sending the email from Táve. They will not be visible in the text editor or email preview.

<!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

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