Styling CRED forms

This document is now outdated and we are rewriting it to correctly explain how to design CRED forms.
In the meanwhile, these documents will help:

The updated version of this page will be ready very soon.

CRED lets you customize the appearance of forms using HTML and CSS. When you edit a form, you have full control over the HTML. This page explains how to customize the CSS.

CRED (>1.0.2) provides a choice to the user as to which CSS theme (from provided themes) can be used for each form. Themes are Basic and Styled.

Basic Theme

Basic theme uses minimal styling and leaves checkboxes, radios and select boxes with default browser styles.

The form html code should also include a class “cred-keep-original” for this to display properly (scaffold feature automatically adds this class when the basic theme is selected)

Styled Theme

Styled theme uses some effects for rounded corners and shadows on focus and also replaces default checkboxes, radios and select boxes with elements that can be completely styled using CSS only, thus giving more styling power but also more complexity.

The form html code should NOT include the class “cred-keep-original” for this to display properly (scaffold feature automatically removes this class when the styled theme is selected)

Styling Text Input and Textarea Form Controls

The relevant CSS classes are:

  • myzebra-text
  • myzebra-textarea

You can change the focus styles, the size the fonts etc.

Styling Checkboxes and Radio Inputs

The relevant CSS classes are:

  • myzebra-checkbox
  • myzebra-radio

These elements, along with drop-down menus, are very hard to style, since browsers do not offer styling capabilities. CRED implements them using CSS, so that you can style their appearance freely.

For check-boxes and radio controls these replacements are done inside the HTML and completely controlled through CSS. By default, check-boxes and radios are styled in a custom manner, which can be easily changed by editing the classes myzebra-checkbox-replace and myzebra-radio-replace. User can also switch back to default elements by hiding the replacements and showing the default elements through CSS.

Styling Select Boxes (dropdowns)

Select boxes cannot be replaced statically through HTML, so Javascript scripts are used to replace the dropdowns on the fly for each form. The new elements can be styled completely in every aspect (note that sometimes user will have to adjust the dropdown styling since it may conflict with other CSS rules on the same page).

The relavant classes are:

  • dk_container
  • all dk_* classes

If you want to keep the default select boxes provided by the browser, you can add a class ‘cred-keep-original’ into any container (eg a <div>) that contains those fields or add the class into the parent form container itself (eg [credform class=”cred-keep-original”])

Additional CSS and Javascript per form

CRED 1.1 allows users to specify additional CSS and Javascript to be included with current form. This allows to overwrite styles and add behaviour through Javascript easily.

Under the main form content area, there are boxes that let you include any CSS and Javascript (with syntax highlight for easier editing).

These additional styles and scripts are added after the basic CRED styles and scripts on the same page.

CSS and Javascript for the form

Styling Hierachical Taxonomies Fields

CRED plugin provides controls to render input fields for Taxonomies. Hierarchical taxonomies have 2 modes of display which retain the hierarchical structure of the taxonomy terms.
These modes are “checkbox” and “select”. Some browsers (eg Chrome) do not allow styling in the option element of a drop-down, so in thesde cases
the “select” mode will not render a hierarchical layout but a flat list. An alternative is to use the “checkbox” mode which always renders the hierarchical layout.

For more information related to the parameters of taxonomy fields check the Shortocde documentation page.

These guidelines will enable you to style frontend forms in a variety of ways.