These are the current changes to the wikiJS back end to get it to look like the site you see here. This is unsupported but have fun hacking the look/feel of wiki.js
CSS injection
.stickyToc {
position: sticky;
top: 80px;
z-index: 2;
max-height: 55vh;
overflow-x: auto
}
#app > div.v-application--wrap > main > div > div.container.pl-5.pt-4.container--fluid.grid-list-xl > div > div.flex.page-col-sd.lg3.xl2 > div:nth-child(1) {
position: sticky;
top: 10px;
left: -100px;
z-index: 2;
max-height: 55vh;
overflow-x: auto
}
.v-application .headline,
.v-application .title {
font-family: Play,sans-serif!important
}
.v-application {
font-family: Play,sans-serif!important
}
.contents p {
font-family: Roboto,sans-serif!important
}
div.contents > div > div {
font-family: Roboto,sans-serif!important
}
Head Injection
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Play&display=swap" rel="stylesheet">
Body Config Changes to move stuff to the right
<script>
$(window).on('load', function() {
console.log("move nav menu");
$("#app > div.v-application--wrap > main > div > div.container.pl-5.pt-4.container--fluid.grid-list-xl > div > div.flex.page-col-sd.lg3.xl2").insertAfter("#app > div.v-application--wrap > main > div > div.container.pl-5.pt-4.container--fluid.grid-list-xl > div > div.flex.page-col-content.xs12.lg9.xl10");
console.log("move Complete, updating styles");
$('#app > div > main > div > div.container.grey.pa-0.container--fluid.darken-4-l3 > div > div').removeClass('offset-lg-3 offset-xl-2');
});
</script>