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
.foswikiPage
The container for the complete page contents, just below the body tag (only used by default templates)
.foswikiMain
The container for the main contents, usually including the header (only used by default templates)
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
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; inbetween 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
.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
.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
.foswikiMakeVisibleBlock
DEPRECATED as of Foswiki 1.1.0: use div.foswikiMakeVisible. For div elements that should only be visible with JavaScript on: default set to hidden, is made visible by JavaScript
.foswikiMakeHidden
For elements that should be hidden with JavaScript on: no default style, is made hidden by JavaScript
.foswikiImage
Holder form 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
.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 Forms
.foswikiForm
Container for data form in topic, including header
.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 Forms
.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
.foswikiSearchResults
List of search results
.foswikiSearchResult
Search result with title, summary, author and date
.foswikiSearchResultsHeader
Search results header with search string, number of hits
.foswikiSearchResultsPager
Search results pagination
.foswikiSummary
Summary of search results
.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)
Markers to invoke behaviour with unobtrusive JavaScript.
.foswikiFocus
Behaviour marker so a field can be given input focus. As of Foswiki 1.2 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.
.foswikiPopUp
Behaviour marker so a popup-window can be invoked. DEPRECATED as of Foswiki 1.1: use %POPUPWINDOW{"topic"}% instead.
Troubleshooting behaviour classes
.foswikiFocus
Test for loading error of focus plugin (no message means ok):
Main
Copyright © by the contributing authors. All material on this site is the property of the contributing authors.