You are here: Foswiki>System Web>Category>DeveloperDocumentationCategory>AppendixCascadingStyleSheets (2024-12-23, UnknownUser)Edit Attach

Appendix C: CSS

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

With Foswiki 2.0 a number of classes have been deprecated. These are marked DEPRECATED below.

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 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
.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)
.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 TablePlugin
.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
.foswikiMakeVisibleBlockDEPRECATED 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
.foswikiMakeVisibleInlineDEPRECATED 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
.foswikiPopUpDEPRECATED as of Foswiki 1.1.0 Use %POPUPWINDOW{"topic"}%

Troubleshooting foswikiFocus

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

Edit  | Attach | Print version | History: r1 | Backlinks | View wiki text | Edit wiki text | More topic actions

Topic revision: r1 - 2024-12-23, UnknownUser

This site is powered by FoswikiCopyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback