The ClickDimensions web content editors allow users to make a number of stylistic changes, such as changing the field layout, font colors, font type, etc. However, adding CSS to your record allows for many more styling options in addition to what is provided out-of-the-box. The following example CSS can be added to your form in the code editor or your survey or subscription page in an HTML component in order to modify your record’s style.
Change the Font Type to a Font that is not Provided Out-of-the-Box
The fonts we provide are web safe fonts, which are generally recognized across all browsers and email clients. If you want to use a font that we do not provide, you can do so by adding the following CSS:
span {
font-family: Monotype Corsiva, Helvetica, Arial !important;
}
Please note that if you choose a font that is not widely supported, any browsers or email clients that do not support the font will change it to something else, such as Times New Roman. The benefit of using the font family property is that it allows you to list several fonts, and if the first font in the list is not supported, the second will be used and so on. The helps maintain control over the page’s style in the case where your font choice is not widely supported. The !important at the end of the font family attribute indicates that this CSS should override the default font value we already have in place for the web content record.
Change the Background Color
Add the following CSS to set a custom background color:
body
{
background: rgb(120,173,200);
}
In this example, RGB represents the rgb (red, green, blue) color encoding values for the color you want to use. In this color encoding style, each of the three values can be a number from 0 to 255, and each represents how much red, green, and blue is in the color respectively. Rgb(0,0,0) is black, rgb(255,255,255) is white, and every other color, such as the blue in the example, is something in between. You can also use a hexadecimal value for your color or use some generic color names, such as red.
Make the Background Transparent
You can make the background of your form transparent by setting the color as “transparent” instead of a specific rgb or hexadecimal color value.
body
{
background: transparent;
}
In this example, the page the form is embedded on has a parchment texture background image.
Round the Corners of Fields
Add the following HTML to round the corners of your fields:
/*— FIELD INPUT STYLE —*/
.clickdform input[type=’text’],
.clickdform textarea,
.clickdform select
{
border-radius:9px;
}
The greater the number you set for border-radius, the more curved the corners will be.
Add Extra Space between Fields
Add the following CSS to increase the amount of space between fields.
span {
padding-top: 20px;
}
This CSS is actually adding space above the label on the field, which pushes the fields further apart. If you want more space between the label and the field, you can use the property padding-bottom instead or padding-top.
Any of the examples in this post can be combined for use on the same record, and there are many other CSS styling options beyond what is covered here. Take some time to experiment and see what works for you!
Written by Rhys Saraceni, ClickDimensions Marketing Success Manager
Powered by WPeMatico