1 rizwank 1.1 %META:TOPICINFO{author="ArthurClemens" date="1093733957" format="1.0" version="1.3"}%
2 ---+!! Customization of !PatternSkin
3
4 This page describes ways to change the layout, fonts and colors of PatternSkin.
5
6 %TOC{title="Page contents:"}%
7
8 ---++ Your own TWiki look
9
10 You can easily create your own TWiki look by attaching modified css files to your home page:
11 * If you want to change the layout of the page, download layout.css from TWiki.PatternSkin
12 * If you want to change the spacing or colors, download style.css from TWiki.PatternSkin
13 * modify the CSS in either style sheet, using tips from this page
14 * [[%SCRIPTURL%/attach%SCRIPTSUFFIX%/%MAINWEB%/%WIKINAME% attach]] your modified !layout.css and/or !style.css to your home page
15 * as shown below, add the =USERLAYOUTURL= and =USERSTYLEURL= settings to [[%MAINWEB%.%WIKINAME%][your home page]]
16 <verbatim>
17 * Personal TWiki.PatternSkin CSS settings
18 * Set USERLAYOUTURL = %PUBURL%/%MAINWEB%/%WIKINAME%/layout.css
19 * Set USERSTYLEURL = %PUBURL%/%MAINWEB%/%WIKINAME%/style.css
20 </verbatim>
21
22 rizwank 1.1 ---++ Screen parts
23
24 The !PatternSkin view template uses four screen parts:
25 * The topic part - contains besides the topic content: action buttons, form table, attachment table, topic info
26 * Top bar - used for a logo, contains Go box
27 * Left bar - site and web navigation, contains a personal link block; may contain a Go box
28 * Bottom bar - copyright, disclaimer
29
30 These parts are dynamically included topics:
31 * Top bar: TWiki.WebTopBar
32 * Left bar: included topic WebLeftBar (one !WebLeftBar topic per web)
33 * Personal links block: %MAINWEB%.%<nop>USERNAME%LeftBar. Your own personal leftbar: %MAINWEB%.%USERNAME%LeftBar
34 * Bottom bar: included topic TWiki.WebBottomBar
35
36 ---+++ Top bar
37
38 The top bar is mainly used as branding space. To change the screen room for the logo, see below, [[%TOPIC%#Customizing_the_logo][Customizing the logo]].
39
40 ---+++ Left bar
41
42 The menu items are css-formatted bullet lists. So in WebLeftBar you write:
43 rizwank 1.1 <verbatim>
44 * *Group*
45 * [[SomeTopic][Link 1]]
46 * [[AnotherTopic][Link 2]]
47 * [[ThirdTopic][Link 3]]
48 </verbatim>
49
50 The left bar may contain a Go box instead of the top bar. Use:
51 <verbatim>
52 * <input type="text" name="topic" size="16" />
53 </verbatim>
54
55 The personal left bar block is formatted like the rest of the left bar.
56
57 ---++++ Putting the left bar at the right
58
59 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:
60
61 <blockquote>
62 Add this to layout.css:
63 <!-- /* -->
64 rizwank 1.1 <verbatim>
65 .twikiMain {
66 margin-left:0px;
67 }
68 .twikiLeftBar {
69 margin-left:100%;
70 }
71 .twikiBottomBar {
72 margin-left:1em;
73 margin-right:0;
74 padding:0;
75 }
76 </verbatim>
77 <!-- */ -->
78 Add this to style.css:
79 <!-- /* -->
80 <verbatim>
81 .twikiMain {
82 padding-left:1em;
83 padding-right:1em;
84 }
85 rizwank 1.1 .twikiBottomBarContents {
86 padding-left:0em;
87 }
88 </verbatim>
89 <!-- */ -->
90 </blockquote>
91
92 This CSS is also attached to this topic, [[%ATTACHURL%/LowRes.css][LowRes.css]]. To use this style, add this to your home page:
93 <verbatim>
94 * Personal TWiki.PatternSkin CSS settings
95 * Set USERLAYOUTURL = %PUBURL%/%SYSTEMWEB%/PatternSkinCustomization/LowRes.css
96 </verbatim>
97
98 ---+++ Bottom bar
99
100 The bottom bar contains the copyright disclaimer, but may contain other information, perhaps a web list.
101
102 ---++ Customizing the logo
103
104 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 =style.css= (.twikiTopBarContents) or change the top bar height in =layout.css= (look for the comment _setting the height of the top bar_).
105
106 rizwank 1.1 You can also choose to set a background image for the top bar. In =style.css=, add this to .twikiTopBar:
107 <verbatim>
108 background-position:top left;
109 background-attachment:fixed;
110 background-repeat:no-repeat;
111 background-image:url(http://absolute_path_to_your_image);
112 </verbatim>
113 and set the correct image file path.
114
115 ---++ Fonts
116
117 ---+++ Font style
118
119 Font styles are defined in =style.css= in these places:
120 <!--
121 /*
122 -->
123 <verbatim>
124 html body {
125 font-family:"Lucida Grande", verdana, lucida, helvetica, sans-serif;
126 }
127 rizwank 1.1 h1, h2, h3, h4, h5, h6 {
128 font-family:"Lucida Grande", helvetica, lucida, verdana, sans-serif;
129 }
130 textarea {
131 font-family:monospace;
132 }
133 input, select {
134 font-family:verdana,arial,sans-serif;
135 }
136 .twikiSeparator {
137 font-family:Arial,sans-serif;
138 }
139 .twikiEditPage .twikiSig input {
140 font-family:monospace;
141 }
142 </verbatim>
143 <!--
144 */
145 -->
146
147 ---+++ Font size
148 rizwank 1.1
149 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).
150
151 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:
152 <!-- /* -->
153 <verbatim>
154 html body {
155 ... (keep)
156 }
157 html>body {
158 ... (keep)
159 }
160 html body {
161 font-size:11px;
162 }
163 </verbatim>
164 <!-- */ -->
165
166 ---++ Colors
167
168 <span style="background:#000000" > </span><span style="background:#041d3a" > </span><span style="background:#05264d" > </span><span style="background:#333333" > </span><span style="background:#334455" > </span><span style="background:#880000" > </span><span style="background:#990000" > </span><span style="background:#844f0c" > </span><span style="background:#22638c" > </span><span style="background:#666666" > </span><span style="background:#3db234" > </span><span style="background:#1559b3" > </span><span style="background:#1e5bbd" > </span><span style="background:#808080" > </span><span style="background:#888888" > </span><span style="background:#e24628" > </span><span style="background:#698fa8" > </span><span style="background:#9e9e70" > </span><span style="background:#888e9c" > </span><span style="background:#8490a1" > </span><span style="background:#ff0000" > </span><span style="background:#ff3000" > </span><span style="background:#98a2b0" > </span><span style="background:#aaaaaa" > </span><span style="background:#bbbbbb" > </span><span style="background:#a3bcf1" > </span><span style="background:#cccccc" > </span><span style="background:#ffff00" > </span><span style="background:#b9d6fa" > </span><span style="background:#dadada" > </span><span style="background:#b4d5ff" > </span><span style="background:#dddddd" > </span><span style="background:#e9e9e9" > </span><span style="background:#e0e9f7" > </span><span style="background:#efedea" > </span><span style="background:#f3ede7" > </span><span style="background:#dfedfd" > </span><span style="background:#eeeeee" > </span><span style="background:#ebf7ea" > </span><span style="background:#efefef" > </span><span style="background:#ffeae5" > </span><span style="background:#e8f1f9" > </span><span style="background:#f1f1f1" > </span><span style="background:#f2f2f2" > </span><span style="background:#f8f8f8" > </span><span style="background:#f5f7fd" > </span><span style="background:#fcfaf7" > </span><span style="background:#ffffff" > </span>
169 rizwank 1.1
170 To create a customised palette of colors, see PatternSkinPalette.
171
172 ---++ Tables
173
174 ---+++ Tables in topic text
175
176 If you have TablePlugin installed, tables in topics take on the properties from =TABLEATTRIBUTES=. 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.
177
178 ---++++ Topic text table example
179
180 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= code in style.css:
181 <!-- /* -->
182 <verbatim>
183 .twikiTopic table {
184 border-collapse:collapse;
185 padding:0px;
186 border-spacing:0px;
187 empty-cells:show;
188 border:0px;
189 }
190 rizwank 1.1 .twikiTopic table th {
191 background-color:#ccc;
192 padding:0.5em 1em;
193 }
194 .twikiTopic table td {
195 border:1px solid #eee;
196 }
197 /* override hardcoded font color */
198 .twikiTopic table font {
199 color:#1e5bbd;
200 }
201 .twikiTopic table th a:link,
202 .twikiTopic table th a:visited {
203 color:#1e5bbd;
204 text-decoration:none;
205 }
206 /* don't show hover background color because we have a table header background */
207 .twikiTopic table th a:hover {
208 background-color:transparent;
209 text-decoration:underline;
210 border-width:1px;
211 rizwank 1.1 }
212 /* no underline if a sort indicator (line) is displayed */
213 .twikiTopic table th.twikiSortedDescendingCol a:hover,
214 .twikiTopic table th.twikiSortedAscendingCol a:hover {
215 text-decoration:none;
216 }
217 /* hide sort icons */
218 .twikiTopic table th img,
219 .twikiTopic table th a:link img,
220 .twikiTopic table th a:visited img {
221 display:none;
222 }
223 </verbatim>
224 <!-- */ -->
225
226 ---+++ Attachment table, Form table
227
228 The 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 {=:
229
230 <!-- /* -->
231 <verbatim>
232 rizwank 1.1 white-space:nowrap;
233 </verbatim>
234 <!-- */ -->
235
236 ---+++ Other templates
237
238 Other templates than =view= 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.
239
240 -- TWiki:Main.ArthurClemens - 28 Aug 2004
241
242 %META:FILEATTACHMENT{name="LowRes.css" attr="" comment="CSS to put the left bar at the right, with horizontal scroll bar" date="1093734017" path="LowRes.css" size="287" user="ArthurClemens" version="1.1"}%
|
Return to
PatternSkinCustomization.txt
CVS log
Up to [RizwankCVS] / geekymedia_web / twiki / data / TWiki