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.

Still need help? Contact Us Contact Us