This article is written for the CSS novice. Copy and paste the following code into your Custom CSS in your Web Forms and Events Calendars for quick and easy effects.
(Disclaimer: use these if you like, but if they create unintended effects please remember that we do not provide support for any custom CSS themes you create in Web Form Builder or Calendar. You will get the idea of what can be changed if you get an expert in to help. Of course, you can always revert to one of the built-in themes at any time.)
For professional results always ask a CSS expert for help. Most users build their custom theme so that their web forms all match the CSS of the web page it is being embedded in. An expert can do this quickly.
New to CSS? Start here: https://www.w3schools.com/css/css_intro.asp
How it works
Your new Custom theme only applies your changes to the Default theme (see the full CSS for the Default theme here), so if you want to change the font to 'Montserrat' for example just 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 button size (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:
Or 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
}
Related
Learn more about: