FAQ block

Details

Description:

The FAQ block allows you to create an FAQ or glossary of terms pair-sets.

Installation

  1. Copy the faq-block file into the Base Folder/_user-blocks/ folder on your site in the folder location of your choice.
  2. Click Edit, enter a question or term, then an answer or definition in the WYSIWYG. Click Submit to save.
  3. Edit the page where the faq-block will appear. Attach the block and click Submit to save.

Customization:

By default the FAQ is styled through the CMS' central files. You do have the option of adding your own CSS in a supplemental stylesheet.

How to create a FAQ block

FAQ block example

  1. Animate FAQ? - Applies an accordion feature to create a open/closed drawer appearance. By default, the entire FAQ will be visible.
  2. Block Controls - The [+] sign gives you the option to add additional pair-sets to your block, whether for glossary of term definitions or more FAQ questions and answers. When more than one pair-set is listed, an additional minus sign [-] gives you the option to delete any section you wish. Up and down arrows give you the ability to re-order the pair-sets in whatever order you prefer.
  3. Question - The Question field is a plain text field for a term or FAQ question. No formatting can be done in this field though custom styles can be applied through the use of a supplemental.css page.
  4. Answer - The Answer area offer the use of the full WYSIWYG including basic formatting, and the inclusion of links and images.

FAQ settings and style options

  1. Animate FAQ?
    1. Accordion – all Q/A sets are initially closed and the Question heading must be clicked to expand and reveal the answer section. In this selection, only one Q/A pair will ever be open at one time.
    2. None – all Q/A sets will appear and no animation will be applied.
    3. Opener – all Q/A sets are initially closed. Multiple Q/A sets can be opened at one time.
  2. Language code: If a language other than English is being used, you can include a language code to assist in proper formatting of your text.
  3. The entire FAQ block can optionally be restyled with your own custom cascading stylesheets (CSS). Below the Settings section you will find the Style field.
    FAQ > Style
    Custom class: enter a class name of your choice, appended with the custom convention of “u_your-class-name-here”. Remember the naming convention must be lowercase with no spaces. Use dashes or underscores to denote spaces if necessary.
  4. Adding comments: The block includes a comments field for any notes your and/or your colleagues wish to include for future reference.

How to attach a FAQ block

Attaching the FAQ block to a page

  1. Browse to the location of your faq-block in the Base Folder/_user-blocks/ folder and click to choose and select Confirm to attach.
  2. Open the page that will display the block. Click Edit. Decide where on the page the FAQ should appear in relationship to the particular repeating content block to which you're attaching it.
  3. Select the desired width of the block on the page. 100% will result in the FAQ block filling the entire width of the available page space.
  4. If less than 100% you have the option of having the block appear on the left side or the right side with any text on the page wrapping around it.
  5. If you wish the block to appear without a border, check the box to remove it.
  6. Click Submit to save your changes.

FAQ Demo

Question 1

Answer to question 1

  • Additional information
  • Additional information
  • Some more information
Question 2

Answer to question 2

CSS Stylings

All blocks offered in the Content Library have a built-in hook to allow users to create custom stylings via the use of a supplemental style sheet. To date, the following classes have been created in conjunction with the available blocks:

  • Code block - class name: ._code-block
  • FAQ block - class name: ._faq1 (._faq-block)
  • Feature block - class name: ._feature-block
  • Jump menu block - class name: ._jumpmenu1
  • RSS block - class name: ._rssfeed1 (._rssfeed-block)
  • Slideshow block - class name: ._slideshow1 (._slideshow-block)
  • Title area links block - div id: #links
  • Video block - video2.css
  • XHTML Raw block - class name: ._xhtml-block