CSS Code (Advanced)

Advanced CSS Design

Changing the Design of the Form

This information is for those who want to be able to make changes to the design and layout of their form. It involves using CSS to make the changes. If you need to learn more about CSS, there is a lot of info on the web.

Here is one place to start : W3schools, or for something more in depth - CSS Tricks.

Where to place the CSS

There are two places you can add CSS. Directly on each field which it will apply, or at the form level so it applies to the whole form.

Applying at the field level

When you click a field you wish to edit, a link will appear below the Save Form button - 'Show Design'.

Click 'Show Design' and there will be two new boxes that appear in the field - CSS Class and CSS.

1. CSS Class -adds a single word into CSS and this will add the class name onto the form. Note that you will need to describe this class at the form level.

2. CSS - allows you to add text for this field. It does not need any selectors because it is added directly to the DIV element surrounding the label and edit box. e.g. font-size:2em

See the Examples section below for how you can change the width of your fields.

Applying at the form level

CSS added to the Form - Form Settings tab applies to the whole form.

This content is placed between style tags:

<style>...</style>

These are at the head of the form and as such will need to use the selectors to identify which elements you wish to change. Each element has a class so that you can style it - and is surrounded by an element ID if you need to get specific

.cellM {font-size:2em}

If you wish to style the Amount field using buttons, see here for more details.

Example changes

To change the width of your field

1. Click on the field you want to change in the build form e.g. gender

2. Click Show design

   

3. You now see 2 more fields available in 'gender' - enter the word narrow in the first box

   

4. Repeat this for any others you want to have the same width

5. Click on Form settings

6. In the CSS box enter the following

.narrow select, .narrow input {width : 100px !important}

This will change all the drop down fields (as gender is) and any input fields e.g. a simple text box - or a tick box! - to be 100px wide.

To make the "short text" field the same width as the multiline text

Add at the form level CSS to make the width 90% of the page (so it is responsive)

#content .cellM { width:90% !important}

Change the colour of the background (behind the white form area)

body {background-color:red}

Change the colour of the form background (normally white)

#content {background-color:#d7d7d7}

Change the font used for the labels

.label {font-family:serif}

Change the Horizontal Line thickness and colour

.labelwide hr {
    border-top: 5px solid #b6b6b6;
}

Change the layout so the entry boxes appear beneath the labels, not beside

You will need the following 3 lines

.data {float:none}
.label {width:90%}
.icoHelp {float:none}

Change the text beside a radio button go full width

.radiotext { width: calc(100% - 30px) !important }

Increase the spacing between an Independent checkbox label and the checkbox

.cellTickBox {margin: 3px 3px 3px 30px}

where the margin values relate to: top, right, bottom, left, margins of the checkbox.

Change the color of the Submit, Reset, Next or Back buttons

For the Submit button there is an image that you need to remove first, then set the colour you want. Note that you have the 'hover' (i.e. when the mouse moves over it) too.

.submitbutton {
background-image: none; background-color: red; color: white;
}

.submitbutton:hover {
background-image: none; background-color: blue; color: white;
}

where the background-color: defines the background colour and color: defines the colour of the text.

The Reset button is the same as Submit - just change the submitbutton: to buttonSecondary:

For the Next and Back buttons, change submitbutton: to button[type="button"]:

Change the colors of the help tip box

.entryhelp {background-color: #000; color:#fff; border-color:red}

By inspecting the HTML you can see the classes and structure of the page such that you should be able to easily identify the info you need to be able to style it.

Amount Block (buttons) - change 'Other' to something else

This uses both CSS and Javascript. Change Your contribution to suit your needs.

.amtItemOther .amtButton { color: transparent}
.amtList li .amtButton {
    width: 120px;
}
</style>
<script>
function userPageLoaded() {
$(".amtButtonActive").html('Your contribution').css('color','#ffffff');
}
</script>
<style>

This does the following:

• CSS - sets the original text to transparent, then sets the button width to 120px (adjust for your needs)
• Javascript (within the script tags)- sets the button text to 'Your contribution' and resets the colour to white.

Amount Block (drop down) - change 'Other amount' to something else

Change Your contribution to suit your needs.

.currother {
  visibility: hidden;
  position: relative;
}

.currother:before {
  width: max-content;
  visibility: visible;
  position: absolute;
  content: "Your contribution";
}