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