ODFaq - Customizing styles

Customizing Styles

Followings are the IDs and classes used to display the FAQ for frontend user. In general I use <div> tags to wrap each block of contents. Open style.css and make changes to suit your website theme. File style_printable.css has exactly the same IDs/classes and is used to display printable (a.k.a plain) mode. Go ahead and experiment with them. Note: you may want to backup the original files if you are not familiar with CSS.

Main container

#odContainer
Type: DIV
This is the outermost <div> tag that wraps ODFaq content

Breadcrumb block

#odBreadcrumbContainer
Type: DIV
Content: Breadcrumb path to parent categories and main page

Display category name

#odPageTitle
Type: DIV
Display current category name or 'Frequently Asked Question' in 'viewall' mode. This block will be hidden on main page

Category list block

#odCatContainer
Type: DIV
Content: 'odCatHeader' and 'odCatList'. This block will be hidden if there are no sub-categories
#odCatHeader
Type: DIV
Content: Title text 'CATEGORIES'
#odCatList
Type: DIV
Content: Table that list sub-categories of the current category
td.odSubcatCell
Type: TD
Each table cell that contain a category name

Category title (viewall)

.odCatTitle
Type: DIV
Display category name in 'viewall' mode

Answer block

#odDtlContainer
Type: DIV
Content: 'odDtlHeader' and 'odDtlContent'. This block will be hidden when there are no questions in a category
#odDtlContent
Type: DIV
Content: Block to display answers in a category
#odDtlHeader
Type: DIV
Content: Title text 'ANSWERS'
.odDtlItem
Type: LI
The list item for each entry
.odDtlItem small
Type: SMALL
To display 'Back to top' link
.odDtlQuestion
Type: SPAN
Block for question text
.odDtlAnswer
Type: SPAN
Block for answer text

List of question block

#odQtnContainer
Type: DIV
Content: 'odQtnHeader' and 'odQtnList'. This block is still visible for an empty category but 'odQtnList' block will contain message saying that there are no questions in that category
#odQtnHeader
Type: DIV
Content: Title text 'Questions'
#odQtnList
Type: DIV
Content: Block to display list of questions in a category
.odQtnItem
Type: LI
The list item for each question

Search form

#odSearchContainer
Type: DIV
Content: Search form
form#odSearchForm table
Type: TABLE
Table that contains the form fields
form#odSearchForm table th
Type: TH
Search form title
input.odCheckbox
Type: RADIO
Radio button to select where should we search the keyword

Search result block

#odSearchResult
Type: DIV
Content: Result header and content block. This block (and its child blocks) will be hidden when search form is not submitted
#odResultHeader
Type: DIV
Content: Title for search results
#odResultContent
Type: DIV
Content: Search results

Form to jump to other category

#odJumpCat
Type: DIV
Content: dropdown list to select a category

Link: 'View all categories'

#odViewallContainer
Type: DIV
Content: image and text link to see all active questions in all active categories

Link: 'Search'

#odSearchLinkContainer
Type: DIV
Content: image and text link to search page

Link: Printable view

#odPrintableContainer
Type: DIV
Content: image and text link to display current page in printable mode

Copyright block

#odCopyrightContainer
Type: DIV
Content: Copyright information