data/TWiki/PatternSkinCss.txt
author Colas Nahaboo <colas@nahaboo.net>
Sat, 26 Jan 2008 15:50:53 +0100
changeset 0 414e01d06fd5
permissions -rw-r--r--
RELEASE 4.2.0 freetown
colas@0
     1
%META:TOPICINFO{author="TWikiContributor" date="1141775863" format="1.1" version="7"}%
colas@0
     2
---+!! CSS elements in !PatternSkin
colas@0
     3
colas@0
     4
This page is a reference for all CSS classes used in PatternSkin.
colas@0
     5
colas@0
     6
%TOC{title="Page contents:"}%
colas@0
     7
colas@0
     8
!PatternSkin uses 4 stylesheets:
colas@0
     9
   * [[%PUBURLPATH%/%SYSTEMWEB%/PatternSkin/layout.css][layout.css]]: positioning of block elements on the page
colas@0
    10
   * [[%PUBURLPATH%/%SYSTEMWEB%/PatternSkin/style.css][style.css]]: margins, paddings, borders, font sizes
colas@0
    11
   * [[%PUBURLPATH%/%SYSTEMWEB%/PatternSkin/colors.css][colors.css]]: text colors, background colors, border colors
colas@0
    12
   * [[%PUBURLPATH%/%SYSTEMWEB%/PatternSkin/print.css][print.css]]: optimalizations for printed page
colas@0
    13
   
colas@0
    14
If you want to learn how to create your own look or skin based on !PatternSkin, read further in PatternSkin.
colas@0
    15
colas@0
    16
---++ Naming conventions
colas@0
    17
colas@0
    18
   * All !PatternSkin specific classes have the prefix =pattern=: patternEditPage, patternTopicAction, etcetera. 
colas@0
    19
   * TWiki specific classes (emitted by the TWiki engine) have the prefix =twiki=: twikiButton, twikiToc, etcetera. See for a complete list TWikiCss.
colas@0
    20
   * Positional containers are referred by id, for instance =#patternLeftBar=.
colas@0
    21
colas@0
    22
---++ Namespaces
colas@0
    23
colas@0
    24
!PatternSkin uses namespaces for templates, by adding one (sometimes two - multiple) class names to the template's body tag. 
colas@0
    25
colas@0
    26
   * The body tag in view.pattern.tmpl for instance has the class name "patternViewPage": =&lt;body class="patternViewPage"&gt;=. All CSS elements specific to the view template thus can be defined as =.patternViewPage .someClassName=.
colas@0
    27
   * All templates that are _not_ the view template have the body class name "patternNoViewPage". That makes it easy to give all of these pages a different layout (smaller or wider margins for instance) in one sweep. Template edit.pattern.tmpl uses =&lt;body class="patternNoViewPage patternEditPage"&gt;=.
colas@0
    28
colas@0
    29
---+++ Page type classes
colas@0
    30
colas@0
    31
   * .patternViewPage
colas@0
    32
   * .patternViewPage .patternPrintPage
colas@0
    33
   * .patternNoViewPage
colas@0
    34
   * .patternNoViewPage .patternEditPage
colas@0
    35
   * .patternNoViewPage .patternAttachPage
colas@0
    36
   * .patternNoViewPage .patternChangeFormPage
colas@0
    37
   * .patternNoViewPage .patternDiffPage
colas@0
    38
   * .patternNoViewPage .patternRenamePage
colas@0
    39
   * .patternSearchResultsPage
colas@0
    40
   * .patternPlainPage (=viewplain.pattern.tmpl=)
colas@0
    41
colas@0
    42
---++ Layout classes
colas@0
    43
colas@0
    44
   * Main layout elements (in order of appearance in =body.pattern.tmpl=)
colas@0
    45
      * #patternScreen - outer container, used when centering the page (see PatternSkinCssCookbookCenterPage)
colas@0
    46
      * #patternPageShadow - shadow border around patternPage; default not used (see PatternSkinCssCookbookCenterPageBorder)
colas@0
    47
      * #patternPage - html content container
colas@0
    48
      * Left bar:
colas@0
    49
         * #patternWrapper
colas@0
    50
         * #patternLeftBar - left bar area
colas@0
    51
         * #patternLeftBarContents - used for left menu
colas@0
    52
      * #patternOuter - wrapper container
colas@0
    53
      * #patternFloatWrap - wrapper container
colas@0
    54
      * #patternMain - center area
colas@0
    55
      * #patternMainContents - holder of patternTop, patternTopic, twikiForm, twikiAttachments, etc.
colas@0
    56
      * #patternTopBar - top bar area
colas@0
    57
      * #patternTopBarContents - header art / logo; contains topic %SYSTEMWEB%.WebTopBar
colas@0
    58
      * #patternBottomBar - bottom bar area
colas@0
    59
      * #patternBottomBarContents - copyright
colas@0
    60
colas@0
    61
---++ Style classes
colas@0
    62
colas@0
    63
   * View
colas@0
    64
      * .patternContent - container around .patternTopic in =view.pattern.tmpl= only; to be able to give .twikiAttachments and .twikiForm a different appearance when they are not enclosed by it, for example the personal data form on the user pages (where the user form is positioned outside, above the topic text)
colas@0
    65
      * .patternTopBarLogo - logo position in patternTopBar (topic %SYSTEMWEB%.WebTopBar)
colas@0
    66
      * .patternTopBarOverlay - striped white image background
colas@0
    67
      * .patternTopic - TWiki topic text
colas@0
    68
      * .patternTop - area at top of topic text, with patternHomePath, revision and action buttons
colas@0
    69
      * .patternTopicActions - container for multiple .patternTopicAction rows
colas@0
    70
      * .patternTopicAction - container for .patternActionButtons
colas@0
    71
      * .patternActionButtons - action buttons at bottom of page
colas@0
    72
      * .patternMoved - topic moved info (only visible when the topic has changed name or web)
colas@0
    73
      * .patternWebIndicator - colored block at the top of the left bar to indicate the current web
colas@0
    74
      * .patternFormHolder - container around form to manage the size of form elements
colas@0
    75
      * .patternLeftBarPersonal - block of personal links (included topic %<nop>USERSWEB%.%<nop>USERNAME%LeftBar)
colas@0
    76
      * .patternHomePath - breadcrumb at top
colas@0
    77
      * .patternHomePathTitle - "You are here" text
colas@0
    78
      * .patternRevInfo - revision info and author name
colas@0
    79
      * .patternToolBar - holder for .patternToolBarButtons
colas@0
    80
      * .patternToolBarButtons - action buttons at top of page
colas@0
    81
      * .patternToolBarBottom - seperator
colas@0
    82
      * .patternSimpleLogo - logo used on 'simple' pages like the login screen
colas@0
    83
      * .patternButton - tab button Edit, Attach, Printable at top of topic
colas@0
    84
      * .patternMetaMenu - search box, jump box, language selector
colas@0
    85
colas@0
    86
   * Edit
colas@0
    87
      * .patternSig - signature copy box
colas@0
    88
      * .patternSaveOptions - holder for .patternSaveOptionsContents
colas@0
    89
      * .patternSaveOptionsContents - checkboxes that change the state of a topic save; for instance "Force revision" checkbox
colas@0
    90
      * .patternSaveHelp - info block with help on save options (access keys and potentially other info)
colas@0
    91
colas@0
    92
   * Preview page
colas@0
    93
      * .patternPreviewArea - container around preview of .patternTopic
colas@0
    94
colas@0
    95
   * Attach page
colas@0
    96
      * .patternPrevious - attachment table of previous versions
colas@0
    97
      * .patternMoveAttachment - container for "Move or Delete attachment"
colas@0
    98
      * .patternAttachForm
colas@0
    99
colas@0
   100
   * Rename (rename, move, delete)
colas@0
   101
      * patternRenameOptionsList - list of topics that can be updated
colas@0
   102
colas@0
   103
   * More
colas@0
   104
      * patternDiffOptions - row of revision options under "Compare revisions"
colas@0
   105
      
colas@0
   106
   * Search results
colas@0
   107
      * .patternSearchResults - container on rename pages (no longer used on actual search results 'view' pages)
colas@0
   108
      * .patternSearchResultsHeader - horizontal bar with the web color
colas@0
   109
      * .patternSearchResults - block of one result
colas@0
   110
      * .patternSearchResultCount - the number of results
colas@0
   111
      * .patternSearched - feedback on the string used to search
colas@0
   112
colas@0
   113
__Related Topics:__ TWikiSkins, AdminDocumentationCategory
colas@0
   114
colas@0
   115
colas@0
   116
%META:FILEATTACHMENT{name="CSS_element_layout_view.pattern.tmpl.png" attr="h" comment="" date="1092634624" path="CSS_element_layout_view.pattern.tmpl.png" size="37359" user="TWikiContributor" version="1.1"}%