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

.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 Default Preferences; custom set in Site Preferences
.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 Table Plugin
.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

See also: HTML 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 Pattern Skin topic and Pattern Skin Css to learn more about creating your own CSS-based skin.

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

---

Related Topics: Skins, Pattern Skin, Developer Documentation Category, Admin Documentation Category