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

Various 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

-- TimoBaumann - 12 Oct 2015

 
Copyright � by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback