steve
/
wiki-archive
mirror of https://github.com/tdwg/wiki-archive.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
wiki-archive/twiki/data/TWiki/PatternSkinCss.txt,v

508 lines
21 KiB
Plaintext
Raw Normal View History

Archive entire twiki setup from owl as of today
2016-02-24 10:46:01 +00:00
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 %<nop>MAINWEB%.%<nop>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 =&lt;body class="patternNoViewPage patternEditPage"&gt;=.
@
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": =&lt;body class="patternViewPage"&gt;=. 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 =&lt;body class="patternNoViewPage patternEditPage"&gt;=.
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 %<nop>MAINWEB%.%<nop>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
<img src="%ATTACHURLPATH%/CSS_element_layout_view.pattern.tmpl.png" alt="CSS layout in View template" style="border:1px solid #ddd;" width="586" height="746" />
__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": =&lt;body class="twikiViewPage"&gt;=. 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 =&lt;body class="twikiNoViewPage twikiEditPage"&gt;=.
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 %<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
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
<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" />
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"}%
@