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

Font Customization

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

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

Custom Email Font

This is applied in the HTML Email 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>

Button Fonts and Colors

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

___

Address Book and Contacts

Hiding the “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;
}

___

Questionnaires

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?