- 4 Minutes to read
- Print
- DarkLight
CSS Code (Advanced)
- 4 Minutes to read
- Print
- DarkLight
Advanced CSS Design
Changing the Design of the Form
This is an advanced feature which infoodle does not provide support for directly. There are too many different things that could be done with CSS for us to effective provide support, and every website is different.
Use this feature only if you have experience with CSS.
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.
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.
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
Click on the field you want to change in the build form e.g. gender
Click Show design
You now see 2 more fields available in 'gender' - enter the word narrow in the first box
Repeat this for any others you want to have the same width
Click on Form settings
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";
}