Appendix C: CSS

Listing of CSS class names emitted from Foswiki core code and standard extensions.

With Foswiki 2.0 a number of classes have been deprecated. These are marked DEPRECATED below.

On this page:

Who should read this document?
Naming conventions
CSS class names
Tips

Who should read this document?

Skin builders and others who want to change the appearance of the default installation or any of the skins can use this document to see what styles can be created for these html elements.

Naming conventions

All Foswiki class names have the prefix foswiki - for example: foswikiAlert, foswikiToc. This makes it less likely that our CSS classes will get in conflict with other Style Sheets. Remember that CSS class names are case sensitive - Foswiki CSS uses lowercase foswiki.
If you define your own CSS classes, it is preferable that you do not use the foswiki prefix to prevent undesired overriding effects.

A wide range of standard styles are used in the Foswiki core code and topics, and more are used in extensions. The following is an exhaustive list of all styles defined by Foswiki. For the most part, the names are the only documentation of the purpose of the style. For more information on how these styles are used, read the code (sorry!)

CSS class names

Structural elements

`.foswikiContainer`	Container around all level one page elements to maintain consistent width and margins
`.foswikiPage`	The container for the complete page contents, just below the body tag (only used by default templates)
`.foswikiTopic`	The container for the topic contents
`.foswikiAttachments`	Container for attachments table, including header
`table#foswikiAttachmentsTable`	Identifier for the attachment table
`.foswikiHorizontalList`	Container around horizontal bullet list (`.foswikiHorizontalList ul`)
`li.foswikiLast`	Last element of a horizontal list
`.foswikiBroadcastMessage`	Site-wide message block; contents set in DefaultPreferences; custom set in SitePreferences
`.foswikiNotification`	Temporary alert, for instance after user actions; used as wrapper around `%FLASHNOTE%`
`.foswikiMessage`	Permanent/semi-permanent message.
`.foswikiContentHeader`	Optional container around text placed above topic text
`.foswikiContentFooter`	Optional container around text placed below topic text
`.foswikiFooterNote`	Text below topic text; for instance with parent or "topic moved" message
`#foswikiLogin`	Login box
`#foswikiLogo`	Logo
`.foswikiPreviewArea`	Container around topic preview
`.foswikiTopicActions`	Topic Actions list
`.foswikiTopicInfo`	Topic Info section containing REVINFO
`.foswikiTopicText`	The rendered Topic text
`.foswikiTabs`	Container for tabs (styled bullet list, `.foswikiTabs ul`)
`li.foswikiActiveTab`	Active tab
`.foswikiTabContent`	Container for content below tabs
`.foswikiMain`	The container for the main contents, usually including the header (only used by default templates)

General appearance

`.foswikiLeft`	Left float
`.foswikiRight`	Right float
`.foswikiClear`	Clear float; usually written as `<div class="foswikiClear"></div>`
`.foswikiAlert`	Warnings and alert messages; general red text
`.foswikiHelp`	Help text block
`.foswikiGrayText`	Grayed out text; text of less importance
`.foswikiToc`	Table of Contents block
`.foswikiTocTitle`	Title text of Table of Contents
`.foswikiHidden`	Hidden elements
`.foswikiSmall`	Small text
`.foswikiSmallish`	Somewhat less smaller text; in-between normal and small
`.foswikiLarge`	Large text, for instance for introduction paragraphs
`.foswikiNoBreak`	Causes whitespace not to create a linebreak; for instance with the dates in the attachment table
`.foswikiImage`	Optional container around images; for instance to create a border around an `<img>` element
`.foswikiUserName`	Container around user name links (not used much yet)

Links

`.foswikiCurrentWebHomeLink`	Used by Render.pm if a link points to the web's home topic
`.foswikiCurrentTopicLink`	Used by Render.pm if a link points to the current topic
`.foswikiEmulatedLink`	Used in the preview screen to make fake links appear as links
`.foswikiLinkLabel`	Text part of a link; used if a link contains more than a text label, for instance an icon
`.foswikiUnvisited`	Makes link appear as not visited (ignores the visited link state)
`.foswikiRequiresChangePermission`	To mark links to actions that the user does not have permissions for (for instance to hide action links)

Tables

`.foswikiTable`	Tables, for instance used by TablePlugin
`.foswikiFirstCol`	Leftmost column
`.foswikiLastCol`	Rightmost column
`.foswikiSortedCol`	Sorted column
`.foswikiSortedAscendingCol`	Sorted column, ascending
`.foswikiSortedDescendingCol`	Sorted column, descending
`.foswikiTopRow`	First row in search results; also used for styling first table rows (`td.foswikiTopRow`)
`.foswikiTableEven`	Even numbered rows
`.foswikiTableOdd`	Odd numbered rows
`.foswikiTableCol + column number`	Unique column identifier, for instance: foswikiTableCol0
`.foswikiTableRow + type + row number`	Unique row identifier, for instance: foswikiTableRowdataBg0
`.tableSortIcon`	Holder (`span`) for the table column sort icon

Data form elements

`.foswikiFormHolder`	Outer container for the data form in edit; contains the textarea width
`.foswikiFormTable`	Table container for (editable) form elements
`.foswikiFormTableHRow`	Table container for (editable) form elements
`.foswikiFormTableRow`	Table container for form elements
`.foswikiFormTableFooter`	Table container for form elements
`.foswikiEditForm`	Edit state of data form
`.foswikiMandatory`	Indication of mandatory field
`.foswikiAddFormButton`	"Add form" button on edit screen

HTML form elements

`.foswikiForm`	Container for data form in topic, including header
`.foswikiActionFormStepSign`	Indicator for each form step (see `foswikiFormStep`)
`.foswikiFormSteps`	Container around a form that contains a number of separate 'steps'; each 'step' in a separate row
`.foswikiFormStep`	Form step row
`.foswikiLast`	Last step (always in combination with `foswikiFormStep`); sometimes used as last table row
`.foswikiPageForm`	Container for the form on the page
`.foswikiButton`	Normal button
`.foswikiButtonDisabled`	Disabled normal button
`.foswikiSubmit`	Submit button
`.foswikiSubmitDisabled`	Disabled submit button
`.foswikiButtonCancel`	Cancel button
`.foswikiInputField`	Text input field
`.foswikiInputFieldDisabled`	Disabled text input field
`.foswikiInputFieldReadOnly`	Read-only text input field
`.foswikiInputFieldFocus`	Text input field with insert focus; for Internet Explorer that does not recognize the `:focus` pseudo class selector
`.foswikiInputFieldBeforeFocus`	The color of the input text field when not clicked in the field; usually a grayed text color with a hint, for instance "Search"
`.foswikiRadioButton`	Radio button
`.foswikiCheckbox`	Checkbox
`.foswikiSelect`	Select dropdown menu
`.foswikiSelectDisabled`	Disabled dropdown menu
`.foswikiOption`	Dropdown option element
`.foswikiTextarea`	Textarea
`.foswikiTextareaRawView`	Raw topic view textarea

Search and lists

`.foswikiSearchResult`	Container around image and contents
`.foswikiSearchResultContents`	Search result content, such as title, summary, author
`.foswikiSearchResultCount`	Search results count
`.foswikiSearchResultImage`	Container around image (`img` tag) in Search results
`.foswikiSearchResultMeta`	Search result meta data such as author name, date
`.foswikiSearchResultTitle`	Search result title
`.foswikiSearchResults`	List of search results
`.foswikiSearchResultsHeader`	Search results header with search string, number of hits
`.foswikiSearchResultsPager`	Search results pagination
`.foswikiSummary`	Topic or list item summary
`.foswikiSummary em`	Highlighted search term in summary
`.foswikiNew`	Identifier of new topics: topics without a revision history
`.foswikiTopRow`	First row in search results; also used for styling first table rows (`td.foswikiTopRow`)
`.foswikiBottomRow`	Last row in search results
`.foswikiSRRev`	Revision number in search results listing
`.foswikiSRAuthor`	Author in search results listing
`#foswikiNumberOfResultsContainer`	See Behaviour classes below
`.foswikiWebSearchForm`	Container around the search form

Other elements

`.foswikiButtonGroup`	Group of buttons. Introduced with Foswiki 2.0.
`.foswikiToolbar`	Container for controls. Introduced with Foswiki 2.0.
`.foswikiToolbarHeader`	Header in `foswikiToolbar`. Introduced with Foswiki 2.0.
`.foswikiWebIndent`	Used by `%WEBLIST%` to indent sub-web names
`.foswikiAccessKey`	Access key demarkation
`.foswikiSeparator`	Separator element between sequential elements; usually a pipe character
`.foswikiEditboxStyleMono`	Gives the edit textarea monospaced font (not used with WYSWIWYG)
`.foswikiEditboxStyleProportional`	Gives the edit textarea proportional font (not used with WYSWIWYG)
`p.foswikiAllowNonWikiWord`	Message "Allow non WikiWord for the new topic name"
`.foswikiIcon`	Icon image; span around image or the image itself

History

`.foswikiDiffTable`	Revision table
`.foswikiMarker`	Demarkation of part
`.foswikiDiffDeletedMarker`	Demarkation of part that has been deleted
`.foswikiDiffDeletedText`	Demarkation of part that has been deleted
`.foswikiDiffAddedHeader`	Demarkation of part that has been added
`.foswikiDiffAddedMarker`	Demarkation of part that has been added
`.foswikiDiffAddedText`	Demarkation of part that has been added
`.foswikiDiffChangedHeader`	Demarkation of part that has been changed
`.foswikiDiffChangedText`	Demarkation of part that has been changed
`.foswikiDiffUnchangedMarker`	Demarkation of part that has been unchanged
`.foswikiDiffUnchangedText`	Demarkation of part that has been unchanged
`.foswikiDiffUnchangedTextContents`	Demarkation of part that has been unchanged
`.foswikiDiffLineNumberHeader`
`.foswikiDiffDebug`
`.foswikiDiffDebugRight`
`.foswikiDiffDebugLeft`

Behaviour classes

Markers to invoke behaviour with unobtrusive JavaScript.

`.foswikiFocus`	Behaviour marker so a field can be given input focus. As of Foswiki 2.0 this also requires to add `%JQREQUIRE{"focus"}%` to the page.
`.foswikiChangeFormButton`	"Replace form" button; clicking calls JavaScript function `suppressSaveValidation`
`#foswikiNumberOfResultsContainer`	Container identifier to write the number of search results into
`input[type="text"].foswikiDefaultText`	Behaviour marker so the field will contain default text that disappears when clicked into. The visual style is set with `foswikiInputFieldBeforeFocus` and `foswikiInputFieldFocus`. The default text is provided by the `title` attribute of the form field.
`.foswikiJs`	Added to the `html` tag if the browser has javascript enabled.
`.foswikiMakeVisible`	For elements that should only be visible with JavaScript on: default set to hidden, is made visible by JavaScript. This is how it works: by default the body tag should include the class `foswikiNoJs`. An `onload` script replaces that class with `foswikiJs`. Elements that should be hidden have the class style `.foswikiNoJs .foswikiMakeVisible`.
`.foswikiMakeHidden`	For elements that should be hidden with JavaScript on: no default style, is made hidden by JavaScript
`.foswikiSort`	Sort control
`.foswikiMakeVisibleBlock`	DEPRECATED as of Foswiki 1.1.0 Use `.foswikiMakeVisible` - for `div` elements that should only be visible with JavaScript on: default set to hidden, is made visible by JavaScript
`.foswikiMakeVisibleInline`	DEPRECATED as of Foswiki 1.1.0 Use `span.foswikiMakeVisible` - for `span` elements that should only be visible with JavaScript on: default set to hidden, is made visible by JavaScript
`.foswikiPopUp`	DEPRECATED as of Foswiki 1.1.0 Use `%POPUPWINDOW{"topic"}%`

Troubleshooting foswikiFocus

Test for loading error of focus plugin (no message means ok):
Test foswikiFocus

Tips

PatternSkin makes extensive use of CSS in its templates. Read the PatternSkin topic and PatternSkinCss to learn more about creating your own CSS-based skin.

Practical introduction to CSS: http://www.w3.org/Style/LieBos2e/enter/