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
.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
.foswikiCheckbox Checkbox
.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"
.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
Topic revision: r1 - 12 Sep 2009, ProjectContributor
 
This site is powered by FoswikiCopyright © CC-BY-SA by the contributing authors. All material on this collaboration platform is copyrighted under CC-BY-SA by the contributing authors unless otherwise noted.
Ideas, requests, problems regarding Foswiki? Send feedback