Introduction
The Theme Designer allows you to create visual themes that can be applied to your Wufoo forms and reports to match your personal tastes or organization’s identity and web site.
Creating Your First Theme
To get to the Theme Designer, click on the “Themes” tab at the top of the Wufoo interface.
The Theme Designer is composed of two halves. The top of the Theme Designer that’s surrounded by a charcoal background contains a series of menus that can be used to create new themes and to manage and organize themes you’ve already created. The bottom portion contains a sample form that serves as a live preview to show you how changes made in the top half will affect the visual look of your Wufoo form.
To create a new theme make sure the drop down of themes (Theme Menu) is set to “Create New.” The Theme Designer will always start with a blank template for creating new themes. The themes in Wufoo are organized into a series of menus that display the appropriate options based on the property you’ve selected.
Each theme in Wufoo has been organized into 7 properties that can be accessed through the Properties Menu that sits to the right of the Theme Menu. The Properties Menu is divided into 7 parts:
- Logo
- Backgrounds
- Typography
- Borders
- Shadows
- Buttons
- Advanced.
When you click on a property in the menu, it will show additional menus and options to the right of the menu to help you select and change that aspect of your theme. For example, if you wanted to change the highlight color that surrounds a field when it’s selected you would click on “Backgrounds” in the Properties Menu and then “Highlight” in the Backgrounds Menu and then select a color from the color picker that displays. The theme preview will show your changes accordingly.
When you’re done with your beautiful creation, just click on the “Save Theme” button in the upper right hand corner. The Theme Designer will then prompt you for a name for your new theme.
Editing an Existing Theme
To select and edit a theme you’ve already created, just select your theme from the drop down of themes on the far left side. This will load the theme in the live preview. When you’re editing an existing theme, you will be presented with a series of additional buttons in the top right hand corner next to the “Save Theme” button that will allow you to Rename, Duplicate and Delete the selected theme.
How do I apply a theme?
After you’ve designed and saved your theme, you can apply it to a form by going to the Form Manager under the “Forms” tab and finding your form’s name. On the right side of the Form is a drop down menu with a Palette icon next to it. Select your theme from the drop down menu and it’ll apply to your form.
The same drop down can also be found in the Report Manager next to your reports’ names.
How do I change the logo?
Click on “Logo” in the Properties Menu. The default logo is the Wufoo logo. You can provide us with a link to your logo on a web site by clicking on “Your Logo”, decide not to have a logo or choose one of our pre-made logos below the dashed line.
Currently, Wufoo does not host custom logo images and so if you’re using your own logo, you’ll need to upload your logo image to your own web server or an image hosting service like Photobucket or Flickr. After you upload your image to the web, enter the URL into the input asking “Where’s your image on the web?” and then click “Apply” to see how it’ll look in the theme preview.
The default dimensions for the area containing the logo is 640px long by 40px high. If your image is showing up as cropped, you can increase the height of this area using the height input under the URL input for your custom logo image.
Using Your Own CSS
If you’re web designer familiar with CSS (Cascading Style Sheets) the Theme Designer also allows you to provide a link to your own CSS file so you can user your own custom CSS rules to further customize the look of your forms and reports. To use your own CSS file, click on the “Advanced” property and provide a link to your CSS file on the web. Like the logo images, we do not host these CSS files for you and so you’ll have to upload them to your own web server and provide a link that’s accessible over the Internet.
The styles in your custom CSS file cannot be shown in the live preview in the Theme Designer, but you can see a preview of how it’ll affect your theme by clicking on the “Preview” button in the Advanced Menu. The Theme Designer will then save the theme and open a new window showing how your custom rules will interact with the default and custom theme stylesheets on an advanced form preview.
When you save your theme, your CSS file will then be included as a link when your Wufoo form or report loads with that custom theme. It is important to note that your CSS file is added after the default Wufoo form stylesheet and any style changes you made using the Theme Designer. This means that the rules in your custom CSS file will override any previous rules from the Theme Designer or Wufoo.
For additional resources for advanced customization of your Wufoo themes, download the Wufoo Theme Kit.
Updated : March 10th, 2008
Custom Search
