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
.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
.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%
.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

General appearance

.foswikiLeft	Left float
.foswikiRight	Right float
.foswikiClear	Clear float; usually written as <br class="foswikiClear" />
.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
.foswikiMakeVisible	For elements that should only be visible with JavaScript on: default set to hidden, is made visible by JavaScript; defaults to inline
.foswikiMakeVisibleInline	For span elements that should only be visible with JavaScript on: default set to hidden, is made visible by JavaScript
.foswikiMakeVisibleBlock	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
.foswikiSelect	Select dropdown menu
.foswikiSelectDisabled	Disabled dropdown menu
.foswikiOption	Dropdown option element
.foswikiTextarea	Textarea
.foswikiTextareaRawView	Raw topic view textarea

Search

table#foswikiSearchTable	Table with search input form elements; used in WebSearch, WebSearchAdvanced and WebTopicViewTemplate?
.foswikiSummary	Summary of search results
.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	See Behaviour classes below
#foswikiModifySearchContainer	See Behaviour classes below

History

.foswikiDiffTable	Revision table
.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
.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
.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
#foswikiWebSearchForm	Form identifier to place the "Modify search" link before
#foswikiModifySearchContainer	Container identifier to write the "Modify search" link into

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"

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