Add a footer to your wiki

saqimtiaz · August 25, 2021, 8:46pm

Code copied from discussion: Adding a page footer to a TiddlyWiki - #6 by telumire

Create a custom layout in a new tiddler, for example:

{{$:/core/ui/PageTemplate}}
<footer>
<$list filter="[all[shadows+tiddlers]tag[$:/tags/Footer]!has[draft.of]]" variable="listItem">
<$transclude tiddler=<<listItem>>/>
</$list>
</footer>

Then add the tag $:/tags/Layout, description and name fields, and save the tiddler. Now you can switch to the new layout with ctrl+shift+L. Any tiddlers tagged with $:/tags/Footer will be displayed in the footer.

Add the following CSS in a tiddler tagged with $:/tags/Stylesheet to position the footer at the bottom :

.tc-page-container-wrapper > div {
	height:100vh;
	display: flex;
	flex-direction: column;
	padding:0;
}

footer  {
	flex: 1 1 auto;
	display:flex;
	justify-content:center;
	align-items: end;
	z-index:-1;
	min-height:50px;
}