Skip to content.
Uni-Orchester
Themen
Willkommen
Mitspielen?
Orchester
Konzert
Projekte
Probenplan
Förderverein
Orchesterforum (intern)
Registrieren Forum
Hilfe
Kontakt
Datenschutz
Werkzeuge
Recent changes
Topic list
Verbose topic list
Access statistics
Notify me of changes
Web preferences
TWiki
>
PatternSkinCss
More...
Printable version
Attach a file
Edit this page
Refresh
---+!! Css elements in !PatternSkin This page is a reference for all CSS classes used in PatternSkin. %TOC{title="Page contents:"}% 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 If you want to learn how to create your own look or skin based on !PatternSkin, read further in PatternSkin. ---++ Naming conventions !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. ---++ 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 "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">=. ---+++ body class names * .twikiViewPage * .twikiViewPage .twikiPrintPage * .twikiNoViewPage * .twikiNoViewPage .twikiEditPage * .twikiNoViewPage .twikiAttachPage * .twikiNoViewPage .twikiChangeFormPage * .twikiNoViewPage .twikiDiffPage * .twikiNoViewPage .twikiRenamePage * .twikiSearchResultsPage ---++ Layout classes * 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 ---++ Style classes * .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 %<nop>WEBBGCOLOR% * .twikiLeftBarContents - used for left menu (a bullet list) * .twikiLeftBarPersonal - block of personal links (included topic %<nop>MAINWEB%.%<nop>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 (%<nop>TOC%) * .twikiTocTitle - title of TOC (%<nop>TOC{title="Contents:"}%) * .twikiTopicInfo - revision (%<nop>REVINFO%) and moved (%<nop>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 %<nop>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 * 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 ---++ CSS tags emitted from TWiki core code See: TWikiCss ---++ Layout per template ---+++ View template <img src="%ATTACHURLPATH%/CSS_element_layout_view.pattern.tmpl.png" alt="CSS layout in View template" style="border:1px solid #ddd;" width="576" height="735" /> -- TWiki:Main.ArthurClemens - 08 Aug 2004
