Adding a page footer to a TiddlyWiki

[sobjornstad]

Has anyone created a simple page footer for a TiddlyWiki, displayed after all open tiddlers and the sidebar have run their course? The kind of thing often found on blogs with copyright information, contact links, etc.

When I try creating a tiddler and tagging it $:/tags/PageTemplate, it ends up overlapping other features in the wiki, and I thought I’d check to see if others already have something that works before I go diving into a bunch of complicated CSS.

I haven’t found anything on the topic except this thread from 2006, which isn’t super-helpful at this point!

[TW_Tones]

Have you tried tagging a tiddler with $:/tags/BelowStory ?

[PaulH]

Searching for $:/tags/BelowStory in the documentation and finding https://tiddlywiki.com/#SystemTags just answered all kinds of questions. Thank you!

[sobjornstad]

It’s not quite what I envisioned (I was thinking about putting it below the sidebar as well, as mentioned in my OP), but I think this works even better, actually! Thanks. And +1 for the SystemTags tiddler in tiddlywiki.com as mentioned by @PaulH, I didn’t know that existed and it’s super useful.

[TW_Tones]

There are a number of other ways to place content in tiddly wiki but they start with system tags but alternative switchable layouts are now possible. The sidebar segment tag using the list-after field lets you address the side bar.

[telumire]

Yep I’d also use a layout, maybe something like this :

{{$:/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, a description/name, and finally switch with ctrl-shift-L

With the following css to make it stick to 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;
}

[saqimtiaz]

Neat solution!

This made me smile twice. Once for using the layouts feature, and then again for transcluding the original page template.

[TW_Tones]

@telumire since you seem to be a layout wizard could you show how to introduce a left sidebar and full header?

[Birthe]

Create a stylesheet tiddler with the content:

.tc-sidebar-scrollable {
	position: fixed;
	top: 0px;
	left: 0;
	bottom: 0;
	margin: 0 0 0 10px;
	padding: 70px 0 28px 40px;
}
.tc-story-river {
	left: 360px;
	background: #F4F4F4;
	width: calc(100% - 400px);
}
<$reveal state="$:/state/sidebar" type="match" text="no">
.tc-story-river {
	left: 0px;
        width:100%;
}
</$reveal>

[saqimtiaz]

There is a neat trick you can use in situations where you need to add something to the beginning or end of a core template and don’t want to worry about overriding a core shadow tiddler and having issues upgrading to newer versions of TiddlyWiki in the future.

For example if you want to use @telumire’s approach to adding a footer without creating a new layout, you could just modify $:/core/ui/PageTemplate to:

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

You transclude the original shadow tiddler instead of including its original text, thereby ensuring that any core updates to that shadow tiddler will get picked up.

[telumire]

@saqimtiaz thanks !
@TW_Tones Ahah I wish ! Check out projectify by NicolasPetton, it feature a beautiful left sidebar

https://projectify.wiki/demo.html#%24%3A%2Fthemes%2Fnico%2Fnotebook%2Fui%2FSidebar

[stobot]

@Birthe I’ve wondered for YEARS how to do that! Note that when I tried your instructions initially I read “create a stylesheet tiddler” to mean change the type to stylesheet, but when I saw the reveal there, I realized instead I needed to switch it back and add the system tag $:/tags/Stylesheet instead. Posting this here for potential others.

@Birthe

Create a stylesheet tiddler with the content:

[TW_Tones]

@telumire thanks for the link, I will review and see what I can extract, I am interested in an additional side bar, and have achieved this in my blog site

Off line I have a project to collate what I am calling “additional elements” basically making and collecting additional page elements to use on tiddlywiki. These contributions so far in this thread are very helpful. We have the existing elements accessible by tags, the menu plugin (which is difficult to use); From this thread we have;

• Footer
• Left Sidebar

In my own collection I have

• Above viewToolbar (Red arrow)
  *Second small toolbar (Purple arrow)
  

• Following /proceeding title

• In subtitle

• Search indicators (Responds to string in search) above search
  

• Indicators - responds to various wiki status conditions above sidebar tabs
  

Futures;

• I would like to build layouts or elements to resemble
  • any website or application we may come across
  • Make use of gaps in the tiddlywiki eg;
    • Left and right margins of tiddlers
    • Between tiddlers and sidebar
• A flexible page layout based on this page model
• Popup or floating indicators or menu(s)

I will start a new thread soon so as not to hijack this thread anymore.

[telumire]

Sorry for the necro, but I think I’ve found a better way to add a footer to a tiddlywiki, this time without the need to create a custom layout. For this we only need to use the tag $:/tags/RawMarkupWikified/BottomBody.

$:/tags/RawMarkupWikified/BottomBody marks tiddlers included as wikified text at the bottom of <body> - https://tiddlywiki.com

In the footer tiddler :

<footer>
Content of the footer
</footer>

Style :

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

.tc-body{
height:100vh;
display: flex;
flex-direction: column;
padding:0;
}

The downside of this is that it must be wikified, but the upside is that this allow to add a footer for any layout.

[TW_Tones]

@telumire All this time and I missed the $:/tags/RawMarkupWikified/BottomBody tag.

When wikification is not possible all you need is html content and place that since that is rendered by the browser.

There are two ways to do this;

• Install the internals plugin
• Use the preview HTML on the tiddler you want to capture a html version of
• Copy the resulting html and place in your footer tiddler.

Attached is a utility (not yet published) called snapshot, that takes a html snapshot of a rendered tiddler and displays that instead of the wikified tiddler (which is refreshed with wiki changes), it was designed for large report tiddlers so they did not need to continuously refresh, and to record as at date/time reports. Note it folds the tiddler to hide the view template.

snapshot.json (6.2 KB)

Once you click the camera/snapshot icon click on the small file icon above the content, it will open the snapshot tiddler, where you can copy it to the clipboard, and past in your raw tiddler. It will include images etc…

[TW_Tones]

I attempted this from @telumire code. But it is not appearing. I will debug later.

The footer works but not to display the captured HTML whether in a <html> tag or not.

[Mohammad]

@telumire - are you sure style works?

[telumire]

@TW_Tones , @Mohammad , did you wrap the <footer> in backticks ? This is necessary otherwise the footer tags get wikified (in that case, it get deleted) and the html cant be styled.

Here’s a live example : footer

The footer use this code :

On that note : how do we escape characters on talk.tiddlywiki ?

[boris]

@telumire

how do we escape characters on talk.tiddlywiki ?

Single backticks or triple back ticks for:

code blocks
are
like this

[telumire]

Thanks @boris ! Here’s the correct code :

`<footer>`
Content of the footer
`</footer>`