Follow

Web Form Branding

This tutorial is meant to be brief and teach you the basics without diving into the coding aspects of CSS and HTML. There are many tutorials online that show you how to  stylizing with CSS, but the purpose of using ThemeRoller is so that you don't need to learn a programming language to accomplish this.

With FastField you can customize your web-form either with a preset list of color themes or you can completely personalize the colors on your webforms separately by uploading your own CSS. We use web app ThemeRoller, but there are many different programs that are user friendly that will help you immensely.

Steps

For this example we are going to use a free web application called ThemeRoller. You can find the website here -> http://themeroller.jquerymobile.com/. This tool makes it easy to create custom-designed themes for your web forms. Just pick colors then download the theme and upload it in the configuration settings in the form builder.

We will be following along with their tutorial on their website and highly recommend reading through the tutorial if you aren't familiar with the program. http://themeroller.jquerymobile.com/#theme-intro

 

Getting Started

The ThemeRoller interface has 3 major zones: the left column contains the inspector panel, along the top is the QuickSwatch/Kuler bar, and below this is the preview window.

Use the inspector pane to set global theme settings on the first tab and tweak the individual style options for each swatch. Above the tabs, there are links to download, share, or import a theme.

In the QuickSwatch bar, you can turn the inspector feature on to automatically expand the relevant inspector section when you click on an element in the preview pane. Drag and drop a color from the QuickSwatch panel onto an element in the preview pane and the tool with automatically calculate text color and shadow, borders, gradients and even button states. The sliders make it easy to adjust the lightness and saturation of the colors. Click the Adobe Kuler Swatches to load pre-made color palettes from Adobe's popular color palette sharing site.

The preview pane shows a sample of common jQuery Mobile widgets that live update each time you make a change to the theme so you can quickly test and tweak the theme.

Downloading themes

Once you have created your final theme, click the Download Theme link at the top of the inspector panel. In the download dialog, give your theme a name and press the Download Zip button. This will generate a zip file that contains both the compressed (production-ready) and uncompressed (editable) theme files and a simple test page (index.html) to show that everything worked (whew) and instructions on how to add the theme to your site. It's pretty simple: link your custom theme in the head of the page followed by the jQuery Mobile structure theme and you're ready to go.

The import feature is primarily designed to make it easy to either edit a theme you've downloaded or to generate an updated version of a theme for a new release of the library. When you download a theme, be sure keep the uncompressed version of the theme CSS file because this is used in the import process. To import a theme, click the Import link and paste the entire contents of the uncompressed theme file (select all > copy > paste) into the text input in the dialog, and the system will parse the theme into an editable format for sharing and downloading.

Sharing themes

To generate a theme URL that can be shared with others, click the Share link and copy the URL. Post it on Twitter and become a famous theme artist. Anyone that opens the shared URL can edit or download the theme, but this activity won't affect your original theme. Note that due to the high volume of traffic, we can only store your theme on the server for 30 days so shared links have an expiration date. Be sure to download a copy of your theme for safekeeping.

Supported browsers

This is a beta version of a developer tool so we're committing to supporting the latest versions of popular desktop browsers: Chrome, Firefox, Safari. Even though the tool works in IE9, it doesn't support CSS gradients so we don't recommend using this browser to create themes. If you're running into issues, maybe try a different browser or log an issue in the tracker.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk