AppendixCascadingStyleSheets < System

%STARTINCLUDE%
---+ Appendix C: CSS

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

%TOC%

---++ 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=.
   1 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 [[%TOPIC%#DataForms][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 %SYSTEMWEB%.DefaultPreferences; custom set in %USERSWEB%.SitePreferences  |
|=.foswikiNotification=          | Temporary alert, for instance after user actions; used as wrapper around =%<nop>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 =&lt;div class="foswikiClear"&gt;&lt;/div&gt;= |
|=.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 =&lt;img&gt;= 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  |

#DataForms
---+++ 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 [[%TOPIC%#BehaviourClasses][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=             |  |

#BehaviourClasses
---+++ 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 =%<nop>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 %<nop>POPUPWINDOW{"topic"}% instead. |

---++++ Troubleshooting behaviour classes
#TestFoswikiFocus
---+++++ =.foswikiFocus=
   * Test for loading error of focus plugin (no message means ok): %JQREQUIRE{"focus"}%
   * [[%SCRIPTURL{view}%/%WEB%/%TOPIC%?testfocus=1#TestFoswikiFocus][Test foswikiFocus]]

%IF{"$'URLPARAM{testfocus}'='1'" then="
$percntJQREQUIRE{$quotfocus$quot}$percnt
<input type=$quottext$quot class=$quotfoswikiInputField foswikiFocus$quot size=$quot40$quot />
"}%

---+++ Various classes
|=.foswikiWebIndent=                | Used by =%<nop>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 <nop>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

%STOPINCLUDE%
This topic: System > WebHome > ReferenceManual > DeveloperDocumentationCategory > AppendixCascadingStyleSheets
Topic revision: revision 1 (raw view)
Copyright &© by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding BACCHUS Wiki? Send feedback