V3 Customizing Themes

From Frevvodocs

frevvo Live Forms™ v3

Customizing Themes

Overview

This feature is available in the Professional Edition.

Use customized themes when:

• You want to give a particular form a certain look and feel that you cannot achieve using the properties in the Forms Designer, or
• You want several forms to have the same look and feel, and wish to apply the theme to all the forms instead of changing properties for one form at a time.

Perhaps the most common reason to customize a theme is to change your forms’ background color so the forms will blend in nicely with your existing Web site, but you can add as many other stylistic touches you wish to make your forms visually appealing. Once you create a customized theme, you can use it in as many forms as you like—including forms that already exist as well as those you haven’t created yet.

If you are customizing a theme for a single form, be aware of the various style properties that are available in the Forms Designer. Remember there are style properties for the form itself, as well as style properties for the individual controls in your form. You do not need to customize a theme if you wish only to change your form’s height, adjust the color and font of your labels, or create different types of borders around a specific control—you can make these changes simply by editing the appropriate properties.

If you are going to make extensive style changes you need an understanding of CSS and must spend a little time examining and making inferences from the structure and markup of the file (form.css) that frevvo uses for its own custom themes. A tool such as Firebug,can help greatly with this. On the other hand, frevvo gives you as a starting point a copy of the form.css file, which is well-commented. For many basic style changes, you do not have to do anything more than overlay the existing value or values with your own. We have provided several examples to get you started.

Note: Customized themes are not available in the Standard Edition.

Basic Steps

To create a customized theme for a form, follow these basic steps below. Some steps require more elaboration and are explained in detail below.

1. Download one of frevvo’s custom themes (for example, clear or professional blue) and save the zip file to your desktop.

2. Unzip the zip file

3. Make and save your style changes in the file called form.css—in some cases, you might edit other files too.

4. Zip the files back as they were. (In other words, don’t use a different directory structure or forget to include files you didn’t edit.)

5. Upload the zip file to frevvo by clicking the New icon

6. Create a new form and choose the custom theme from the new form wizard (or if you are editing an existing form, replace the current theme with your newly customized theme).

Items in a Custom Theme Zip File

The zip file includes an images folder and several files. The most important is the form.css file; this is often the only file you’ll need to edit. A read me file is also provided.

Below are the downloaded items and the purpose of each:

• form.css – This is where you make the vast majority of stylistic changes
• form-print.css – Edit this to customize what users see in the printable view after they click the Print icon on the use mode form
• form-edit.css – Typically this file is not used but it is available in case you want to customize what you see when designing your form.
• container.css – Edit this to add styling touches if you are using pop-up windows or embedded forms. As the file name implies, you can make changes such as modifying the border color of the pop-up window.
• custom.js file – You can include your own javascript here. Your form will use your custom code because this file gets loaded automatically when the form is loaded
• Images folder – This contains image files used for displaying borders and headers of a pop-up window but more importantly is where you place any images you might use for customization--for example, if you edit form.css to replace the standard icons shown in your forms. Also, if you will be using pop-up forms and want a header, you'll need to add an image called header.png in the folder. The dimensions of the image must match the width of your forms.

Common Customization Examples (Editing the Form.css File)

Below are examples of how you can edit the form.css file to customize your own themes. Some are simple and require very limited knowledge of CSS; others are slightly more complex and require more experience with CSS including the ability to make inferences based on the structure and markup of the form XHTML document. Note also that the form.css file includes comments to point you in the right direction.

Changing Your Form’s Background Color

This is an example of a simple change that requires little or no knowledge of CSS. About halfway down the form.css page for the professional blue theme you’ll see the following.

/*************************************************
               FORM 
**************************************************/
/* See container.css for background color of the surrounding container(s) */
#page-form #container, 
#page-form #center,
#form-container {
	background-color: #eeffff;

To change the form’s background color, overlay #eeffff (the hexadecimal equivalent for light turquoise) with any allowed CSS color string or its hexadecimal equivalent. So, for example, if you make the simple change below, you now have a “professional green” theme!

	background-color: green;

If you're using the Share options Link (Email/Web page), Embedded Form or Full Page Popup and the form Url parameter &container=true then you will also need to edit container.css. Look for background-color in two places in that css file:

#frevvo-form-container #frevvo-form-header,
#frevvo-form-container #frevvo-form-cell,
#frevvo-form-container #frevvo-form {
	/*
	background-image: url(images/blue.jpg);
	background-repeat: repeat;
	*/
	background-color: green;
}

.frevvo-form-container td, 
#frevvo-form-container td {
	background-color: green;
}

These two additional css background-color changes will ensure that the entire container not just the form area is filled with your new color.

Replacing Icons

Forms include standard icons for collapsible and expandable sections, a control’s Help property, and so on. You can replace these standard icons with your own. In this example, we will replace the icon that displays when you set a control’s Help property.

Here is the relevant portion of the professional-blue theme’s form.css file:

/********** HELP ICON
 * We must hide the inner span and do an image replacement.
 */
.f-form .f-help {
cursor:pointer;
background: url(/frevvo/images/icons/help.gif) top left no-repeat;
}

Instead of using the help.gif icon, we want to use a different image called coolhelpicon.png, so we make the following change:

.f-form .f-help {
cursor:pointer;
background: url(./images/coolhelpicon.png) top left no-repeat

Note that you need to change the path to ./images and change the name of the image file you want to use. You also must include the new image file in the images folder before you zip your new theme and upload it to frevvo.

Note make sure the icon your are using to replace an existing icon on the form, is correctly sized to the same size as the icon you are replacing. If it is a different size it may not be visible on your form.

Adjusting Message Control Line Spacing

Message controls let you display static text on you form. This example shows you how to adjust the line spacing—for instance if your forms include multi-line static text that does not align with the text on your web pages as well as you’d like.

The professional-blue theme does not specify a line height for the message control, so we must add the code snippet below to the form.css file. We want the line height to be 1.1em, which is slightly smaller than the default line-height of 1.6em.

.f-message, .f-output, .Message {
line-height: 1.1em;
}

This example illustrates that you may use any valid CSS property; you are not limited to those explicitly specified in the form.css page you downloaded. Note also that to make a change such as this, you’d need to inspect the mark-up and deduce that frevvo uses the .f-message class for message controls.

Changing the Default Color of Labels

In the Forms Designer you can change the default label color for a particular form by modifying the form’s Font Color property. We’ve included this example here because you might want your customized theme to handle this automatically, so you don’t have to change the form’s Font Color property each time you create a form.

The relevant portion of the form.css file is shown below—as you can see, frevvo uses the .f-form class for label colors, and the professional blue theme uses black font.

  
.f-form {
	color: black;
	border: none;	
}

If you want blue text on your labels instead, simply replace black with blue as shown below.

.f-form {
	color: blue;
	border: none;	
}

Displaying Radio and Checkbox Options Horizontally

This styling can be done on a control by control basis by editing the control's Style properties and setting Item Width to 30%, for example. You would make this change in a theme typically only if you wish all radio controls to be horizontal.

This example shows you how to display radio button and checkbox options horizontally instead of vertically. This works best for Yes/No radio controls or other controls with a relatively small number of choices. We also will illustrate how to target one specific control, since your form could have many radio buttons, including some for which it does not makes sense to display the options horizontally.

For starters, here’s how to make options horizontal for all radio and checkbox controls.

.l-control-vertical .f-select-item
{
clear:none;
}

However, with this change the options still come underneath the label as shown above. We need to add the following code to the form.css file so the options will be positioned on the same line as the label:

.f-select1 fieldset,
.f-select fieldset
 { 
     clear:none; 
     padding:0;         
}

If there are several radio or checkbox controls on our form and we only want certain ones to be horizontal, we can add a CSS Class property to the control options we want displayed horizontally. We'll call the property “horizontalSelect” and edit the control's CSS Class property in the Forms Designer as shown below.

And finally, we add the following code to our custom theme:

.l-control-vertical .horizontalSelect .f-select-item
{
clear:none;
}

.horizontalSelect  fieldset,.horizontalSelect fieldset     
 { 
     clear:none; 
     padding:0;   
      
}

This lets us display the option horizontally for our Colors checkbox and Size radio control while leaving the options vertical for the remaining controls.

Setting Control Width

By default when you drag in most controls from the palette they take up a certain amount of your form’s width based on your theme--for the professional blue theme, the default is 50%. In this example, we’ll show you how to change this default width to a different value.

Let’s say we want to adjust this for text area controls only, and we want the default width to be 90%. We simply add this code snippet to the form.css file:

.l-width-regular .f-textarea textarea {
width:90%
}

Perhaps instead we want to adjust the width for all frevvo input controls—these include text controls, phone controls, number controls and more. We’d add this code:

   
.l-width-regular .f-input input {
width:90%
}

To adjust the width for one particular type of input control—phone controls, for example, we’d do this:

  
.l-width-regular .Phone input {
width:90%
}

You can apply this type of change to any other controls as well—sections (f-section), tab groups (f-switch), and so on.

Hiding icon on Date Controls

In this example we want the form to display the date picker icon only when a Date control is enabled for edit. If it is disabled we want the date picker icon to be hidden.

/* Hide Calendar icon when date control is disabled */
.Date.s-disabled .f-calendar {
 	visibility:hidden;
}

Disable Expanded/Collapses

In this example we want to disable the expand/collapse functionality on section controls.

/* Do not allow Sections to be collapsed */
.s-expanded .f-expand {
	display:none !important;
}

Reduce White Space Between Controls

In this example we want to reduce the amount of blank white space between controls.

.hma-horizontal .f-input,
.hma-horizontal .f-output,
.hma-horizontal .f-textarea,
.hma-horizontal .f-select,
.hma-horizontal .f-select1,
.hma-horizontal .f-upload,
.hma-horizontal .f-trigger {
    padding:1px 1px 1px 9px; 	/* Reduce space above/below the controls */
}

Locale Specific

Custom styling can be applied based on the currently selected locale. See multi-language support for details on translating your form into different languages. When the form opens in the browser it will have a locale specific css class set based on the the &locale= parameter set on the form's Url.

No specific css classes are needed to customize the default locale. However each specific non-default locale will set the css class s-locale-${locale}. For example for the Spanish locale .s-locale-spa.

The css below will cause the form to have a background-color:#fff and font color:maroon for the default locale. That is when &locale= blank on the form's Url. However if &locale=spa is set on the form Url then background-color:red and font color:gold.

/*************************************************
               FORM 
**************************************************/
#page-form #container, 
#page-form #center,
#form-container {
	background-color: #fff;
/*
	background-image: url(images/blue.jpg);
	background-repeat: repeat;
*/
}

.f-form {
	color: maroon;
	border: 1px solid #dfdfdf;	
}

/**** Spanish Locale Theme *****/
#form-container.s-locale-spa {
	background-color: red;
}

.s-locale-spa .f-form {
	color: gold;
	border: 1px solid #dfdfdf;	
}

/**** END Spanish Locale Theme ****/

Re-zipping the Downloaded Files

After you’ve made your style changes, re-zip all the files from the theme you downloaded, even the ones you did not edit. Zip the files following the original structure—if you change directories or zip them differently, you will not be able to upload your customized theme.

This is the correct structure for a theme zipfile.

NOTE: Make sure you create the zipfile with the directory structure as shown in the image above. It is an easy mistake to include the containing directory in the zipfile. If you do this the theme will not work. Re-zip the theme correctly and update in your frevvo account.

Uploading the Re-zipped Files

In frevvo, choose Themes from the left-hand menu and then click the icon in the upper right corner. Give your theme a name and description, browse to the zipped file and click Upload.

Using Your Customized Theme

Once you’ve uploaded your customized theme, you can use it for every form in an application or for specific forms. To use your theme in every form in an application, click Applications from frevvo’s left-hand menu. Click the properties icon underneath your application’s name. When the Properties page is displayed, click the Choose Theme dropdown box and select your customized theme.

This will apply your new theme to any new forms you create, but it won’t automatically change the theme for existing forms. To update an existing form with your new theme, locate the desired form and click Edit. Click the toolbar at the top of the form to access the form properties on the left side of the Forms Designer. Click the Style tab, and pick your customized theme from the Theme dropdown box.

(v3.1) The theme can also be set dynamically via the form Url parameter _themeId. This parameter takes precedence over the theme selected at either the Application or in the Form itself as shown above. _themeId can be set to either than name of the theme, "Professional Green" in the case above. Or it can be set to the unique theme Id. You can find the Id via Copy Link Location on the Edit button or theme name in the Themes tab.

Here is an example using the Just the Iframe share code. The theme is set to one uploaded by the user named "yellow".

<script src="http://test.frevvo.com:80/frevvo/web/user/qaforms/app/_Vse0geOLEdygU8Rk-2FAeQ/
formtype/_dV9uYOOLEdygU8Rk-2FAeQ/embed?container=true&_themeId=yellow" 
type="text/javascript" language="Javascript"></script>

Editing Your Customized Theme

If you need to make additional changes to your customized theme, again edit the form.css on disk and re-zip the files and then upload the modifications by clicking the icon next to your existing theme. When you update a theme the changes take place immediately and automatically in all forms already using that theme.

Customized Themes and Templates

If you use a form that has your own custom theme when publishing a template, your custom theme will not become part of the template. If you want to share the form and the custom theme with someone else, you’ll need to send the downloaded form and the custom theme zip file.

Advanced Customization Techniques

The possibilities for customizing themes are virtually endless with CSS. Keep in mind that every control on your form has a CSS property field (as described in the horizontal radio button example), so you can set a value to any control in the forms designer and target the particular control using any allowable CSS property.

Consider also that you can’t “hurt” anything by experimenting with the form.css file and uploading your customized theme to frevvo. If you upload the theme and it’s not quite what you want, just delete it. Even if you’ve applied the custom theme to a form, you can at any time reapply the original clear or professional blue theme by changing the form’s Theme property.

If you will be making sophisticated changes, we recommend using Firebug, which is a free Firefox add-on. With Firebug, you can make changes to the form.css file and see the changes applied instantly to your form in Firefox’s browser. Firebug also helps you inspect markup and determine which class IDs you need when adding your own custom styling touches. More information is available at www.getfirebug.com.