Appendix C: CSS

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

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

1. 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.
2. 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)
.foswikiTopic	The container for the topic contents
.foswikiTable	Tables, for instance used by TablePlugin
.foswikiForm	Container for data form in topic, including header; see also Data Forms below
.foswikiAttachments	Container for attachments table, including header
table#foswikiAttachmentsTable	Identifier for the attachment table
.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
.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

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; defaults to inline
.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

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
.foswikiMandaroty	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"
.foswikiFocus	Behaviour marker so a field can be given input focus
.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

.foswikiSearchResultsHeader	Search results header with search string, number of hits
.foswikiSearchResult	Search result with title, summary, author and date
.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)
.foswikiBottomRow	Last row in search results
.foswikiSRRev	Revision number in search results listing
.foswikiSRAuthor	Author in search results listing
.foswikiSearchResultCount	Search results count
#foswikiNumberOfResultsContainer	See Behaviour classes below
.foswikiWebSearchForm	Container around the search form

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.

.foswikiPopUp	Behaviour marker so a popup-window can be invoked. DEPRECATED as of Foswiki 1.1: use %POPUPWINDOW{"topic"}% instead.
.foswikiFocus	Behaviour marker so a field can be given input focus
.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.

Other classes

.foswikiWebIndent	Used by %WEBLIST% to indent sub-web names
.foswikiAccessKey	Access key demarkation
.foswikiSeparator	Separator element between sequential elements; usually a pipe character
.foswikiActionFormStepSign	Indicator for each form step (see foswikiFormStep)
.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	Span around icon image

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/

---

Related Topics: Skins, PatternSkin, DeveloperDocumentationCategory, AdminDocumentationCategory