Customization of PatternSkinThis page describes ways to change the layout, fonts and colors of PatternSkin. TOC: No TOC in "TWiki.PatternSkinCustomization" | ||||||||
Added: | ||||||||
> > |
Your own TWiki lookYou can easily create your own TWiki look by attaching modified css files to your home page:
* Personal TWiki.PatternSkin CSS settings * Set USERLAYOUTURL = %PUBURL%/%MAINWEB%/%WIKINAME%/layout.css * Set USERSTYLEURL = %PUBURL%/%MAINWEB%/%WIKINAME%/style.css | |||||||
Screen partsThe PatternSkin view template uses four screen parts: | ||||||||
Line: 40 to 54 | ||||||||
---|---|---|---|---|---|---|---|---|
The personal left bar block is formatted like the rest of the left bar. | ||||||||
Added: | ||||||||
> > |
Putting the left bar at the rightIf you have a low screen resolution of say, 640 by 480 pixels, it can be useful to put the left bar "out of the way", at the right side of the page - at the cost of a horizontal scroll bar to access the left (now right) bar. This CSS does this:Add this to layout.css: <!-- /* -->This CSS is also attached to this topic, LowRes.css. To use this style, add this to your home page:.twikiMain { margin-left:0px; } .twikiLeftBar { margin-left:100%; } .twikiBottomBar { margin-left:1em; margin-right:0; padding:0; }<!-- */ --> Add this to style.css: <!-- /* -->.twikiMain { padding-left:1em; padding-right:1em; } .twikiBottomBarContents { padding-left:0em; }<!-- */ --> * Personal TWiki.PatternSkin CSS settings * Set USERLAYOUTURL = %PUBURL%/%SYSTEMWEB%/PatternSkinCustomization/LowRes.css | |||||||
Bottom barThe bottom bar contains the copyright disclaimer, but may contain other information, perhaps a web list. | ||||||||
Line: 108 to 163 | ||||||||
<!-- */ --> | ||||||||
Changed: | ||||||||
< < |
-- TWiki:Main.ArthurClemens - 15 Aug 2004 | |||||||
> > |
ColorsTo create a customised palette of colors, see PatternSkinPalette.TablesTables in topic textIf you have TablePlugin installed, tables in topics take on the properties fromTABLEATTRIBUTES . Without TablePlugin (if not installed, or disabled in TWikiPreferences under DISABLEDPLUGINS ), the tables have a default appearance that is hardcoded in Render.pm. Styles of topic text tables are not set in a style sheet. If you want to have control over the design of tables, for instance if you work with a style guide, you should add table styles under .twikiTopic . See for an example below.
Topic text table exampleThis is an example css to give tables in topic text a similar appearance. This will override settings in TablePlugin. This code should be added below the other.twikiTopic code in style.css:
<!-- /* -->
.twikiTopic table { border-collapse:collapse; padding:0px; border-spacing:0px; empty-cells:show; border:0px; } .twikiTopic table th { background-color:#ccc; padding:0.5em 1em; } .twikiTopic table td { border:1px solid #eee; } /* override hardcoded font color */ .twikiTopic table font { color:#1e5bbd; } .twikiTopic table th a:link, .twikiTopic table th a:visited { color:#1e5bbd; text-decoration:none; } /* don't show hover background color because we have a table header background */ .twikiTopic table th a:hover { background-color:transparent; text-decoration:underline; border-width:1px; } /* no underline if a sort indicator (line) is displayed */ .twikiTopic table th.twikiSortedDescendingCol a:hover, .twikiTopic table th.twikiSortedAscendingCol a:hover { text-decoration:none; } /* hide sort icons */ .twikiTopic table th img, .twikiTopic table th a:link img, .twikiTopic table th a:visited img { display:none; }<!-- */ --> Attachment table, Form tableThe appearance of the form table and the attachment table are set in style.css under.twikiForm and .twikiAttachments . Text in these tables is set to wrap, so often the dates are wrapped to two lines. If you prefer to have text on one line and are not disturbed by an extra wide attachment table (or when you screen resolution is big enough), add this code to .twikiAttachments td, .twikiForm td { :
<!-- /* -->
white-space:nowrap;<!-- */ --> Other templatesOther templates thanview use the style .twikiVersatileTable for, as the name says, tables with versatile functions. Versatile tables appear a little diffent in each template page (differences are created using multiple classes). Versatile tables are mostly used to format forms to highlight important parts and to dim less important parts. See style.css for specific settings for each template.
-- TWiki:Main.ArthurClemens - 28 Aug 2004
| |||||||
Added: | ||||||||
> > |
|