Using ChronoForms default style_ChronoForms 3.1 for Joomla! site Cookbook-QQ阅读男生玄幻网

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

Using ChronoForms default style

ChronoForms recognizes that many Joomla! templates are not strong in their provision of form styling, so it offers some default styling that you can apply (or not) and edit to suit your needs.

Getting ready

It might be helpful to have a form to look at. Try creating a test form using the ChronoForms Wizard to add "one of each" of the main inputs to a new form and then save it.

How to do it...

Each of the five steps here describes a different way to style your forms. You can choose the one (or more) that best meets your needs:

When you create a form with the Wizard, ChronoForms does three things:
- Adds some <div> tags to the form HTML to give basic structure
- Adds classes to the <div> tags and to the input tags to allow CSS styling
- Loads some default CSS that uses the classes to give the form a presentable layout
If you look at the Form HTML created by the Wizard you will see something like this (this is a basic text input):
```
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;"> Click Me to Edit</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="text_2" name="text_2" type="text" />
</div>
<div class="cfclear">&nbsp;</div>
</div>
```
Note

This example uses the default values from the Wizard. The label text, size, and name may have been changed in the Wizard Properties box.

There is a wrapper <div> with a class of form_item. Then, there is a second wrapper around the <label> and <input> tags with two classes — form_element and cf_textbox.
There are the <label> and <input> tags themselves with classes of cf_label and cf_inputbox respectively.
And lastly there is an "empty" <div> with a class of cfclear that is used to end any CSS floats used in styling the previous tags.
The coding for other types of input is very similar, and usually the only difference is the class of the input tag and the <div> tag wrapped around the label and the input.
There is nothing very special about any of this; it provides a basic framework for styling.

Tip

You can't change the default styling used by the Wizard but you can use your own HTML, or edit the Form HTML created by the Wizard. If you change the class names or override the ChronoForms CSS styling with your own styles, then the ChronoForms CSS will no longer apply.

Here's what the test form looks like with the default ChronoForms styling:
To see the effect of the ChronoForms CSS, open the form in the Form Editor. Go to the General tab, open Core/View Form Settings, and change Load Chronoforms CSS/JS Files to No.
Save the form and refresh the front-end view. Here is the same form without the ChronoForms CSS styling loaded. Not so pretty, but still fully functional.

Tip

Note: If you create your form in the Form Editor rather than the Wizard, the default setting for Load Chronoforms CSS/JS Files is No. So, you need to turn it on if you want to use the default styling.

Note

Tip

Tip