%META:TOPICINFO{author="ProjectContributor" date="1252718557" format="1.1" version="1"}%
%META:TOPICPARENT{name="DeveloperDocumentationCategory"}%
%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 |
|=.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 %SYSTEMWEB%.DefaultPreferences; custom set in %USERSWEB%.SitePreferences  |
|=.foswikiNotification=          | Temporary alert, for instance after user actions; used as wrapper around =%<nop>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 =&lt;br class="foswikiClear" /&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 |
|=.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 =&lt;img&gt;= 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  |

#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  |
|=.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  |
|=.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 [[%TOPIC%#BehaviourClasses][Behaviour classes]] below  |
|=#foswikiWebSearchForm=            | See [[%TOPIC%#BehaviourClasses][Behaviour classes]] below  |
|=#foswikiModifySearchContainer=    | See [[%TOPIC%#BehaviourClasses][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=             |  |

#BehaviourClasses
---+++ 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 =%<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" |




---++ 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%
