Switching styles with "Transform Form"_ChronoForms 3.1 for Joomla! site Cookbook-QQ阅读中文武侠网

上QQ阅读APP看书，第一时间看更新

Switching styles with "Transform Form"

The ChronoForms default styling doesn't always suit. So, ChronoForms provides a basic form theming capability. There are only two themes provided — "default" and "theme1".

Getting ready

We're using the same form as in the previous recipe.

How to do it...

In the Forms Manager, check the box next to your form name and then click the Transform Form icon in the toolbar.

You will see a warning that using Transform Form will overwrite any manual changes to the Form HTML and two form images — one for the "default" theme and one for "theme1".
There's a radio button under each theme, and Preview and Transform & Save buttons at the bottom left.
The Preview button allows you to see your form with the theme applied. This will not overwrite manual changes; Transform & Save will!

Note

Warning: Using Transform & Save will recreate the Form HTML from the version that ChronoForms has saved in the database table. Any manual changes that you have made to the Form HTML will be lost.
Applying "theme1" changes the Form HTML structure significantly. Select the "theme1" radio button and click the Preview button to see the result.
You can't see this from the preview screen but here's what the text input block now looks like:
```
<div class="cf_item">
<h3 class="cf_title" style="width: 150px;">
Click Me to Edit</h3>
<div class="cf_fields">
<input name="text_2" type="text" value=""
title="" class="cf_inputtext cf_inputbox"
maxlength="150" size="30" id="text_2" />
<br />
<label class="cf_botLabel"></label>
</div>
</div>
```
The wrapping <div> tags and the input are still the same; the old label is now an <h3> tag and there's a new <label> after the input with a cf_botlabel class. The <div> with the cfclear class has gone.
This theme may work better with forms that need narrower layouts or where the cfclear <div> tags cause large breaks in the form layout.

Note

Neither theme creates a very accessible form layout, and "theme1" is rather less accessible than the "default" theme. If this is important for you then you can create your own form theme.

How it works...

A ChronoForms theme has two parts — a PHP file that defines the form elements and a CSS file that sets the styling. The Transform Form gets the "Wizard" version of your form that is saved in the database, and regenerates the form HTML using the element structures from the PHP file. When the file is loaded, the theme CSS file will be loaded instead of the default ChronoForms CSS.

Note

Note