Fossil SCM

Updated the customskin doc to cover the new WCAG semantic header/footer tagging, and to give advice on migrating from earlier versions, where custom skinning would have copy-pasted the old way of doing things. Linking to this advice from the changes doc for the benefit of those those paying attention to the change log.

wyoung 2024-02-11 13:23 trunk
Commit b3f449e85bd0e1c54b08e3dd8573bcb8b0092cfa12695c127dee54fa11fe49ad
2 files changed +5 -2 +58 -45
--- www/changes.wiki
+++ www/changes.wiki
@@ -13,13 +13,16 @@
1313
outsiders don't have to guess it from the hash length when
1414
double-checking hashes of downloaded files on their end.
1515
* The hash itself is now shown in a fixed-width font on the /uvlist
1616
page, suiting this tabular display.
1717
* Reworked the default skin to make everything more readable: larger
18
- fonts, more whitespace, added indents to show hierarchy and to
19
- offset command examples, etc. Colors are slightly adjusted to bring
18
+ fonts, more whitespace, deeper indents to show hierarchy and to
19
+ offset command examples, etc. Adjusted colors slightly to bring
2020
things into better accord with the WCAG accessibility guidelines.
21
+ This constitutes a <strong>breaking change</strong> for those with
22
+ custom skins; see [./customskin.md#version-2.24 | this section of
23
+ the docs] for migration advice.
2124
2225
<h2 id='v2_23'>Changes for version 2.23 (2023-11-01)</h2>
2326
2427
* Add ability to "close" forum threads, such that unprivileged users
2528
may no longer respond to them. Only administrators can close
2629
--- www/changes.wiki
+++ www/changes.wiki
@@ -13,13 +13,16 @@
13 outsiders don't have to guess it from the hash length when
14 double-checking hashes of downloaded files on their end.
15 * The hash itself is now shown in a fixed-width font on the /uvlist
16 page, suiting this tabular display.
17 * Reworked the default skin to make everything more readable: larger
18 fonts, more whitespace, added indents to show hierarchy and to
19 offset command examples, etc. Colors are slightly adjusted to bring
20 things into better accord with the WCAG accessibility guidelines.
 
 
 
21
22 <h2 id='v2_23'>Changes for version 2.23 (2023-11-01)</h2>
23
24 * Add ability to "close" forum threads, such that unprivileged users
25 may no longer respond to them. Only administrators can close
26
--- www/changes.wiki
+++ www/changes.wiki
@@ -13,13 +13,16 @@
13 outsiders don't have to guess it from the hash length when
14 double-checking hashes of downloaded files on their end.
15 * The hash itself is now shown in a fixed-width font on the /uvlist
16 page, suiting this tabular display.
17 * Reworked the default skin to make everything more readable: larger
18 fonts, more whitespace, deeper indents to show hierarchy and to
19 offset command examples, etc. Adjusted colors slightly to bring
20 things into better accord with the WCAG accessibility guidelines.
21 This constitutes a <strong>breaking change</strong> for those with
22 custom skins; see [./customskin.md#version-2.24 | this section of
23 the docs] for migration advice.
24
25 <h2 id='v2_23'>Changes for version 2.23 (2023-11-01)</h2>
26
27 * Add ability to "close" forum threads, such that unprivileged users
28 may no longer respond to them. Only administrators can close
29
+58 -45
--- www/customskin.md
+++ www/customskin.md
@@ -58,22 +58,16 @@
5858
# Structure Of A Fossil Web Page
5959
6060
Every HTML page generated by Fossil has the same basic structure:
6161
6262
| Fossil-Generated HTML Header |
63
-| Content Header |
63
+| Skin Header |
6464
| Fossil-Generated Content |
65
-| Content Footer |
65
+| Skin Footer |
6666
| Fossil-Generated HTML Footer |
6767
68
-The green parts are *usually* generated by Fossil. The blue parts
69
-are things that you, the administrator, get to modify in order to
70
-customize the skin.
71
-
72
-Fossil *usually* (but not always - [see below](#override))
73
-generates the initial HTML Header section of a page. The
74
-generated HTML Header will look something like this:
68
+By default, Fossil starts every generated HTML page with this:
7569
7670
<html>
7771
<head>
7872
<base href="...">
7973
<meta http-equiv="Content-Security-Policy" content="....">
@@ -81,52 +75,71 @@
8175
<title>....</title>
8276
<link rel="stylesheet" href="..." type="text/css">
8377
</head>
8478
<body class="FEATURE">
8579
86
-…where `FEATURE` is either the top-level URL element (e.g. `doc`) or a
87
-feature class that groups multiple URLs under a single name such as
88
-`forum` to contain `/forummain`, `/forumpost`, `/forume2`, etc. This
89
-allows per-feature CSS such as
80
+Fossil used to require a static version of this in every skin’s Header
81
+area, but over time, we have found good cause to generate multiple
82
+elements at runtime.
83
+
84
+One such is the `FEATURE` element, being either the top-level HTTP
85
+request routing element (e.g. `doc`) or an aggregate feature class that
86
+groups multiple routes under a single name. A prime example is `forum`,
87
+which groups the `/forummain`, `/forumpost`, and `/forume2` routes,
88
+allowing per-feature CSS. For instance, to style `<blockquote>` tags
89
+specially for forum posts written in Markdown, leaving all other block
90
+quotes alone, you could say:
9091
9192
body.forum div.markdown blockquote {
9293
margin-left: 10px;
9394
}
9495
95
-That is, affect HTML `<blockquote>` tags specially only for forum posts
96
-written in Markdown, leaving all other block quotes alone.
97
-
98
-In most cases, it is best to leave the Fossil-generated HTML Header
99
-alone. (One exception is when the administrator needs to include links
100
-to additional CSS files.) The configurable part of the skin begins
101
-with the Content Header section which should follow this template:
102
-
103
- <div class="header">
104
- ... top banner and menu bar ...
105
- </div>
106
-
107
-Note that `<div class="header">` and `</div>` tags must be included in
108
-the Content Header text of the skin. In other words, you, the
109
-administrator, need to supply that text as part of your skin
110
-customization.
111
-
112
-The Fossil-generated Content section immediately follows the Content Header.
113
-The Content section will looks like this:
96
+You can [override this generated HTML header](#override) by including a
97
+“`<body>`” tag somewhere in the Header area of the skin, but it is
98
+almost always best to limit a custom skin’s Header section to something
99
+like this:
100
+
101
+<div class="sidebar" id="version-2.24">Prior to Fossil 2.24, we used
102
+generic `<div>` elements to mark up these sections of the header, but we
103
+switched to these semantic tag names to give browser accessibility
104
+features more freedom to do intelligent things with the page content.
105
+Those who made custom skins based on the old way of doing things will
106
+need to track this change when upgrading, else the corresponding CSS
107
+will mistarget the page header elements. Also, if you’re using Fossil’s
108
+chat feature, failing to track this change will cause it to miscalculate
109
+the message area size, resulting in double scrollbars. Simply diffing
110
+your custom header in the skin editor against the stock version should
111
+be sufficient to show what you need to change.</div>
112
+
113
+
114
+ <header>
115
+ ...
116
+ </header>
117
+ <nav class="mainmenu" title="Main Menu">
118
+ ...
119
+ </nav>
120
+ <nav id="hbdrop" class="hbdrop" title="sitemap"></nav>
121
+
122
+See the stock skins’ headers for ideas of what to put in place of the
123
+ellipses.
124
+
125
+The Fossil-generated Content section immediately follows this Header.
126
+It will look like this:
114127
115128
<div class="content">
116129
... Fossil-generated content here ...
117130
</div>
118131
119
-After the Content is the custom Content Footer section which should
132
+After the Content is the custom Skin Footer section which should
120133
follow this template:
121134
122
- <div class="footer">
135
+ <footer>
123136
... skin-specific stuff here ...
124
- </div>
137
+ </footer>
125138
126
-As with the Content Header, the template elements of the Content Footer
127
-should appear exactly as they are shown.
139
+As with the `<header>` change called out above, this, too, is a breaking
140
+change in Fossil 2.24.
128141
129142
Finally, Fossil always adds its own footer (unless overridden)
130143
to close out the generated HTML:
131144
132145
</body>
@@ -155,13 +168,13 @@
155168
elements at the beginning of the document,
156169
and the closing `</body>` and `</html>` elements at the end are automatically
157170
generated by Fossil. This is recommended.
158171
159172
However, for maximum design flexibility, Fossil allows those elements to be
160
-supplied as part of the configurable Content Header and Content Footer.
161
-If the Content Header contains the text "`<body`", then Fossil assumes that
162
-the Content Header and Content Footer will handle all of the `<html>`,
173
+supplied as part of the configurable Skin Header and Skin Footer.
174
+If the Skin Header contains the text "`<body`", then Fossil assumes that
175
+the Skin Header and Skin Footer will handle all of the `<html>`,
163176
`<head>`, and `<body>` text itself, and the Fossil-generated header and
164177
footer will be blank.
165178
166179
When overriding the HTML Header in this way, you will probably want to use some
167180
of the [TH1 variables documented below](#vars) such as `$stylesheet_url`
@@ -221,12 +234,12 @@
221234
diagrams and other elements of the diagrams, respectively.
222235
</dd>
223236
224237
<dt><b>footer.txt</b> and <b>header.txt</b></dt>
225238
226
-<dd>The footer.txt and header.txt files contain the Content Footer
227
-and Content Header respectively. Of these, the Content Header is
239
+<dd>The footer.txt and header.txt files contain the Skin Footer
240
+and Skin Header respectively. Of these, the Skin Header is
228241
the most important, as it contains the markup used to generate
229242
the banner and menu bar for each page.
230243
231244
Both the footer.txt and header.txt file are
232245
[processed using TH1](#headfoot) prior to being output as
@@ -234,11 +247,11 @@
234247
235248
<dt><b>js.txt</b></dt>
236249
237250
<dd>The js.txt file is optional. It is intended to be javascript.
238251
The complete text of this javascript might be inserted into
239
-the Content Footer, after being processed using TH1, using
252
+the Skin Footer, after being processed using TH1, using
240253
code like the following in the "footer.txt" file:
241254
242255
<pre>
243256
&lt;script nonce="$nonce"&gt;
244257
&lt;th1&gt;styleScript&lt;/th1&gt;
@@ -314,11 +327,11 @@
314327
your web browser's cache and take it out of developer mode.
315328
316329
## <a id="headfoot"></a>Header and Footer Processing
317330
318331
The `header.txt` and `footer.txt` control files of a skin are the HTML text
319
-of the Content Header and Content Footer, except that before being inserted
332
+of the Skin Header and Skin Footer, except that before being inserted
320333
into the output stream, the text is run through a
321334
[TH1 interpreter](./th1.md) that might adjust the text as follows:
322335
323336
* All text within &lt;th1&gt;...&lt;/th1&gt; is omitted from the
324337
output and is instead run as a TH1 script. That TH1
@@ -326,11 +339,11 @@
326339
or to inhibit or enable the output of subsequent text.
327340
328341
* Text of the form "$NAME" or "$&lt;NAME&gt;" is replaced with
329342
the value of the TH1 variable NAME.
330343
331
-For example, first few lines of a typical Content Header will look
344
+For example, first few lines of a typical Skin Header will look
332345
like this:
333346
334347
<div class="header">
335348
<div class="title"><h1>$<project_name></h1>$<title>/div>
336349
337350
--- www/customskin.md
+++ www/customskin.md
@@ -58,22 +58,16 @@
58 # Structure Of A Fossil Web Page
59
60 Every HTML page generated by Fossil has the same basic structure:
61
62 | Fossil-Generated HTML Header |
63 | Content Header |
64 | Fossil-Generated Content |
65 | Content Footer |
66 | Fossil-Generated HTML Footer |
67
68 The green parts are *usually* generated by Fossil. The blue parts
69 are things that you, the administrator, get to modify in order to
70 customize the skin.
71
72 Fossil *usually* (but not always - [see below](#override))
73 generates the initial HTML Header section of a page. The
74 generated HTML Header will look something like this:
75
76 <html>
77 <head>
78 <base href="...">
79 <meta http-equiv="Content-Security-Policy" content="....">
@@ -81,52 +75,71 @@
81 <title>....</title>
82 <link rel="stylesheet" href="..." type="text/css">
83 </head>
84 <body class="FEATURE">
85
86 …where `FEATURE` is either the top-level URL element (e.g. `doc`) or a
87 feature class that groups multiple URLs under a single name such as
88 `forum` to contain `/forummain`, `/forumpost`, `/forume2`, etc. This
89 allows per-feature CSS such as
 
 
 
 
 
 
 
90
91 body.forum div.markdown blockquote {
92 margin-left: 10px;
93 }
94
95 That is, affect HTML `<blockquote>` tags specially only for forum posts
96 written in Markdown, leaving all other block quotes alone.
97
98 In most cases, it is best to leave the Fossil-generated HTML Header
99 alone. (One exception is when the administrator needs to include links
100 to additional CSS files.) The configurable part of the skin begins
101 with the Content Header section which should follow this template:
102
103 <div class="header">
104 ... top banner and menu bar ...
105 </div>
106
107 Note that `<div class="header">` and `</div>` tags must be included in
108 the Content Header text of the skin. In other words, you, the
109 administrator, need to supply that text as part of your skin
110 customization.
111
112 The Fossil-generated Content section immediately follows the Content Header.
113 The Content section will looks like this:
 
 
 
 
 
 
 
 
 
 
 
 
114
115 <div class="content">
116 ... Fossil-generated content here ...
117 </div>
118
119 After the Content is the custom Content Footer section which should
120 follow this template:
121
122 <div class="footer">
123 ... skin-specific stuff here ...
124 </div>
125
126 As with the Content Header, the template elements of the Content Footer
127 should appear exactly as they are shown.
128
129 Finally, Fossil always adds its own footer (unless overridden)
130 to close out the generated HTML:
131
132 </body>
@@ -155,13 +168,13 @@
155 elements at the beginning of the document,
156 and the closing `</body>` and `</html>` elements at the end are automatically
157 generated by Fossil. This is recommended.
158
159 However, for maximum design flexibility, Fossil allows those elements to be
160 supplied as part of the configurable Content Header and Content Footer.
161 If the Content Header contains the text "`<body`", then Fossil assumes that
162 the Content Header and Content Footer will handle all of the `<html>`,
163 `<head>`, and `<body>` text itself, and the Fossil-generated header and
164 footer will be blank.
165
166 When overriding the HTML Header in this way, you will probably want to use some
167 of the [TH1 variables documented below](#vars) such as `$stylesheet_url`
@@ -221,12 +234,12 @@
221 diagrams and other elements of the diagrams, respectively.
222 </dd>
223
224 <dt><b>footer.txt</b> and <b>header.txt</b></dt>
225
226 <dd>The footer.txt and header.txt files contain the Content Footer
227 and Content Header respectively. Of these, the Content Header is
228 the most important, as it contains the markup used to generate
229 the banner and menu bar for each page.
230
231 Both the footer.txt and header.txt file are
232 [processed using TH1](#headfoot) prior to being output as
@@ -234,11 +247,11 @@
234
235 <dt><b>js.txt</b></dt>
236
237 <dd>The js.txt file is optional. It is intended to be javascript.
238 The complete text of this javascript might be inserted into
239 the Content Footer, after being processed using TH1, using
240 code like the following in the "footer.txt" file:
241
242 <pre>
243 &lt;script nonce="$nonce"&gt;
244 &lt;th1&gt;styleScript&lt;/th1&gt;
@@ -314,11 +327,11 @@
314 your web browser's cache and take it out of developer mode.
315
316 ## <a id="headfoot"></a>Header and Footer Processing
317
318 The `header.txt` and `footer.txt` control files of a skin are the HTML text
319 of the Content Header and Content Footer, except that before being inserted
320 into the output stream, the text is run through a
321 [TH1 interpreter](./th1.md) that might adjust the text as follows:
322
323 * All text within &lt;th1&gt;...&lt;/th1&gt; is omitted from the
324 output and is instead run as a TH1 script. That TH1
@@ -326,11 +339,11 @@
326 or to inhibit or enable the output of subsequent text.
327
328 * Text of the form "$NAME" or "$&lt;NAME&gt;" is replaced with
329 the value of the TH1 variable NAME.
330
331 For example, first few lines of a typical Content Header will look
332 like this:
333
334 <div class="header">
335 <div class="title"><h1>$<project_name></h1>$<title>/div>
336
337
--- www/customskin.md
+++ www/customskin.md
@@ -58,22 +58,16 @@
58 # Structure Of A Fossil Web Page
59
60 Every HTML page generated by Fossil has the same basic structure:
61
62 | Fossil-Generated HTML Header |
63 | Skin Header |
64 | Fossil-Generated Content |
65 | Skin Footer |
66 | Fossil-Generated HTML Footer |
67
68 By default, Fossil starts every generated HTML page with this:
 
 
 
 
 
 
69
70 <html>
71 <head>
72 <base href="...">
73 <meta http-equiv="Content-Security-Policy" content="....">
@@ -81,52 +75,71 @@
75 <title>....</title>
76 <link rel="stylesheet" href="..." type="text/css">
77 </head>
78 <body class="FEATURE">
79
80 Fossil used to require a static version of this in every skin’s Header
81 area, but over time, we have found good cause to generate multiple
82 elements at runtime.
83
84 One such is the `FEATURE` element, being either the top-level HTTP
85 request routing element (e.g. `doc`) or an aggregate feature class that
86 groups multiple routes under a single name. A prime example is `forum`,
87 which groups the `/forummain`, `/forumpost`, and `/forume2` routes,
88 allowing per-feature CSS. For instance, to style `<blockquote>` tags
89 specially for forum posts written in Markdown, leaving all other block
90 quotes alone, you could say:
91
92 body.forum div.markdown blockquote {
93 margin-left: 10px;
94 }
95
96 You can [override this generated HTML header](#override) by including a
97 “`<body>`” tag somewhere in the Header area of the skin, but it is
98 almost always best to limit a custom skin’s Header section to something
99 like this:
100
101 <div class="sidebar" id="version-2.24">Prior to Fossil 2.24, we used
102 generic `<div>` elements to mark up these sections of the header, but we
103 switched to these semantic tag names to give browser accessibility
104 features more freedom to do intelligent things with the page content.
105 Those who made custom skins based on the old way of doing things will
106 need to track this change when upgrading, else the corresponding CSS
107 will mistarget the page header elements. Also, if you’re using Fossil’s
108 chat feature, failing to track this change will cause it to miscalculate
109 the message area size, resulting in double scrollbars. Simply diffing
110 your custom header in the skin editor against the stock version should
111 be sufficient to show what you need to change.</div>
112
113
114 <header>
115 ...
116 </header>
117 <nav class="mainmenu" title="Main Menu">
118 ...
119 </nav>
120 <nav id="hbdrop" class="hbdrop" title="sitemap"></nav>
121
122 See the stock skins’ headers for ideas of what to put in place of the
123 ellipses.
124
125 The Fossil-generated Content section immediately follows this Header.
126 It will look like this:
127
128 <div class="content">
129 ... Fossil-generated content here ...
130 </div>
131
132 After the Content is the custom Skin Footer section which should
133 follow this template:
134
135 <footer>
136 ... skin-specific stuff here ...
137 </footer>
138
139 As with the `<header>` change called out above, this, too, is a breaking
140 change in Fossil 2.24.
141
142 Finally, Fossil always adds its own footer (unless overridden)
143 to close out the generated HTML:
144
145 </body>
@@ -155,13 +168,13 @@
168 elements at the beginning of the document,
169 and the closing `</body>` and `</html>` elements at the end are automatically
170 generated by Fossil. This is recommended.
171
172 However, for maximum design flexibility, Fossil allows those elements to be
173 supplied as part of the configurable Skin Header and Skin Footer.
174 If the Skin Header contains the text "`<body`", then Fossil assumes that
175 the Skin Header and Skin Footer will handle all of the `<html>`,
176 `<head>`, and `<body>` text itself, and the Fossil-generated header and
177 footer will be blank.
178
179 When overriding the HTML Header in this way, you will probably want to use some
180 of the [TH1 variables documented below](#vars) such as `$stylesheet_url`
@@ -221,12 +234,12 @@
234 diagrams and other elements of the diagrams, respectively.
235 </dd>
236
237 <dt><b>footer.txt</b> and <b>header.txt</b></dt>
238
239 <dd>The footer.txt and header.txt files contain the Skin Footer
240 and Skin Header respectively. Of these, the Skin Header is
241 the most important, as it contains the markup used to generate
242 the banner and menu bar for each page.
243
244 Both the footer.txt and header.txt file are
245 [processed using TH1](#headfoot) prior to being output as
@@ -234,11 +247,11 @@
247
248 <dt><b>js.txt</b></dt>
249
250 <dd>The js.txt file is optional. It is intended to be javascript.
251 The complete text of this javascript might be inserted into
252 the Skin Footer, after being processed using TH1, using
253 code like the following in the "footer.txt" file:
254
255 <pre>
256 &lt;script nonce="$nonce"&gt;
257 &lt;th1&gt;styleScript&lt;/th1&gt;
@@ -314,11 +327,11 @@
327 your web browser's cache and take it out of developer mode.
328
329 ## <a id="headfoot"></a>Header and Footer Processing
330
331 The `header.txt` and `footer.txt` control files of a skin are the HTML text
332 of the Skin Header and Skin Footer, except that before being inserted
333 into the output stream, the text is run through a
334 [TH1 interpreter](./th1.md) that might adjust the text as follows:
335
336 * All text within &lt;th1&gt;...&lt;/th1&gt; is omitted from the
337 output and is instead run as a TH1 script. That TH1
@@ -326,11 +339,11 @@
339 or to inhibit or enable the output of subsequent text.
340
341 * Text of the form "$NAME" or "$&lt;NAME&gt;" is replaced with
342 the value of the TH1 variable NAME.
343
344 For example, first few lines of a typical Skin Header will look
345 like this:
346
347 <div class="header">
348 <div class="title"><h1>$<project_name></h1>$<title>/div>
349
350

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button