Custom CSS

You can set the CSS for individual wiki sites in a farm by adding a theme folder to the status folder of the site.

The folder structure for your wiki site looks like this:

example.com/ pages/ ... json files for the sites content status/ favicon.png sitemap.json sitemap.xml theme/ style.css

You can dig into the way wiki is styled by playing around with the browser debugging tools. When you find a style you want copy this to the file:

example.com/status/theme/style.css

# Example

Here is an example of a custom style.css file to upload to the theme folder:

#welcome-visitors { width: 100vw; /* 100% of the viewport width */ box-sizing: border-box; /* Prevent overflow due to padding/border */ }

Here we show an example CSS file, where we remove the footer, and tweak things to make the wiki translucent if needed. We also need to remove the min-height attribute of .page selctor.

#welcome-visitors { /* option to make first page wider */ /* width: 1000px; */ } #welcome-visitors .journal { /* may want to hide journal only on first page */ /* visibility: hidden; */ } body { /* makes the background translucent */ background: rgba(255,255,255,0.94); } .page { /* resets the bottom from it's wiki setting of 60 */ background-color: transparent; } .main { /* resets the bottom from it's wiki setting of 60 */ bottom: 18px; } .paper { /* resets wiki value of 100% */ min-height: 0; } div.footer { /* sort of deletes the footer rather than just hides it */ display:none; /* visibility: hidden; */ } footer { /* otherwise we have an empty scrolling area */ display:none; /* visibility: hidden; */ } .footer-item { /* visibility: hidden; margin-left: -146px; */ } .journal { display:none; /* visibility: hidden; */ }

Upload your own style.css file here:

theme

You can see what it looks like here - Daisy World.

/* Fullscreen First Column */ #welcome-visitors { overflow-x: hidden; overflow-y: auto; width: 100vw; height: 100vh; box-sizing: border-box; margin: 0; padding: 0; background: lightgreen; position: relative; } /* Hide WebKit Scrollbar (Chrome/Safari) */ #welcome-visitors::-webkit-scrollbar, body::-webkit-scrollbar { display: none; } /* Welcome-visitors story */ #welcome-visitors .story { background: lightgreen; } /* Global Body + Page Reset */ body, .page, .story { margin: 0; padding: 0; overflow-x: hidden; background: white; height: 100%; } /* Fix footer override */ .footer { position: absolute; bottom: 0; width: 100%; background: white; padding-bottom: 5px; z-index: 10; } /* Hide the entire original CC BY-SA 4.0 link */ .footer a[href*="creativecommons.org/licenses/by-sa/4.0/"] { visibility: hidden; position: relative; } /* Insert "CC BY-NC 4.0" in same place with proper styling */ .footer a[href*="creativecommons.org/licenses/by-sa/4.0/"]::before { content: "CC BY-NC 4.0 · "; visibility: visible; position: absolute; left: 0; top: 0; font-size: inherit; font-family: inherit; font-weight: inherit; color: inherit; white-space: nowrap; }