Custom CSS can be added into forms and calendars to ensure that these match the themes you have on your website for a seamless Student experience.
This article is written for the CSS novice, and contains code snippets for you to copy and paste. New to CSS? Start here: https://www.w3schools.com/css/css_intro.asp
❗ Disclaimer: Feel free to utilise these options, but if they cause any unexpected issues, please keep in mind that we do not offer assistance for any custom CSS themes made in Webform Builder or Calendar. For professional results, always ask a CSS expert for help. You can always switch back to one of the pre-made themes whenever you'd like.
How it works
The Custom theme only changes the Default theme (see the full CSS for the Default theme here), so if, for example, you want to change the font to 'Montserrat', paste this in and the rest of the provided CSS themes will be unaffected. If you make a change to your Custom Theme, you will need to re-save each form it's applied to in order to see the changes.
Table of Contents for CSS changes in this article:
1 - Change the font
/*
Hidden comment:
This will change the fonts.
*/
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
body {
font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}
2 - Change the background colour
/*
Hidden comment:
This will change the colour of the page background.
*/
body {
background-color:#F7F3FD;
}
3 - Change the field label colour
/*
Hidden comment:
This will change the colour of the field labels.
*/
.control-label {
color:#604A98;
}
4 - Change the size of texts styled with H1, H2, H3, etc
/*
Hidden comment:
This will change the size of any text styled with H1, H2, H3, H4, H5 or H6.
*/
h2 {
font-size:72px
}
5 - Change the width of number entry fields
/*
Hidden comment:
This will change the width of number entry fields.
*/
input[type=number] {
width: 15%;
min-width: 90px;
}
6 - Hide the WFMID at the bottom of the form (change colour)
/*
Hidden comment:
This will change the colour of the Web Form identifier ie: "WFM6024.01.L" to make it less prominent. If you set this to the page background colour it disappears completely.
*/
p#wfm_id {
color: #fff !important;
}
7 - Hide the 'By Student CRM' link at the bottom of the form
/*
Hidden comment:
This will completely hide the 'By Student CRM' link by telling the form to not render it at all.
*/
.crm-pro-info-link {
display: none;
}
8 - Hide the EVWID and 'By Student CRM' link at the bottom of the Calendar
/*
Hidden comment:
This will hide the Calendar identifier ie: 'EVW12320' and the 'By Student CRM' link.
*/
p#evw_id, p#crm_promo_link {
display: none;
}
9 - Change the size of all button types
/*
Hidden comment:
This will change the button size in booking forms in EVM, POD and AOD.
Choose the button type you wish to make bigger:
- Finish button = btn-success
- Edit button = btn-primary
- Cancel button = btn-danger
- Postcode Lookup button = btn-info
- Submit button = btn-default
or you can change all these buttons by just using = btn
*/
.btn-success {
font-size:30px !important;
}
10 - Change the form's break-points, so that an embedded form does not right-align (and the labels don't have lots of white space next to them)
/*
Hidden comment:
This will change the break points of the form so that embedded forms go from desktop to mobile, and skip tablet.
*/
@media (min-width: 768px) and (max-width: 992px){
.container {
width: 100% !important;
}
.col-md-4 {
width: 33.33333% !important;
}
.col-md-6 {
width: 50% !important;
}
}
11 - Change the button colour and button text colour and size
/*
Hidden comment:
This will change the colour of the button background, the button text and the button size.
Choose the button type you wish to change:
- Finish or APS 'Submit Application' button = btn-success
- Edit button or APS 'Save for Later' = btn-primary
- Cancel button = btn-danger
- Postcode Lookup button = btn-info
- Submit button = btn-default
*/
.btn-default {
background-color:#049cdb;
border-color:#049cdb;
color:#fff;
font-size:20px
}
/*
Hidden comment:
If you want many types of button type to be identical, you can group them with a comma.
*/
.btn-primary, .btn-success {
background-color:#049cdb;
border-color:#049cdb;
color:#fff;
font-size:20px }
12 Change the formatting for Consent text
/*
Hidden comment:
This will change the colour, boldness and size of the Consent affirmation. It will also bring the Consent Info Text onto a new line under the Affirmation
*/
.prvAffirmation {
color:purple;
font-weight:700;
font-size:16px;
display:block
}
13 - Add a "Help Text" box around some text
How it looks:
The code:
/*
Hidden comment:
This will add a blue border and a light blue background to some text to indicate it's help text. In this case we are using Header 4, but you could use any Header from 3 down.
*/
h4,.h4 {
font-size:14px;
color:#31708f;
border:1px solid #bce8f1;
border-radius:4px;
padding:15px;
margin-bottom:20px;
background-color:#d9edf7
font-weight:400;
line-height:20px
}
To use in a form, add a Text Block and use the Formatting dropdown to style your text to the Heading chosen above (in our example, that's Heading 4):
Optional: you could also start your help text with an Information Emoji ℹ️ if you wanted: https://emojipedia.org/information/
14 - Change the colour of the 'By Student CRM' link at the bottom of the form
/*
Hidden comment:
This will change the colour of the 'By Student CRM' link.
*/
p#crm_promo_link {
color: #000000;
}
15 - Change the hover effect of the button
/*
Hidden comment:
This will change the size and colour of a button when a student puts their mouse pointer over it.
Choose the button type you wish to change:
- Finish or APS 'Submit Application' button = btn-success
- Edit button or APS 'Save for Later' = btn-primary
- Cancel button = btn-danger
- Postcode Lookup button = btn-info
- Submit button = btn-default
or you can change all these buttons by just using = btn
*/
.btn-info:hover {
background-color:#e6e6e6;
border-color:#adadad;
color:#333;
font-size:20px
}