Example Custom CSS

Users on the Professional and Business Plan are able to add custom CSS to their Pages. Below are a few common scenarios for custom CSS, but these are certainly not the only things you can do.

Change text color to white

/*** Make text white ***/
.vdp-datepicker__calendar { color: #FFF !important; }
.vdp-datepicker__calendar .cell.day { color: #FFF !important; }
.vdp-datepicker__calendar header .prev:after { border-right-color: #FFF !important; }
.vdp-datepicker__calendar header .next:after { border-left-color: #FFF !important; }

Remove border-radius

/*** Remove border radius ***/
#visitor-page .calendar-wrapper { border-radius: 0px; }
#visitor-page .timelist-wrapper { border-radius: 0px; }

Calendar View: remove the toolbar (i.e. timezone)

/*** Hide toolbar in Calendar View ***/
#full-calendar-toolbar { 
  opacity: 0; 
  margin-bottom: -3rem;
  pointer-events: none;
}

Changing the font family within the confines of the browser's available CSS fonts

/*** Changing the font family ***/
#visitor-page {
	ont-family: Georgia, serif;
}

Changing the font family to external links (i.e. Google fonts "Fascinate") - requires Custom HTML capabilities (Business Plan and Enterprise Plan)

/*** Changing the font family ***/
/*** Links to be added in HTML using custom HTML feature ***/
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fascinate&display=swap" rel="stylesheet">
/*** CSS needed ***/
#visitor-page {
	ont-family: 'Fascinate', cursive;
}

Note: If you desire to make more sophisticated CSS alterations, we advise you to consult your IT department or seek assistance from an individual possessing the required CSS/HTML expertise. Sprintful support is limited to giving the above examples.