r3 - 28 Aug 2004 - 22:59 - Main.ArthurClemens | r2 - 17 Aug 2004 - 04:44 - Main.PeterThoeny | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Customization of PatternSkin |
Customization of PatternSkin |
||||||||||||||||
This page describes ways to change the layout, fonts and colors of PatternSkin. |
This page describes ways to change the layout, fonts and colors of PatternSkin. |
||||||||||||||||
Page contents: |
|||||||||||||||||
Your own TWiki look |
|||||||||||||||||
You 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 parts |
Screen parts |
||||||||||||||||
The PatternSkin view template uses four screen parts: |
The PatternSkin view template uses four screen parts: |
||||||||||||||||
|
|
||||||||||||||||
These parts are dynamically included topics: |
These parts are dynamically included topics: |
||||||||||||||||
|
|
||||||||||||||||
Top bar |
Top bar |
||||||||||||||||
The top bar is mainly used as branding space. To change the screen room for the logo, see below, Customizing the logo. |
The top bar is mainly used as branding space. To change the screen room for the logo, see below, Customizing the logo. |
||||||||||||||||
Left bar |
Left bar |
||||||||||||||||
The menu items are css-formatted bullet lists. So in WebLeftBar you write: |
The menu items are css-formatted bullet lists. So in WebLeftBar you write: |
||||||||||||||||
* *Group* * [[SomeTopic][Link 1]] * [[AnotherTopic][Link 2]] * [[ThirdTopic][Link 3]] |
* *Group* * [[SomeTopic][Link 1]] * [[AnotherTopic][Link 2]] * [[ThirdTopic][Link 3]] |
||||||||||||||||
The left bar may contain a Go box instead of the top bar. Use: |
The left bar may contain a Go box instead of the top bar. Use: |
||||||||||||||||
* <input type="text" name="topic" size="16" /> |
* <input type="text" name="topic" size="16" /> |
||||||||||||||||
The personal left bar block is formatted like the rest of the left bar. |
The personal left bar block is formatted like the rest of the left bar. |
||||||||||||||||
Putting the left bar at the right |
|||||||||||||||||
If 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:.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; } |
|||||||||||||||||
This CSS is also attached to this topic, LowRes.css. To use this style, add this to your home page: |
|||||||||||||||||
* Personal TWiki.PatternSkin CSS settings * Set USERLAYOUTURL = %PUBURL%/%SYSTEMWEB%/PatternSkinCustomization/LowRes.css |
|||||||||||||||||
Bottom bar |
Bottom bar |
||||||||||||||||
The bottom bar contains the copyright disclaimer, but may contain other information, perhaps a web list. |
The bottom bar contains the copyright disclaimer, but may contain other information, perhaps a web list. |
||||||||||||||||
Customizing the logo |
Customizing the logo |
||||||||||||||||
The top bar is 60 pixels high, and has a padding of 5 pixels on top, bottom and left, so the logo should be 50 pixels high. If your logo image has a different size, you can either alter the padding in |
The top bar is 60 pixels high, and has a padding of 5 pixels on top, bottom and left, so the logo should be 50 pixels high. If your logo image has a different size, you can either alter the padding in |
||||||||||||||||
You can also choose to set a background image for the top bar. In |
You can also choose to set a background image for the top bar. In |
||||||||||||||||
background-position:top left; background-attachment:fixed; background-repeat:no-repeat; background-image:url(http://absolute_path_to_your_image); |
background-position:top left; background-attachment:fixed; background-repeat:no-repeat; background-image:url(http://absolute_path_to_your_image); |
||||||||||||||||
and set the correct image file path. |
and set the correct image file path. |
||||||||||||||||
Fonts |
Fonts |
||||||||||||||||
Font style |
Font style |
||||||||||||||||
Font styles are defined in |
Font styles are defined in |
||||||||||||||||
html body { font-family:"Lucida Grande", verdana, lucida, helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { font-family:"Lucida Grande", helvetica, lucida, verdana, sans-serif; } textarea { font-family:monospace; } input, select { font-family:verdana,arial,sans-serif; } .twikiSeparator { font-family:Arial,sans-serif; } .twikiEditPage .twikiSig input { font-family:monospace; } |
html body { font-family:"Lucida Grande", verdana, lucida, helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { font-family:"Lucida Grande", helvetica, lucida, verdana, sans-serif; } textarea { font-family:monospace; } input, select { font-family:verdana,arial,sans-serif; } .twikiSeparator { font-family:Arial,sans-serif; } .twikiEditPage .twikiSig input { font-family:monospace; } |
||||||||||||||||
Font size |
Font size |
||||||||||||||||
Font sizes in PatternSkin are scalable. This means that even on Windows Explorer, the text in the browser can scale with the user settings (in contrast to many sites where texts have a fixes pixel size, these cannot be changed by the user). |
Font sizes in PatternSkin are scalable. This means that even on Windows Explorer, the text in the browser can scale with the user settings (in contrast to many sites where texts have a fixes pixel size, these cannot be changed by the user). |
||||||||||||||||
Scalable text is a big accessibility asset. If you notwithstanding want to have a fixed font, or if you want to set the default size smaller or bigger, the easiest way is to make a new entry for body, below the 2 other entries: |
Scalable text is a big accessibility asset. If you notwithstanding want to have a fixed font, or if you want to set the default size smaller or bigger, the easiest way is to make a new entry for body, below the 2 other entries: |
||||||||||||||||
html body { ... (keep) } html>body { ... (keep) } html body { font-size:11px; } |
html body { ... (keep) } html>body { ... (keep) } html body { font-size:11px; } |
||||||||||||||||
Colors |
-- TWiki:Main.ArthurClemens - 15 Aug 2004 |
||||||||||||||||
|
|||||||||||||||||
To create a customised palette of colors, see PatternSkinPalette? . |
|||||||||||||||||
Tables |
|||||||||||||||||
Tables in topic text |
|||||||||||||||||
If you have TablePlugin installed, tables in topics take on the properties from |
|||||||||||||||||
Topic text table example |
|||||||||||||||||
This 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 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 table |
|||||||||||||||||
The appearance of the form table and the attachment table are set in style.css under |
|||||||||||||||||
white-space:nowrap; |
|||||||||||||||||
Other templates |
|||||||||||||||||
Other templates than |
|||||||||||||||||
-- TWiki:Main.ArthurClemens - 28 Aug 2004 |
|||||||||||||||||
|
|||||||||||||||||
r3 - 28 Aug 2004 - 22:59 - ArthurClemens? | r2 - 17 Aug 2004 - 04:44 - PeterThoeny? | ||||||||||||||||
Topic PatternSkinCustomization . { View | History | Interweave | r6 < r5 < r4 < r3 < r2 | More } |
Revision r3 - 28 Aug 2004 - 22:59 - ArthurClemens? Revision r2 - 17 Aug 2004 - 04:44 - PeterThoeny? |
This site is powered by the TWiki collaboration platform. All material on this collaboration platform is the property of the contributing authors. All material marked as authored by Eben Moglen is available under the license terms CC-BY-SA version 4. |