Changeset 1206 for trunk/core/data/System/CascadingStyleSheets.txt
- Timestamp:
- 12/07/08 22:42:30 (3 years ago)
- File:
-
- 1 edited
-
trunk/core/data/System/CascadingStyleSheets.txt (modified) (1 diff)
Legend:
- Unmodified
- Added
- Removed
-
trunk/core/data/System/CascadingStyleSheets.txt
r1178 r1206 1 %META:TOPICINFO{author ="ProjectContributor" date="1111929255" format="1.0" version="$Rev: 16175 $"}%1 %META:TOPICINFO{author"ProjectContributor" date"1111929255" format"1.0" version"$Rev: 16175 $"}% 2 2 %STARTINCLUDE% 3 3 ---+ Appendix C: CSS 4 4 5 _Listing of CSS class names emitted from Foswiki core code and standard plugin._ 5 Listing of CSS class names emitted from Foswiki core code and standard extensions. 6 6 7 7 %TOC% 8 8 9 9 ---++ Who should read this document? 10 11 Most html elements generated by Foswiki core code now have Cascading Style Sheet (CSS) tags. __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. 10 *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. 12 11 13 12 ---++ Naming conventions 13 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=. 14 1 If you define your own CSS classes, it is preferable that you do not use the foswiki prefix to prevent undesired overriding effects. 14 15 15 1 All Foswiki class names have the prefix =twiki=. So: foswikiAlert, twikiToc, etcetera. Remember that CSS class names are case sensitive - Foswiki CSS uses lowercase =tw=. 16 1 If you define your own CSS classes, it is preferable that you do not use the =twiki= prefix to prevent undesired overriding effects. 16 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!) 17 17 18 A wide range of standard styles are used in the Foswiki core code and topics, and more are used in plugins. The following is an exhaustive list of all styles defined by the Pattern skin. 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!) 18 ---++ CSS class names 19 19 20 ---+++ Styles in core code 20 ---+++ Structural elements 21 |=.foswikiPage= | The container for the complete page contents, just below the body tag (only used by default templates) | 22 |=.foswikiMain= | The container for the main contents, usually including the header (only used by default templates) | 23 |=.foswikiTopic= | The container for the topic contents | 24 |=.foswikiTable= | Tables, for instance used by TablePlugin | 25 |=.foswikiForm= | Container for data form in topic, including header; see also [[%TOPIC%#DataForms][Data Forms]] below | 26 |=.foswikiAttachments= | Container for attachments table, including header | 27 |=table#foswikiAttachmentsTable= | Identifier for the attachment table | 28 |=.foswikiFormSteps= | Container around a form that contains a number of separate 'steps'; each 'step' in a separate row | 29 |=.foswikiFormStep= | Form step row | 30 |=.foswikiLast= | Last step (always in combination with =foswikiFormStep=); sometimes used as last table row | 31 |=.foswikiBroadcastMessage= | Site-wide message block; contents set in %SYSTEMWEB%.DefaultPreferences; custom set in %MAINWEB%.SitePreferences | 32 |=.foswikiNotification= | Temporary alert, for instance after user actions; used as wrapper around =%<nop>FLASHNOTE%= | 33 |=.foswikiContentHeader= | Optional container around text placed above topic text | 34 |=.foswikiContentFooter= | Optional container around text placed below topic text | 35 |=.foswikiFooterNote= | Text below topic text; for instance with parent or "topic moved" message | 36 |=#foswikiLogin= | Login box | 37 |=#foswikiLogo= | Logo | 38 |=.foswikiPreviewArea= | Container around topic preview | 21 39 22 |.foswikiAlert | | 23 |.foswikiFirstCol | | 24 |.foswikiForm | | 25 |.foswikiNew |, | 26 |.foswikiHelp | | 27 |.foswikiTopRow | | 28 |.foswikiSummary | | 29 |.foswikiGrayText | | 30 |.foswikiCheckBox | | 31 |.foswikiLink | | 32 |.foswikiNewLink | | 33 |.foswikiAnchorLink | | 34 |.foswikiCurrentWebHomeLink | | 35 |.foswikiCurrentTopicLink | | 36 |.foswikiEmulatedLink | | 37 |.foswikiWebIndent | | 40 ---+++ General appearance 41 |=.foswikiLeft= | Left float | 42 |=.foswikiRight= | Right float | 43 |=.foswikiClear= | Clear float; usually written as =<br class="foswikiClear" />= | 44 |=.foswikiAlert= | Warnings and alert messages; general red text | 45 |=.foswikiHelp= | Help text block | 46 |=.foswikiGrayText= | Grayed out text; text of less importance | 47 |=.foswikiToc= | Table of Contents block | 48 |=.foswikiTocTitle= | Title text of Table of Contents | 49 |=.foswikiHidden= | Hidden elements | 50 |=.foswikiSmall= | Small text | 51 |=.foswikiSmallish= | Somewhat less smaller text; inbetween normal and small | 52 |=.foswikiNoBreak= | Causes whitespace not to create a linebreak; for instance with the dates in the attachment table | 53 |=.foswikiMakeVisible= | For elements that should only be visible with !JavaScript on: default set to hidden, is made visible by !JavaScript; defaults to inline | 54 |=.foswikiMakeVisibleInline= | For =span= elements that should only be visible with !JavaScript on: default set to hidden, is made visible by !JavaScript | 55 |=.foswikiMakeVisibleBlock= | For =div= elements that should only be visible with !JavaScript on: default set to hidden, is made visible by !JavaScript | 56 |=.foswikiMakeHidden= | For elements that should be hidden with !JavaScript on: no default style, is made hidden by !JavaScript | 57 |=.foswikiImage= | Holder form images; for instance to create a border around an =<img>= element | 38 58 39 |.foswikiCheckBox | | 40 |.foswikiRadioButton | | 59 ---+++ Links 60 |=.foswikiCurrentWebHomeLink= | Used by Render.pm if a link points to the web's home topic | 61 |=.foswikiCurrentTopicLink= | Used by Render.pm if a link points to the current topic | 62 |=.foswikiEmulatedLink= | Used in the preview screen to make fake links appear as links | 63 |=.foswikiLinkLabel= | Text part of a link; used if a link contains more than a text label, for instance an icon | 64 |=.foswikiUnvisited= | Makes link appear as not visited (ignores the visited link state) | 41 65 42 |.twikiDiffTable | | 43 |.twikiDiffDeletedHeader | | 44 |.twikiDiffDeletedMarker | | 45 |.twikiDiffDeletedText | | 46 |.twikiDiffAddedHeader | | 47 |.twikiDiffAddedMarker | | 48 |.twikiDiffAddedText | | 49 |.twikiDiffChangedHeader | | 50 |.twikiDiffChangedText | | 51 |.twikiDiffUnchangedText | | 52 |.twikiDiffUnchangedTextContents | | 53 |.twikiDiffLineNumberHeader | | 54 |.twikiDiffDebug | | 55 |.twikiDiffDebugRight | | 56 |.twikiDiffDebugLeft | | 66 ---+++ Tables 67 |=.foswikiFirstCol= | Leftmost column | 68 |=.foswikiLastCol= | Rightmost column | 69 |=.foswikiSortedCol= | Sorted column | 70 |=.foswikiSortedAscendingCol= | Sorted column, ascending | 71 |=.foswikiSortedDescendingCol= | Sorted column, descending | 72 |=.foswikiTopRow= | First row in search results; also used for styling first table rows (=td.foswikiTopRow=) | 73 |=.foswikiTableEven= | Even numbered rows | 74 |=.foswikiTableOdd= | Odd numbered rows | 75 |=.foswikiTableCol + column number= | Unique column identifier, for instance: twikiTableCol0 | 76 |=.foswikiTableRow + type + row number= | Unique row identifier, for instance: twikiTableRowdataBg0 | 77 |=.tableSortIcon= | Holder (=span=) for the table column sort icon | 57 78 58 |.twikiToc | | 59 |.twikiTocTitle | | 79 #DataForms 80 ---+++ Data Forms 81 |=.foswikiForm= | Container for data form in topic, including header | 82 |=.foswikiFormHolder= | Outer container for the data form in edit; contains the textarea width | 83 |=.foswikiFormTable= | Table container for (editable) form elements | 84 |=.foswikiFormTableHRow= | Table container for (editable) form elements | 85 |=.foswikiFormTableRow= | Table container for form elements | 86 |=.foswikiFormTableFooter= | Table container for form elements | 87 |=.foswikiEditForm= | Edit state of data form | 60 88 61 |=.twikiTable= |The table | 62 |=.twikiSortedCol= |A sorted column | 63 |=.twikiSortedAscendingCol= |Sorted column, ascending | 64 |=.twikiSortedDescendingCol= |Sorted column, descending | 65 |=.tableSortIcon= |The sort icon holder (span) | 66 |=.foswikiFirstCol= |The first column | 67 |=.twikiTableEven= |Even numbered rows | 68 |=.twikiTableOdd= |Odd numbered rows | 69 |=.twikiTableCol= + column number | Unique column identifier, for instance: =twikiTableCol0= | 70 |=.twikiTableRow= + type + row number | Unique row identifier, for instance: =twikiTableRowdataBg0= | 89 ---+++ HTML Forms 90 |=.foswikiPageForm= | Container for the form on the page | 91 |=.foswikiButton= | Normal button | 92 |=.foswikiButtonDisabled= | Disabled normal button | 93 |=.foswikiSubmit= | Submit button | 94 |=.foswikiSubmitDisabled= | Disabled submit button | 95 |=.foswikiButtonCancel= | Cancel button | 96 |=.foswikiInputField= | Text input field | 97 |=.foswikiInputFieldDisabled= | Disabled text input field | 98 |=.foswikiInputFieldReadOnly= | Read-only text input field | 99 |=.foswikiInputFieldFocus= | Text input field with insert focus; for Internet Explorer that does not recognize the =:focus= pseudo class selector | 100 |=.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" | 101 |=.foswikiFocus= | Behaviour marker so a field can be given input focus | 102 |=.foswikiRadioButton= | Radio button | 103 |=.foswikiSelect= | Select dropdown menu | 104 |=.foswikiSelectDisabled= | Disabled dropdown menu | 105 |=.foswikiOption= | Dropdown option element | 106 |=.foswikiTextarea= | Textarea | 107 |=.foswikiTextareaRawView= | Raw topic view textarea | 108 109 ---+++ Search 110 |=table#foswikiSearchTable= | Table with search input form elements; used in WebSearch, WebSearchAdvanced and WebTopicViewTemplate | 111 |=.foswikiSummary= | Summary of search results | 112 |=.foswikiNew= | Identifier of new topics: topics without a revision history | 113 |=.foswikiTopRow= | First row in search results; also used for styling first table rows (=td.foswikiTopRow=) | 114 |=.foswikiBottomRow= | Last row in search results | 115 |=.foswikiSRRev= | Revision number in search results listing | 116 |=.foswikiSRAuthor= | Author in search results listing | 117 |=.foswikiSearchResultCount= | Search results count | 118 |=#foswikiNumberOfResultsContainer= | See [[%TOPIC%#BehaviourClasses][Behaviour classes]] below | 119 |=#foswikiWebSearchForm= | See [[%TOPIC%#BehaviourClasses][Behaviour classes]] below | 120 |=#foswikiModifySearchContainer= | See [[%TOPIC%#BehaviourClasses][Behaviour classes]] below | 121 122 ---+++ History 123 |=.foswikiDiffTable= | Revision table | 124 |=.foswikiDiffDeletedMarker= | Demarkation of part that has been deleted | 125 |=.foswikiDiffDeletedText= | Demarkation of part that has been deleted | 126 |=.foswikiDiffAddedHeader= | Demarkation of part that has been added | 127 |=.foswikiDiffAddedMarker= | Demarkation of part that has been added | 128 |=.foswikiDiffAddedText= | Demarkation of part that has been added | 129 |=.foswikiDiffChangedHeader= | Demarkation of part that has been changed | 130 |=.foswikiDiffChangedText= | Demarkation of part that has been changed | 131 |=.foswikiDiffUnchangedText= | Demarkation of part that has been unchanged | 132 |=.foswikiDiffUnchangedTextContents= | Demarkation of part that has been unchanged | 133 |=.foswikiDiffLineNumberHeader= | | 134 |=.foswikiDiffDebug= | | 135 |=.foswikiDiffDebugRight= | | 136 |=.foswikiDiffDebugLeft= | | 137 138 #BehaviourClasses 139 ---+++ Behaviour classes 140 Markers to invoke behaviour with unobtrusive !JavaScript. 141 |=.foswikiPopUp= | Behaviour marker so a popup-window can be invoked | 142 |=.foswikiFocus= | Behaviour marker so a field can be given input focus | 143 |=.foswikiChangeFormButton= | "Replace form" button; clicking calls !JavaScript function =suppressSaveValidation= | 144 |=#foswikiNumberOfResultsContainer= | Container identifier to write the number of search results into | 145 |=#foswikiWebSearchForm= | Form identifier to place the "Modify search" link before | 146 |=#foswikiModifySearchContainer= | Container identifier to write the "Modify search" link into | 147 148 ---+++ Other classes 149 |=.foswikiWebIndent= | Used by =%<nop>WEBLIST%= to indent sub-web names | 150 |=.foswikiAccessKey= | Access key demarkation | 151 |=.foswikiSeparator= | Separator element between sequential elements; usually a pipe character | 152 |=.foswikiActionFormStepSign= | Indicator for each form step (see =foswikiFormStep=) | 153 |=.foswikiEditboxStyleMono= | Gives the edit textarea monospaced font (not used with WYSWIWYG) | 154 |=.foswikiEditboxStyleProportional= | Gives the edit textarea proportional font (not used with WYSWIWYG) | 71 155 72 156 73 ---+++ Styles in Templates74 157 75 |.twikiPage |foswiki.tmpl |76 |.twikiMain |foswiki.tmpl |77 |.foswikiTopic | |78 |.twikiFormTable |formtables.tmpl, form.tmpl |79 |.twikiFormTableHRow |formtables.tmpl, form.tmpl |80 |.twikiFormTableRow |formtables.tmpl |81 |.twikiFormTableFooter |formtables.tmpl |82 |.twikiAttachments |attachtables.tmpl |83 |.twikiEditForm |form.tmpl |84 |.twikiSubmit |Submit button |85 |.twikiSubmitDisabled |Disabled submit button |86 |.twikiInputField | |87 |.twikiInputFieldDisabled | |88 |.twikiInputFieldReadOnly | |89 |.twikiInputFieldFocus | For Internet Explorer that does not recognize the =:focus= pseudo class selector |90 |.twikiInputFieldBeforeFocus |for use with Javascript: the color of the input text when not clicked in the field |91 |.twikiSelect | Select dropdown menu |92 |.foswikiTextarea | |93 |.twikiTextareaRawView | |94 |.foswikiButton | |95 |.twikiFocus |Behaviour marker so a field can be given input focus |96 |.twikiLeft | |97 |.twikiRight | |98 |.twikiClear | |99 |.twikiHidden | |100 |.twikiSmall | |101 |.twikiBottomRow | |102 |.twikiSRAuthor | |103 |.twikiSRRev | |104 |.twikiPageForm | |105 |.twikiSeparator | |106 |.twikiAccessKey | |107 |.twikiLinkLabel | |108 |.twikiFormSteps |container around a form, such as the attach form: attach.tmpl |109 |.twikiFormStep |form row |110 |.twikiNoBreak | no break on whitespace |111 |.twikiMakeVisible |For elements that should only be visible with javascript on: default set to hidden, is made visible by javascript. Defaults to inline. |112 |.twikiMakeVisibleInline |For =span= elements that should only be visible with javascript on: default set to hidden, is made visible by javascript. |113 |.twikiMakeVisibleBlock |For =div= elements that should only be visible with javascript on: default set to hidden, is made visible by javascript. |114 |.twikiMakeHidden |For elements that should be *hidden* with javascript on: no default style, is made hidden by javascript. |115 |.twikiFooterNote | |116 |.twikiPopUp | Behaviour marker so a popup-window can be invoked |117 |.twikiContentHeader |container around optional html placed before topic text |118 |.twikiContentFooter |container around optional html placed after topic text |119 158 120 ---+++ Styles used in =configure=121 |#twikiLogin | |122 |.twikiFormSteps | |123 |.twikiFormStep | |124 159 125 ---+++ Styles in topics126 160 127 |.twikiBroadcastMessage |%SYSTEMWEB%.DefaultPreferences! |128 |#twikiSearchTable |%SYSTEMWEB%.WebSearch, %SYSTEMWEB%.WebSearchAdvanced |129 130 ---+++ Styles in Skins131 |#twikiLogin | login.pattern.tmpl | |132 133 ---+++ Reserved Styles134 |.twikiImage | defined in PatternSkin |div creates border around enclosed image |135 |.twikiNotification | defined in PatternSkin |temporary alert, lighter than broadcast message |136 |.twikiUnvisited | defined in PatternSkin |link style that ignores the visited link state; useful for form links |137 161 138 162 ---++ Tips
Note: See TracChangeset
for help on using the changeset viewer.
