head 1.6; access; symbols; locks; strict; comment @# @; 1.6 date 2007.01.16.04.12.05; author TWikiContributor; state Exp; branches; next 1.5; 1.5 date 2006.06.25.16.26.31; author TWikiContributor; state Exp; branches; next 1.4; 1.4 date 2006.04.01.05.55.30; author TWikiContributor; state Exp; branches; next 1.3; 1.3 date 2006.02.01.12.01.22; author TWikiContributor; state Exp; branches; next 1.2; 1.2 date 2004.08.17.04.47.12; author PeterThoeny; state Exp; branches; next 1.1; 1.1 date 2004.08.16.05.37.07; author ArthurClemens; state Exp; branches; next ; desc @none @ 1.6 log @buildrelease @ text @%META:TOPICINFO{author="TWikiContributor" date="1141775863" format="1.1" version="6"}% ---+!! CSS elements in !PatternSkin This page is a reference for all CSS classes used in PatternSkin. %TOC{title="Page contents:"}% !PatternSkin uses 4 stylesheets: * [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/layout.css][layout.css]]: positioning of block elements on the page * [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/style.css][style.css]]: margins, paddings, borders, font sizes * [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/colors.css][colors.css]]: text colors, background colors, border colors * [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/print.css][print.css]]: optimalizations for printed page If you want to learn how to create your own look or skin based on !PatternSkin, read further in PatternSkin. ---++ Naming conventions * All !PatternSkin specific classes have the prefix =pattern=: patternEditPage, patternTopicAction, etcetera. * TWiki specific classes (emitted by the TWiki engine) have the prefix =twiki=: twikiButton, twikiToc, etcetera. See for a complete list TWikiCss. * Positional containers are referred by id, for instance =#patternLeftBar=. ---++ Namespaces !PatternSkin uses namespaces for templates, by adding one (sometimes two - multiple) class names to the template's body tag. * 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=. * 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">=. ---+++ Page type classes * .patternViewPage * .patternViewPage .patternPrintPage * .patternNoViewPage * .patternNoViewPage .patternEditPage * .patternNoViewPage .patternAttachPage * .patternNoViewPage .patternChangeFormPage * .patternNoViewPage .patternDiffPage * .patternNoViewPage .patternRenamePage * .patternSearchResultsPage * .patternPlainPage (=viewplain.pattern.tmpl=) ---++ Layout classes * Main layout elements (in order of appearance in =body.pattern.tmpl=) * #patternScreen - outer container, used when centering the page (see PatternSkinCssCookbookCenterPage) * #patternPageShadow - shadow border around patternPage; default not used (see PatternSkinCssCookbookCenterPageBorder) * #patternPage - html content container * Left bar: * #patternWrapper * #patternLeftBar - left bar area * #patternLeftBarContents - used for left menu * #patternOuter - wrapper container * #patternFloatWrap - wrapper container * #patternMain - center area * #patternMainContents - holder of patternTop, patternTopic, twikiForm, twikiAttachments, etc. * #patternTopBar - top bar area * #patternTopBarContents - header art / logo; contains topic %TWIKIWEB%.WebTopBar * #patternBottomBar - bottom bar area * #patternBottomBarContents - copyright ---++ Style classes * View * .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) * .patternTopBarLogo - logo position in patternTopBar (topic %TWIKIWEB%.WebTopBar) * .patternTopBarOverlay - striped white image background * .patternTopic - TWiki topic text * .patternTop - area at top of topic text, with patternHomePath, revision and action buttons * .patternTopicActions - container for multiple .patternTopicAction rows * .patternTopicAction - container for .patternActionButtons * .patternActionButtons - action buttons at bottom of page * .patternMoved - topic moved info (only visible when the topic has changed name or web) * .patternWebIndicator - colored block at the top of the left bar to indicate the current web * .patternFormHolder - container around form to manage the size of form elements * .patternLeftBarPersonal - block of personal links (included topic %MAINWEB%.%USERNAME%LeftBar) * .patternHomePath - breadcrumb at top * .patternHomePathTitle - "You are here" text * .patternRevInfo - revision info and author name * .patternToolBar - holder for .patternToolBarButtons * .patternToolBarButtons - action buttons at top of page * .patternToolBarBottom - seperator * .patternSimpleLogo - logo used on 'simple' pages like the login screen * .patternButton - tab button Edit, Attach, Printable at top of topic * .patternMetaMenu - search box, jump box, language selector * Edit * .patternSig - signature copy box * .patternSaveOptions - holder for .patternSaveOptionsContents * .patternSaveOptionsContents - checkboxes that change the state of a topic save; for instance "Force revision" checkbox * .patternSaveHelp - info block with help on save options (access keys and potentially other info) * Preview page * .patternPreviewArea - container around preview of .patternTopic * Attach page * .patternPrevious - attachment table of previous versions * .patternMoveAttachment - container for "Move or Delete attachment" * .patternAttachForm * Rename (rename, move, delete) * patternRenameOptionsList - list of topics that can be updated * More * patternDiffOptions - row of revision options under "Compare revisions" * Search results * .patternSearchResults - container on rename pages (no longer used on actual search results 'view' pages) * .patternSearchResultsHeader - horizontal bar with the web color * .patternSearchResults - block of one result * .patternSearchResultCount - the number of results * .patternSearched - feedback on the string used to search * %TWIKIWEB%.WebLeftBarSearch * .patternFormButton * .patternChangeLanguage - change language button (deprecated) __Related Topics:__ TWikiSkins, AdminDocumentationCategory %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"}% @ 1.5 log @buildrelease @ text @d1 1 a1 1 %META:TOPICINFO{author="TWikiContributor" date="1141775863" format="1.1" version="5"}% d27 1 a27 1 * 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 in one sweep (smaller or wider margins for instance). Template edit.pattern.tmpl uses =<body class="patternNoViewPage patternEditPage">=. @ 1.4 log @buildrelease @ text @d1 1 a1 1 %META:TOPICINFO{author="TWikiContributor" date="1141775863" format="1.1" version="4"}% d69 1 d90 1 a90 1 * .patternAccessKeyInfo - info block with access key information @ 1.3 log @buildrelease @ text @d1 1 a1 1 %META:TOPICINFO{author="TWikiContributor" date="1111929255" format="1.0" version="3"}% d9 5 a13 5 * [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/layout.css][layout.css]]: positioning of block elements on the page * [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/style.css][style.css]]: margins, paddings, borders, font sizes * [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/colors.css][colors.css]]: text colors, background colors, border colors * [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/print.css][print.css]]: optimalizations for printed page d18 3 a20 2 * All !PatternSkin specific classes have the prefix =pattern=: patternEditPage, patternTopicAction, etcetera. * TWiki specific classes (emitted by the TWiki engine) have the prefix =twiki=: twikiButton, twikiToc, etcetera. See for a complete list TWikiCss. d26 2 a27 2 * 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=. * 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 in one sweep (smaller or wider margins for instance). Template edit.pattern.tmpl uses =<body class="patternNoViewPage patternEditPage">=. d31 10 a40 10 * .patternViewPage * .patternViewPage .patternPrintPage * .patternNoViewPage * .patternNoViewPage .patternEditPage * .patternNoViewPage .patternAttachPage * .patternNoViewPage .patternChangeFormPage * .patternNoViewPage .patternDiffPage * .patternNoViewPage .patternRenamePage * .patternSearchResultsPage * .patternPlainPage (view.plain.pattern.tmpl) d44 16 a59 12 * Main layout elements * #patternScreen - holder of patternPageShadow and patternBottomBar * #patternPageShadow - shadow border around patternPage; default not used * #patternPage - html content container * #patternColumnWrapper - holder for patternMain and patternLeftbar * #patternMain - holder of patternMainContents * #patternTopBar - top bar area * .patternTopBarContents - table (for easy vertical alignment) for header art / logo; contains topic %TWIKIWEB%.WebTopBar * #patternLeftBar - left bar area * .patternLeftBarContents - used for left menu * #patternBottomBar - bottom bar area * .patternBottomBarContents - copyright d63 53 a115 61 * View * .patternMainContents - holder of patternTop, patternTopic, twikiForm, twikiAttachments, etc. * .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) * .patternTopBarLogo - logo position in patternTopBar (topic %TWIKIWEB%.WebTopBar) * .patternTopBarOverlay - striped white image background * .patternTopic - TWiki topic text * .patternTop - area at top of topic text, with patternHomePath, revision and action buttons * .patternTopicAction - container for .patternActionButtons * .patternActionButtons - action buttons at bottom of page * .patternMoved - topic moved info (only visible when the topic has changed name or web) * .patternWebIndicator - not used * .patternFormHolder - container around form to manage the size of form elements * .patternLeftBarPersonal - block of personal links (included topic %MAINWEB%.%USERNAME%LeftBar) * .patternVersatileTable - table used in various places (Attach, Rename, Changeform) * .patternVersatileTable .patternMainCol - table column that is the most important part of the table * .patternVersatileTable .patternOldCol - table column with 'old' appearance, for instance the old attachment or the old topic name * .patternVersatileTable .patternHelpCol - table column with help texts * .patternHomePath - breadcrumb at top * .patternHomePathTitle - "You are here" text * .patternRevInfo - revision info and author name * .patternToolBar - holder for .patternToolBarButtons * .patternToolBarButtons - action buttons at top of page * .patternToolBarBottom - seperator * .patternSimpleLogo - logo used on 'simple' pages like the login screen * .patternFormFieldVerticalForm - input field in vertically formatted form * Edit * .patternSig - signature copy box * .patternSaveOptions - holder for .patternSaveOptionsContents * .patternSaveOptionsContents - checkboxes that change the state of a topic save; for instance "Force revision" checkbox * .patternAccessKeyInfo - info block with access key information * Preview page * .patternPreviewArea - container around preview of .patternTopic * Attach page * .patternPrevious - attachment table of previous versions * .patternMoveAttachment - container for "Move or Delete attachment" * Rename (rename, move, delete) * patternRenameOptionsList - list of topics that can be updated * More * patternDiffOptions - row of revision options under "Compare revisions" * Search results * .patternSearchResultsHeader * .patternSearchString * .patternSearchResults * .patternSearchResultCount * .patternSearchResultsBegin - for changes template with noheader="on" * .patternBookViewList * Print * .patternTopicFooter - revision and author info at bottom of printed topic * %TWIKIWEB%.WebLeftBarSearch * .patternFormSpacer - for layout purposes * .patternFormField * .patternFormButton * .patternChangeLanguage - change language button d117 1 a117 3 ---++ Layout per template ---+++ View template a118 3 CSS layout in View template __Related Topics:__ TWikiSkins, AdminDocumentationCategory @ 1.2 log @none @ text @d1 2 a2 2 %META:TOPICINFO{author="PeterThoeny" date="1092718032" format="1.0" version="1.2"}% ---+!! Css elements in !PatternSkin d8 6 a13 4 The !PatternSkin stylesheet is divided in two files: * [[%PUBURL%/%TWIKIWEB%/PatternSkin/layout.css][layout.css]]: positioning of block elements on the page * [[%PUBURL%/%TWIKIWEB%/PatternSkin/style.css][style.css]]: appearance of blocks and all other page elements d18 2 a19 1 !PatternSkin follows the naming conventions used in TWiki core code: all TWiki class names have the prefix =twiki=: twikiEditPage, twikiTopicAction, etcetera. ID names are not used, only class names, to allow multipe class names. See also: TWikiCss. d25 2 a26 2 * The body tag in view.pattern.tmpl for instance has the class name "twikiViewPage": =<body class="twikiViewPage">=. All CSS elements specific to the view template thus can be defined as =.twikiViewPage .someClassName=. * All templates that are _not_ the view template have the body class name "twikiNoViewPage". That makes it easy to give all of these pages a different layout in one sweep (smaller or wider margins for instance). Template edit.pattern.tmpl uses =<body class="twikiNoViewPage twikiEditPage">=. d28 1 a28 1 ---+++ body class names d30 10 a39 9 * .twikiViewPage * .twikiViewPage .twikiPrintPage * .twikiNoViewPage * .twikiNoViewPage .twikiEditPage * .twikiNoViewPage .twikiAttachPage * .twikiNoViewPage .twikiChangeFormPage * .twikiNoViewPage .twikiDiffPage * .twikiNoViewPage .twikiRenamePage * .twikiSearchResultsPage d43 12 a54 18 * General * .twikiLeft - a left floating element * .twikiRight - a right floating element * .twikiClear - to clean up either of these floats: put immediately after the containing block * .twikiHidden - hidden element * TWiki block elements * .twikiMiddleContainer - holder for twikiMain and twikiLeftbar * .twikiLeftBar - left bar area * .twikiLeftBarContents - used for left menu * .twikiMain - holder of twikiToolbar, twikiTopic, twikiAttachments, etc. * .twikiTopBar - top bar area * .twikiBottomBar - bottom bar area * Layout adjustments on specific pages * .twikiNoViewPage .twikiMain * .twikiPrintPage .twikiMain * .twikiPrintPage .twikiBottomBar a56 71 * .twikiMiddleContainer - holder for twikiMain and twikiLeftbar * .twikiMain - holder of twikiToolbar, twikiTopic, twikiAttachments, etc) * .twikiTopBar - top bar area * .twikiTopBarContents - logo, go box * .twikiLeftBar - left bar area * .twikiWebIndicator - shows current Web name; background of color %WEBBGCOLOR% * .twikiLeftBarContents - used for left menu (a bullet list) * .twikiLeftBarPersonal - block of personal links (included topic %MAINWEB%.%USERNAME%LeftBar) * .twikiBottomBar - bottom bar area * .twikiBottomBarContents - copyright * .twikiTopic * .twikiAttachments - attachment table; used in template attachtables.tmpl * .twikiForm - !WebForm table; used in template attachtables.tmpl * .twikiTopicAction - actions buttons at bottom of page; holder of table with buttons * .twikiTopicActionSecondary - second layer above twikiTopicAction (for instance in Preview) * .twikiTopicActionHelp - help text row * .twikiCancelCol - table columns (td) for cancel button * .twikiSubmitCol - table columns (td) for submit button * .twikiAddCol - table columns (td) for additional button/link (for instance: "Move attachment") * .twikiSeparator - separator character * .twikiToc - topic contents (%TOC%) * .twikiTocTitle - title of TOC (%TOC{title="Contents:"}%) * .twikiTopicInfo - revision (%REVINFO%) and moved (%META{"moved"}%) info * .twikiRevInfo - revision info (top and bottom of page) * .twikiTopicFooter - used for breadcrumb (twikiHomePath) * .twikiHomePath - breadcrumb * .twikiToolBar - action buttons at top of topic (a bullet list), revision info * .twikiPageNav - links "end of topic" and "to top" * .twikiSearchBox - go box and current page in top bar * .twikiHelp - help text * .twikiBroadcastMessage - BROADCASTMESSAGE * .twikiAlert - red * .twikiGrayText - grayed out text, literally gray * .twikiSmall - styled "small" * .twikiNewLink - style of links to yet non-existent pages (not used) * Table class names (emitted from TWiki.TablePlugin) * .twikiSortedAscendingCol - sortable table column header that is sorted ascending (uses TWiki.TablePlugin) * .twikiSortedDescendingCol - ditto sorted descending * .twikiFirstCol * Other table class names * .twikiVersatileTable - table used in various places (Attach, Rename, Changeform) * .twikiVersatileTable .twikiMainCol - table column that is the most important part of the table * .twikiVersatileTable .twikiOldCol - table column with 'old' appearance, for instance the old attachment or the old topic name * .twikiVersatileTable .twikiHelpCol - table column with help texts * Search * .twikiNew - emitted from Search.pm and Changes.pm with the text NEW * .twikiSummary - summary text with search results * .twikiSearchResults - the big block of all results * .twikiSearchResultsHeader - top of block, styled with %WEBBGCOLOR% * .twikiSearchResults .twikiTopRow - top of one result, with link, author, revision * .twikiSearchResults .twikiBottomRow - result summary * .twikiSearchResults .twikiAlert - used with "locked" text * .twikiSearchResultCount - result count * .twikiBookViewList - the big block of all results with book view option * Form elements * .twikiCheckbox - styled checkbox * .twikiRadioButton * .twikiSubmit - submit button (in twikiTopicAction this is the darkest button; in twikiTopic it has a lighter color) * .twikiButton - general button (in Rename/Delete: clear/select all checkboxes) * .twikiSecondary - button next to submit button (same appearance as twikiButton) * .twikiTertiary - button at far right (blue color) * .twikiCancel - cancel button * .twikiEditPage .twikiFormHolder - constrains the width of the textarea * .twikiChangeFormButton - emitted from Form.pm, button to change the !WebForm - styled as link * .twikiEditForm - emitted from Form.pm, editable !WebForm table * .twikiEditFormTextField - emitted from Form.pm, input textfield in twikiEditForm * .twikiSig - signature copy field d58 38 a95 19 * Preview * .twikiPreviewPage .twikiPreviewArea - holder of previewed topic text * Attach * .twikiAttachPage .twikiNotes - holder of help text * .twikiAttachPage .twikiPrevious - attachment table of previous versions * Diff * .twikiDiffPage .twikiDiffTable - block of revisions; emitted from RDiff.pm (also all diff classes below) * .twikiDiffPage .twikiDiffDeletedHeader * .twikiDiffPage .twikiDiffDeletedMarker * .twikiDiffPage .twikiDiffDeletedText * .twikiDiffPage .twikiDiffAddedHeader * .twikiDiffPage .twikiDiffAddedMarker * .twikiDiffPage .twikiDiffAddedText * .twikiDiffPage th.twikiDiffChangedHeader * .twikiDiffPage .twikiDiffChangedText * .twikiDiffPage .twikiDiffUnchangedText * .twikiDiffPage .twikiDiffLineNumberHeader d97 2 a98 1 ---++ CSS tags emitted from TWiki core code d100 19 a118 1 See: TWikiCss d124 1 a124 1 CSS layout in View template d126 1 a126 1 -- TWiki:Main.ArthurClemens - 08 Aug 2004 d128 1 a128 1 %META:FILEATTACHMENT{name="CSS_element_layout_view.pattern.tmpl.png" attr="h" comment="" date="1092634624" path="CSS_element_layout_view.pattern.tmpl.png" size="48981" user="ArthurClemens" version="1.1"}% @ 1.1 log @none @ text @d1 1 a1 1 %META:TOPICINFO{author="ArthurClemens" date="1092634627" format="1.0" version="1.1"}% d161 1 a161 1 -- Main.ArthurClemens - 08 Aug 2004 d163 1 a163 1 %META:FILEATTACHMENT{name="CSS_element_layout_view.pattern.tmpl.png" attr="" comment="" date="1092634624" path="CSS_element_layout_view.pattern.tmpl.png" size="48981" user="ArthurClemens" version="1.1"}% @