User-friendly Fossil site

It's a short intro to the Fossil site building. Results from a discussion of Obtaining tclvfs, sort of continuation of it.

A special accent is set on how to get a Fossil skin like in aloupe , with "Download", "Docs" and all. Hopefully, it will help to make some Fossil sites more user-friendly.

Here, we are going to use chiselapp.com as web hosting.

To create a site:

Log in chiselapp.com using Log In link. Or create your account if you are new to chiselapp.com using Create Account link.
After logging in, create a new repository using Create Repository link.
Enter Repository name like mysite (no spaces and specials). Enter Password for this repo (no confirmation here). At need, switch Private checkbox on (this can be easily reverted afterwards). Switch Use SHA3 checkbox on.
Hit Create Repository. Then, in a new page, hit Return to dashboard.
In the list of your repositories, hit mysite link.
The chiselapp.com will require to repeat "Log in", now for this repository. At logging in, enter the repo's password (it's not the same as your password to chiselapp.com ).
Hit Admin link, then Configuration. Enter mysite as Project name. Enter mysite as Tarball and ZIP-archive Prefix. Then enter below:

     /doc/trunk/README.md    as Documentation Index (the README.md of your root directory would be Docs link)
     /download               as Download
     MIT (or other)          as License

Hit Apply Changes.

Now we make a skin

Hit Admin again.

Hit Skins link (15th in the list).

Go to Step 4: Make Edits.

Clicking CSS, Header, Footer, Details, Javascript links, fill their contents.

The appropriate text fields are following below (look for "Copy to clipboard" at their top right).

Each time, hit Apply Changes and close the page to return to the Skins.

CSS

body {
    margin: 0 auto;
    background-color: white;
    font-family: sans-serif;
    font-size:14pt;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -mx-text-size-adjust: none;
}
a {
    color: #4183C4;
    text-decoration: none;
}
a:hover {
    color: #4183C4;
    text-decoration: underline;
}
div.forumPosts a:visited {
    color: #6A7F94;
}
hr {
    color: #eee;
}
.title {
    color: #4183C4;
    float:left;
}
.title h1 {
    display:inline;
}
.title h1:after {
    content: " / ";
    color: #777;
    font-weight: normal;
}
.content h1 {
    font-size: 1.25em;
}
.content h2 {
    font-size: 1.15em;
}
.content h3 {
    font-size: 1.05em;
    font-weight: bold;
}
.section {
    font-size: 1em;
    font-weight: bold;
    background-color: #f5f5f5;
    border: 1px solid #d8d8d8;
    border-radius: 3px 3px 0 0;
    padding: 9px 10px 10px;
    margin: 10px 0;
}
.sectionmenu {
    border: 1px solid #d8d8d8;
    border-radius: 0 0 3px 3px;
    border-top: 0;
    margin-top: -10px;
    margin-bottom: 10px;
    padding: 10px;
}
.sectionmenu a {
    display: inline-block;
    margin-right: 1em;
}
.status {
    float:right;
    font-size:.7em;
}
.mainmenu {
    font-size:.8em;
    clear:both;
    background:#eaeaea linear-gradient(#fafafa, #eaeaea) repeat-x;
    border:1px solid #eaeaea;
    border-radius:5px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    z-index: 21;  /* just above hbdrop */
}
.mainmenu a {
    text-decoration:none;
    color: #777;
    border-right:1px solid #eaeaea;
}
.mainmenu a.active,
.mainmenu a:hover {
    color: #000;
    border-bottom:2px solid #D26911;
}
div#hbdrop {
    background-color: white;
    border: 1px solid black;
    border-top: white;
    border-radius: 0 0 0.5em 0.5em;
    display: none;
    font-size: 80%;
    left: 2em;
    width: 90%;
    padding-right: 1em;
    position: absolute;
    z-index: 20;  /* just below mainmenu, but above timeline bubbles */
}
.submenu {
    font-size: .7em;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}
.submenu a, .submenu label {
    padding: 10px 11px;
    text-decoration:none;
    color: #777;
}
.submenu a:hover, .submenu label:hover {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #000;
}
.content {
    padding-top: 10px;
    font-size:.8em;
    color: #444;
}
.udiff, .sbsdiff {
    font-size: .85em !important;
    overflow: auto;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.content blockquote {
    padding: 0 15px;
}
div.forumHierRoot blockquote, div.forumHier blockquote {
    background-color: rgba(65, 131, 196, 0.1);
    border-left: 3px solid #254769;
    padding: .1em 1em;
}
table.report {
    cursor: auto;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin: 1em 0;
}
.report td, .report th {
   border: 0;
   font-size: .8em;
   padding: 10px;
}
.report td:first-child {
    border-top-left-radius: 5px;
}
.report tbody tr:last-child td:first-child {
    border-bottom-left-radius: 5px;
}
.report td:last-child {
    border-top-right-radius: 5px;
}
.report tbody tr:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.report tbody tr:last-child td:last-child {
    border-bottom-right-radius: 5px;
}
.report th {
    cursor: pointer;
}
.report thead+tbody tr:hover {
    background-color: #f5f9fc !important;
}

td.tktDspLabel {
    width: 70px;
    text-align: right;
    overflow: hidden;
}
td.tktDspValue {
    text-align: left;
    vertical-align: top;
    background-color: #f8f8f8;
    border: 1px solid #ccc;
}
td.tktDspValue pre {
    white-space: pre-wrap;
}
span.timelineDetail {
    font-size: 90%;
}
.footer {
    border-top: 1px solid #ccc;
    padding: 10px;
    font-size:.7em;
    margin-top: 10px;
    color: #ccc;
}
div.timelineDate {
    font-weight: bold;
    white-space: nowrap;
}
span.submenuctrl, span.submenuctrl input, select.submenuctrl {
  color: #777;
}
span.submenuctrl {
  white-space: nowrap;
}
div.submenu label {
  white-space: nowrap;
}
@media screen and (max-width: 600px) {
  /* Spacing for mobile */
  body {
    padding-left: 4px;
    padding-right: 4px;
  }
  .title {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .status {padding-top: 0px;}
  .mainmenu a {
    padding: 10px 10px;
  }
  .mainmenu {
    padding: 10px;
  }
  .desktoponly {
    display: none;
  }
}
@media screen and (min-width: 600px) {
  /* Spacing for desktop */
  body {
    padding-left: 20px;
    padding-right: 20px;
  }
  .title {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .status {padding-top: 30px;}
  .mainmenu a {
    padding: 10px 20px;
  }
  .mainmenu {
    padding: 10px;
  }
}
@media screen and (max-width: 1200px) {
  /* Special declarations for narrow desktop or wide mobile */
  .wideonly {
    display: none;
  }
}

Header

In the field below, replace two aplsimple with your login. Or remove the link at all, to restore Fossil defaults.

You can also insert your own links into the header, e.g. under "menulink /download Download {}" line.

<div class="header">
  <div class="title">
    <div class="page-title">
      <div class="title-header"><a href="$home$index_page"><h1>$<project_name></h1></a>
      <th1>
        if {$current_page eq [string range $index_page 1 end] || 
            $current_page eq "index" || $project_name eq $title} {
          puts Home
        } else {
          puts $title
        }
      </th1>
      </div>
    </div>
  </div>
    <div class="status"><th1>
 if {[info exists login]} {
   html "<a href='http://chiselapp.com/user/$login/'>$login</a> — <a href='$home/login'>Logout</a>\n"
 } else {
   html "<a href='http://chiselapp.com/user/aplsimple/'>aplsimple</a> | <a href='$home/login'>Login</a>\n"
 }
    </th1></div>
</div>
<div class="mainmenu">
<th1>
proc menulink {url name cls} {
  upvar current_page current
  upvar home home
  if {[string range $url 0 [string length $current]] eq "/$current"} {
    html "<a href='$home$url' class='active $cls'>$name</a>\n"
  } else {
    html "<a href='$home$url' class='$cls'>$name</a>\n"
  }
}
html "<a id='hbbtn' href='#'>&#9776;</a>"
menulink $index_page Home {}
menulink /doc/trunk/README.md Docs {}
menulink /download Download {}
if {[anycap s]} {
  # jor
  menulink /timeline Timeline {}
}
if {[hascap oh]} {
  menulink /dir?ci=tip Files desktoponly
}
if {[hascap s]} {
  # o
  menulink  /brlist Branches desktoponly
  menulink  /taglist Tags wideonly
}
if {[anycap 23456] || [anoncap 2] || [anoncap 3]} {
  menulink /forum Forum wideonly
}
if {[hascap oh]} {
  # r
  menulink /ticket Tickets wideonly
}
if {[hascap j]} {
  menulink /wiki Wiki wideonly
}
if {[hascap s]} {
  menulink /setup Admin {}
} elseif {[hascap a]} {
  menulink /setup_ulist Users {}
}
</th1></div>
<div id='hbdrop'></div>

Footer

<div class="footer">
This page was generated in about
<th1>puts [expr {([utime]+[stime]+1000)/1000*0.001}]</th1>s by
Fossil $release_version $manifest_version $manifest_date
</div>
<script nonce="$nonce">
<th1>styleScript</th1>
</script>

Details

timeline-arrowheads:        1
timeline-circle-nodes:      1
timeline-color-graph-lines: 1
white-foreground:           0

Javascript (optional)

Don't consider the Javascript field optional as suggested by Fossil.

The field is mandatory for this skin.

(function() {
  var panel = document.getElementById("hbdrop");
  if (!panel) return;   // site admin might've nuked it
  if (!panel.style) return;  // shouldn't happen, but be sure
  var panelBorder = panel.style.border;
  // Disable animation if this browser doesn't support CSS transitions.
  //
  // We need this ugly calling form for old browsers that don't allow
  // panel.style.hasOwnProperty('transition'); catering to old browsers
  // is the whole point here.
  var animate = panel.style.transition !== null && (typeof(panel.style.transition) == "string");
  var animMS = 400;
  // Calculate panel height despite its being hidden at call time.
  // Based on https://stackoverflow.com/a/29047447/142454
  var panelHeight;  // computed on sitemap load
  function calculatePanelHeight() {
    // Get initial panel styles so we can restore them below.
    var es   = window.getComputedStyle(panel),
        edis = es.display,
        epos = es.position,
        evis = es.visibility;
    // Restyle the panel so we can measure its height while invisible.
    panel.style.visibility = 'hidden';
    panel.style.position   = 'absolute';
    panel.style.display    = 'block';
    panelHeight = panel.offsetHeight + 'px';
    // Revert styles now that job is done.
    panel.style.display    = edis;
    panel.style.position   = epos;
    panel.style.visibility = evis;
  }
  // Show the panel by changing the panel height, which kicks off the
  // slide-open/closed transition set up in the XHR onload handler.
  //
  // Schedule the change for a near-future time in case this is the
  // first call, where the div was initially invisible.  If we were
  // to change the panel's visibility and height at the same time
  // instead, that would prevent the browser from seeing the height
  // change as a state transition, so it'd skip the CSS transition:
  //
  // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#JavaScript_examples
  function showPanel() {
    if (animate) {
      setTimeout(function() {
        panel.style.maxHeight = panelHeight;
        panel.style.border    = panelBorder;
      }, 40);   // 25ms is insufficient with Firefox 62
    }
    else {
      panel.style.display = 'block';
    }
  }
  // Return true if the panel is showing.
  function panelShowing() {
    if (animate) {
      return panel.style.maxHeight == panelHeight;
    }
    else {
      return panel.style.display == 'block';
    }
  }
  // Click handler for the hamburger button.
  var needSitemapHTML = true;
  document.querySelector("div.mainmenu > a").onclick = function() {
    if (panelShowing()) {
      // Transition back to hidden state.
      if (animate) {
        panel.style.maxHeight = '0';
        setTimeout(function() {
          // Browsers show a 1px high border line when maxHeight == 0,
          // our "hidden" state, so hide the borders in that state, too.
          panel.style.border = 'none';
        }, animMS);
      }
      else {
        panel.style.display = 'none';
      }
    }
    else if (needSitemapHTML) {
      // Only get it once per page load: it isn't likely to
      // change on us.
      var xhr = new XMLHttpRequest();
      xhr.onload = function() {
        var doc = xhr.responseXML;
        if (doc) {
          var sm = doc.querySelector("ul#sitemap");
          if (sm && xhr.status == 200) {
            // Got sitemap.  Insert it into the drop-down panel.
            needSitemapHTML = false;
            panel.innerHTML = sm.outerHTML;
            // Display the panel
            if (animate) {
              // Set up a CSS transition to animate the panel open and
              // closed.  Only needs to be done once per page load.
              // Based on https://stackoverflow.com/a/29047447/142454
              calculatePanelHeight();
              panel.style.transition = 'max-height ' + animMS +
                  'ms ease-in-out';
              panel.style.overflowY  = 'hidden';
              panel.style.maxHeight  = '0';
              showPanel();
            }
            panel.style.display = 'block';
          }
        }
        // else, can't parse response as HTML or XML
      }
      xhr.open("GET", "$home/sitemap?popup");   // note the TH1 substitution!
      xhr.responseType = "document";
      xhr.send();
    }
    else {
      showPanel();   // just show what we built above
    }
    return false;  // prevent browser from acting on <a> click
  }
})();

Last steps

Last but not least.

In the Step 5: Verify The Draft Skin, hit the first link. It's a must! Then close the verified page to return to the Skins.

In the Step 7: Publish, switch both checkboxes on.

Hit Publish Draft1 button.

That's all.

Other details

The How to chisel at chiselapp.com wiki covers other details, e.g. how to make "Home" page .