Page Comparison

...

...

...

...

...

...

...

...

...

=== 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. [http://www.screencast.com/users/nancyespo/folders/Jing/media/207b8e2a-7177-4b7c-b939-87d07ccc91d5 Watch a video to see how it's done]

1. Download [[image:download.png]] 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 [[image:add.png]] 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).

[[image:theme_profGreen.png]]

=== 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-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. See the chapter on [[V4_Integration#Custom_JavaScript | Custom JavaScript]] for ideas. * flow.css - This is where you customize flows. * space.css - This is where you customize a frevvo space. * tasks.css - This is where you customize the task list. * login.css - This is where you customize the login for forms with tenant login security. * submissions.css - This is where you customize and embedded submissions page. * 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. 

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

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! 

<pre>  background-color: green; </pre>

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:

<pre> #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; } </pre>

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

==== Panel Background Color ==== This example changes the background color of all the controls inside a panel to lightblue.

<pre> .f-panel.Coloryellow {  background-color: lightblue; } </pre>

==== 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 [[Image:help.png]] 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:

<pre> /********** 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; } </pre>

Instead of using the help.gif icon, we want to use a different image called coolhelpicon.png, so we make the following change:   <pre> .f-form .f-help { cursor:pointer; background: url(./images/coolhelpicon.png) top left no-repeat </pre>

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.

==== Removing the Print Icon Toolbar ====

You can hide the Print icon that appears at the top of your forms by unchecking a form's ''Printable'' property. However, the space at the top of the form is still unavailable even when the icon is hidden. If you want to use that space at the top of the form, you can edit the theme's form.css file to remove the toolbar from the top of the form.

If you have many forms that do not use the Print icon, you can create a custom theme for them that has the toolbar removed.

Note that if you remove the toolbar, you also can't have a Save icon — via the ''Save/Load'' property — in the form.

* In the theme's form.css, find the ''Toolbar'' entry (at approximately line 91), and uncomment the line '''display: none'''. This prevents the toolbar from being part of the form.

<pre> /* Toolbar with print icon. Uncomment below to hide. You can also hide this in the form properties. */ .f-form-tb {  /* display: none; */ } </pre>

==== 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.   <pre> .f-message, .f-output, .Message { line-height: 1.1em; } </pre>

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. <pre>  .f-form {  color: black;  border: none;  } </pre> If you want blue text on your labels instead, simply replace black with blue as shown below.  <pre> .f-form {  color: blue;  border: none;  } </pre>

==== 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 [[V4_Designing_Forms#Item_Width|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.

<pre> .l-control-vertical .f-select-item { clear:none; } </pre>

[[image:theme_horizselect.png]]

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: <pre> .f-select1 fieldset, .f-select fieldset  {      clear:none;      padding:0;         } </pre>

[[image:theme_horizselectOneLine.png]]

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.

[[image:theme_cssclass.png]]

And finally, we add the following code to our custom theme: <pre> .l-control-vertical .horizontalSelect .f-select-item { clear:none; }

.horizontalSelect  fieldset,.horizontalSelect fieldset      {      clear:none;      padding:0;         } </pre>

This lets us display the option horizontally for our Colors checkbox and Size radio control while leaving the options vertical for the remaining controls. [[image:theme_horizontalselect_cssclass.png]]

==== Adding a Scroll Box to Checkbox Controls ====

If your form has a checkbox control with multiple options, you can add a scroll box to it so that it takes up less space on the form. Create a custom theme (''ScrollBox'' for example), and add the lines shown below to it to define a scrollbox.

* Add these lines to the form.css file to define a scrollbox.

<pre> /****** SCROLL BOX */ .l-control-vertical .scrollbox.f-select {    background-color: #CCCCFF;    height: 100px;    width: 450px;    overflow: auto;    border: 1px solid blue; } </pre>

* Save the form.css file, and [[V4_Customizing_Themes#Re-zipping_the_Downloaded_Files |re-zip the theme files]] (as ScrollBox.zip for example). * [[V4_Customizing_Themes#Uploading_the_Re-zipped_Files | Upload the ScrollBox.zip]] custom theme. * Edit the form, and set the form's ''Style > Theme'' property to '''ScrollBox'''. * Select the checkbox control you want to add the scrollbox to, and set it's ''CSS Class'' property to '''scrollbox'''.

==== 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: <pre> .l-width-regular .f-textarea textarea { width:90% } </pre> 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: <pre>   .l-width-regular .f-input input { width:90% } </pre> To adjust the width for one particular type of input control—phone controls, for example, we’d do this: <pre>  .l-width-regular .Phone input { width:90% } </pre> 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.

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

==== Hiding Tabs and Borders in Print View ====

This example hides tab labels and the tab borders when printing a form.

<pre> /******** Hide Tab in Print View ******/ /* Tab label */ .s-print .h-switch .h-case .f-label {  display:none; } /* The entire tab group contents */ .s-print .c-switch {  border: none; } /* A tab header */ .s-print .f-switch .h-case {    border: none; } </pre>

==== Disable Expanded/Collapses ====

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

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

==== Reduce White Space Between Controls ====

In this example we want to reduce the amount of blank white space between controls. We have added our own css class called .hma-horizontal. This will allow you to reduce white space around specific controls. To use this customization add the css class .hma-horizontal to the [[V4_Designing_Forms#CSS_Class | css class property]] for each control where you want to reduce space.

<pre> .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 */ } </pre>

If you want to reduce white space around every control in your form then do not add a custom class as shown in this example. The css class .l-control-vertical is a standard Live Forms css class name:

<pre> .l-control-vertical .f-input, .l-control-vertical .f-output, .l-control-vertical .f-textarea, .l-control-vertical .f-select, .l-control-vertical .f-select1, .l-control-vertical .f-upload, .l-control-vertical .f-trigger {     padding:1px 1px 1px 9px;  /* Reduce space above/below the controls */ } </pre>

==== Locale Specific ====

Custom styling can be applied based on the currently selected locale. See [[V4_Multi_Language_Support | 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.

<pre> /*************************************************                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 ****/ </pre>

==== PDF ====

Print view styling affects both the html print view styling as well as the pdf (or other image types) generated with the form is submitted. See [[#Print_View | Print View]] for details.

==== Print View ====

You can style your form's print view. This enables you to have one look & feel in use mode and a different look & feel in print mode. Print view styling affects both the pdf (or other image types) generated with the form is submitted (ex: Pdf attached to an emailed submission) as well as the html print view from a click on the form's printer icon.

Here are examples of several common customizations to the default Clear theme's print view. The image below shows the form as it looks in use mode.

[[image:themeprint-use.png]]

This image shows how the 1st tab of the form looks with the default Clear theme in print mode when the printer icon was clicked. The form print view will be the same when the pdf (tiff, etc..) print image is generated upon submission.

[[image:themeprint-clear.png]]

One common requirement is to display only the selected radio and checkbox options. This css hides all unselected options.

<pre> /** Only print selected checkbox/radio options **/ .s-print .f-select-item {     display:none; } .s-print .f-select-item.s-selected {     display:inline; } </pre>

[[image:themeprint-onlyselected.png]]

By adding this css you will also remove all checkbox and radio option icons. Only the selected option's labels are printed.

<pre> /** Remove checkbox/radio icons - Only show option label text **/ .s-print .f-select-item.s-selected div {     display:none; } </pre>

[[image:themeprint-onlyselectedlabels.png]]

Add this css to hide borders around input control values.

<pre> /** Hide control borders and background. **/ .s-print .f-input input, .s-print .f-textarea textarea, .s-print .f-select1 select, .s-print .f-input .input, .s-print .f-textarea .textarea, .s-print .f-select1 .select {     border-width:0;     background:none; } </pre>

[[image:themeprint-hideborders.png]]

Add this css to change label colors to blue. Value font color defaults to black. However the extra css is needed to set checkbox and radio option labels to black as well. By default option labels use the same font color as control labels.

<pre> /** Set label color **/ #form-container.s-print label {    color: blue; } </pre>

[[image:themeprint-labelcolor.png]]

Add this css to remove the date picker from date controls and the help icon from all controls with help text.

<pre> /** Remove date picker icon **/ .s-print .Date .f-calendar {     background-image: none !important; }

/** Remove help icon **/ .s-print .f-form .f-help {     background-image: none !important; }  </pre>

[[image:Themeprint-nodate-nohelp.png]]

Add this css if you form contains the tab control and you want to hide the tab labels and border from the print view.

<pre> /** Hide Tab in Print View **/ /* Tab label */ .s-print .h-switch .h-case .f-label {  display:none; } /* The entire tab group contents */ .s-print .c-switch {  border: none;  padding: 0px; } /* A tab header */ .s-print .f-switch .h-case {    border: none; } /* Tab */ .s-print .h-switch {  display:none; } </pre>

[[image:Themeprint-noTabs.png]]

'''Centering Pages'''

By default Print View is centered on a printed page. The following floats left

<pre> body.print #threecolumn {  margin:0;  float:left; } </pre>

'''Paper Format'''

By default the paper format is 8.5 x 11. The page size can be configured using the page size property from CSS3 (this CSS3 support related to exporting to PDF and not the browser or printing from browser and it is only applicable to a limited set of properties such as size) in a custom theme. For more information look here:  http://www.w3.org/TR/css3-page/#page-size.

<pre> For instance, the following will generate pages in landscape mode:

@page {    size: A4 landscape; }

Or setting a different page size:

@page {    size: legal; }

Or setting a custom size:

@page {    size: 8.5in 12in; } </pre>

==== Multi-Line Options ====

Radio and Checkbox control option labels can be only one line using the default Clear and Professional Blue themes. This is in order to keep these controls the same height as the other input controls to prevent alignment issues. Sometimes you do need an option labels that span multiple lines. The cssclass "multilineopt" does this. This is how your form will look prior to having the custom theme:

[[image:ThemeMultilineOpts1.png]]

Even using this theme you may need to adjust the option width manually in some cases if the option label moves to the line below the option checkbox or radio button. However width:90% as shown below is good in most cases.

<pre> /** Support options that span multiple lines **/ .l-control-vertical .Checkbox.multilineopt .f-select-item, .l-control-vertical .Radio.multilineopt .f-select-item  { height:auto !important; } .l-control-vertical .Checkbox.multilineopt .f-select-item label, .l-control-vertical .Radio.multilineopt .f-select-item label  { width: 90%; } </pre>

This is how the form looks with the custom theme. You must set the control's cssclass in the designer to "multilineopt".

[[image:ThemeMultilineOpts2.png]]

==== Required Controls ====

frevvo's default behavior is to display a red asterisk next to required controls that are missing values and to change the font color of section and tab controls labels to red if either contain a required control missing values.

Here is one example customization that changes the background color of textarea controls.

<pre>  /********** REQUIRED   * Required TextArea background color change   */ .s-invalid textarea {  background:  #FFD0C0 url(/frevvo/images/fieldtopimage.gif) repeat-x scroll center top !important; } </pre>

==== Repeats ====

Sometimes you may want the functionality of a repeat control but not want to display the +/- icons. One use case is when you want to initialize form from a database and the data repeats (ie. multiple rows may be returned from the database to your form). If you want to display the repeating data but do not want to let the user delete or add items then you can add this css to your theme:

<pre> .f-form .f-add.s-add, .f-form .f-remove.s-remove {     display: none; } </pre>

If you want this to apply to only certain repeat controls in your form then use the form designer to set a custom cssclass property on the repeat control. For example if you used "HideRepeatIcons" in the repeat control's cssclass then add the following to your custom theme:

<pre> .f-form .HideRepeatIcons .f-add.s-add, .f-form .HideRepeatIcons .f-remove.s-remove {     display: none; } </pre>

==== Tables and Grids ==== Using a table/grid layout is a useful space saving technique. This layout resembles a Microsoft excel worksheet. Live Forms v5 will contain a new Table control that makes table/grid form layout easy. V5 will be available in Q2 '12. Live Forms v4 users can already use the table layout technique by using a custom theme.

Here are a couple forms that have been organized with a table layout. This expense report uses a repeating control in a table layout.

[[Image:TableV4ExpenseRpt.png]]

This medical plan leaves some white space between table columns:

[[Image:TableV4ICS206.png]]

<div style=";background-color:#E0EFFF">[[Image:Lightbulb.png]]frevvo eForms are often an excellent replacement for data collection excel workbooks. Excel workbooks can be corrupted by users, misplaced/lost in someones email inbox, become obsolete and outdated. Eforms solve these deficiencies and more. frevvo forms can automatically be routed to multiple people for collaborative filling and approval/review using digital signatures.</div>

A custom theme takes a bit of trial to get the layout just how you want it. Here are some ideas to help you get started. # Create a custom theme using some of the ideas from the css example code below. Note: the special css class name in this case is row2-n # Upload and apply this theme to your form. # Add a panel or a section control to your form. If you use a panel set its width to 100% # Add as many panels as you want columns inside the initial section or 100% width panel. Set the panel width of each of these inner panels to the width you want for each column. Note: this takes a bit of experimentation. # Drop controls (text, money, phone, etc.. into each inner panel.

This is how the expense report form appears prior to setting the CSS class:

[[image:TableV4designer.png]]

# Finally put the string '''row2-n''' into the section of panel's CSS class property. This causes the custom css to apply to all controls inside the section or panel so you don't have to add this string to each inner control

[[image:TableV4designer2.png]]

Use this sample custom css as a starting point for your own table/grid layouts!

<pre> /*****  Very Tight Controls *****************  1. Use for Grids for row 2-n

*/ .f-form .row2-n .f-help, .f-form .row2-n .f-required, .f-form .row2-n .f-calendar, .f-form .row2-n .f-label label {  display:none !important; } .l-control-vertical .row2-n.f-input, .l-control-vertical .row2-n.f-output, .l-control-vertical .row2-n.f-textarea, .l-control-vertical .row2-n.f-select, .l-control-vertical .row2-n.f-select1, .l-control-vertical .row2-n.f-upload, .l-control-vertical .row2-n.f-trigger {  clear:both;  padding:0px !important; } .l-width-custom .f-panel .f-input input, .l-width-custom .f-panel .f-textarea textarea {  width: 97% !important;  height: 17px !important; } .l-width-custom .f-panel .f-select1 .select {  width: 100% !important; } .row2-n.f-select1 fieldset, .row2-n.f-select fieldset {  padding:0px !important; } /* .row2-n.f-textarea textarea {  overflow:hidden; } */ /* remove space around sections with repeat used in grids */ .row2-n .c-section, .row2-n .h-section {  padding: 0px !important;  border-bottom: 0px !important; } .row2-n.f-section {  margin: 0px !important; } .f-form .row2-n .f-add, .f-form .row2-n .f-remove {  float: left !important; } .row2-n.s-expanded .f-expand {     display: none; } </pre>

==== Custom Behaviors ==== You can add custom javascript to your forms to add additional interactivity. This is done by adding javascript code custom.js in your theme. See [[V4_Integration#Custom_JavaScript | Custom JavaScript]] for full details and examples.

==== Using firebug ====

When using a tool such as firebug to inspect additional customizable frevvo css print view classes note that the print view has an overlay that prevents you from selecting the underlying controls. First select the entire page for inspection. You will see a line of html that looks like this:

<pre> <div id="preview-overlay" class="overlay"></div> </pre>

If you are using firebug, double click the string "overlay" to select it. Then delete it. This will remove the overlay and enable you to inspect other controls in the print view.

<pre> #form-container.s-print .f-select-item label {    color: black; } </pre>

=== 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.

[[image:theme_zip.png]]

[[Image:18px-Attention_niels_epting.svg.png]] '''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 [[Image:Add.png]] icon in the upper right corner. Give your theme a name and description, browse to the zipped file and click Upload.

[[Image:18px-Attention_niels_epting.svg.png]] '''NOTE:''' Do not use special characters (such as '''/''', ''':''', or '''&''') in the theme name. These characters can cause problems when you upload or download themes.

=== 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 [[Image:Cog_go.gif]] icon underneath your application’s name.  When the Properties page is displayed, click the Choose Theme dropdown box and select your customized theme.

[[image:theme_applicationProp.png]]

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.

[[image:theme_formProp.png]]

The theme can be selected 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".

<pre>

<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>

</pre>

=== 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 [[image:edit.png]] 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.

=== Flow.css Customizations === tbd

=== Tasks.css Customizations === tbd

=== Login.css Customizations === tbd

...

Column width 240px Panel borderColor lightgrey bgColor #F0F0F0 titleColor white titleBGColor #88AACC borderWidth 1 title Themes Chapters borderStyle solid Basic Steps Common Customization Examples Customized Themes and Templates Items in a Custom Theme File Rezipping / UpLoading Modified Themes Using / Editing Customized Themes Image Added