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