How to add a bottom navigation bar

[myfta]

I would like to add a bottom of the screen navigation bar, something like what is described here How to Design a Great Bottom Mobile Navigation Bar
and an example here What PWA Can Do Today

Is there a plugin that does something similar or can it be done with some custom CSS?

Thanks.

[Springer]

You may be interested in this kind of model by @Scott_Sauyet : Wizard Navigation Plugin

[TW_Tones]

Keeping in mind TiddlyWiki operates like many website and has an infinite vertical scroll, so footers
There are a number of different ways to define or address this and I have seen all;

• Simply tag a tiddler with $:/tags/BelowStory and its content will appear below the story.
• Using the tag $:/tags/SideBarSegment and give your tiddler a list-after field that is (empty) to place things at the bottom of the sidebar.
• A Fixed footer that the story can scrol under is also posible.

What do you want?

[myfta]

@TW_Tones

• A Fixed footer that the story can scrol under is also posible.

The fixed footer to scroll under - I suspect this is the more complicated option.

I am using Zoomin so $:/tags/BelowStory is not an option and I have the sidebar hidden.

[myfta]

I’m still trying to get a screen footer working. $:/tags/BelowStory gets me partially there but the tiddlers scroll OVER the footer, rather than the footer remaining on top. Conversely the sidebar does pass UNDER the footer.

Is there an alternative tag, or something extra I can do with the CSS?

[DaveGifford]

Here is a related thread

Adding a page footer to a TiddlyWiki

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 top…

[EricShulman]

Try this:

Create a tiddler (e.g., “MyPageFooter”), tagged with $:/tags/PageTemplate, containing:

\define myFooterHeight() 5em
<style>
.myPageFooter
{
   position:fixed;
   bottom:0;
   left:0;
   width:100vw;
   height:<<myFooterHeight>>;
   background:<<colour background>>;
   border:1px solid;
}
.tc-story-river, .tc-sidebar-scrollable
{
   padding-bottom:calc(<<myFooterHeight>> + 2em);
}
</style>
<div class="myPageFooter">
This is my page footer content
</div>

Notes:

• You can name the tiddler anything you like. The $:/tags/PageTemplate tag causes this tiddler’s contents to be automatically rendered as part of the overall page display.
• For easy adjustment of the page footer height, start by defining a simple one-line macro that creates a <<myFooterHeight>> variable that can be referenced in the CSS definition. I suggest using a constant such as 5em (or whatever is guaranteed to fit your footer content).
• You can name the .myPageFooter CSS class anything you like.
• While you CAN put the CSS into a separate tiddler (e.g., “MyPageFooterStyles”, tagged with $:/tags/Stylesheet) it is not necessary. By using “inline” <style>...</style>, it ensures that the styles will automatically be applied whenever the “MyPageFooter” tiddler is rendered and allows the entire footer definition to be self-contained in a single tiddler for easy portability to any other TiddlyWiki you want. You can even drag-and-drop this single tiddler to import it into someone else’s TiddlyWiki to temporarily add your footer there!
• In addition to the required position:fixed and bottom, left, width and height attributes, you will want to set a background color, so that any underlying StoryRiver and SideBar content does not “show through” when it is scrolled under the footer. In particular, note the use of background:<<colour background>>;. This automatically applies the current page background color whenever you choose a different palette (see $:/ControlPanel > Appearance > Palettes).
• You can add any other style attributes you like (e.g., border:1px solid) to make the appearance of your footer suit your tastes.
• An additional CSS rule is also applied to the standard .tc-story-river and .tc-sidebar-scrollable elements. This adjusts the bottom padding of those elements so that, when they are scrolled all the way to the bottom, they leave room enough room for your footer without overlapping.
• After the CSS definitions, the tiddler then defines the actual content that you want to appear in the footer, wrapped in the myPageFooter CSS class to apply the attributes you just defined above.

That’s it. Let me know how it goes…

enjoy,
-e

[nemo]

I too like the idea of a page footer!

Testing that, I see it appears under the tid’s in the river, but above tag menu’s from the sidebar.

I suspect there are multiple bits of juggling here, but seems to me it should be above the river at minimum, and ideally below the tag menus in the sidebar (tag menus from within tids in the river appear on top, as part of the tid, which is fine)

[EricShulman]

When I try this on TiddlyWiki.com, the footer appears

• above the tids in the river
• below the tag dropdowns in the river
• above the tag dropdowns in the sidebar

My intention was that the footer should always appear above all other elements (including all tag dropdowns). To make this happen, try adding z-index:5000; to the attributes of the .myPageFooter CSS class definition.

If you’ve made any customizations to the $:/tags/PageTemplate tiddlers, you might also need to make sure that the MyPageFooter tiddler is always the last item in the $:/tags/PageTemplate list. You can check this by click on the $:/tags/PageTemplate tag “pill” to view the list. Then, you can use drag-and-drop to move MyPageFooter to the end of that list.

-e

[myfta]

@EricShulman

My intention was that the footer should always appear above all other elements (including all tag dropdowns). To make this happen, try adding z-index:5000; to the attributes of the .myPageFooter CSS class definition.

I did need to add that z-index attribute to get it to come to the top.

That’s pretty close to what I had imagined.

There is still one issue though. If the tiddler that is displayed is longer than the screen height the last part remains under the new footer. I can sort of fiddle it by adding a couple of <br><br> at the end of the tiddler!

[Springer]

@EricShulman

\define myFooterHeight() 5em
<style>
.myPageFooter
{
   position:fixed;
   bottom:0;
   left:0;
   width:100vw;
   height:<<myFooterHeight>>;
   background:<<colour background>>;
   border:1px solid;
}
.tc-story-river, .tc-sidebar-scrollable
{
   padding-bottom:calc(<<myFooterHeight>> + 2em);
}
</style>
<div class="myPageFooter">
This is my page footer content
</div>

While the remaining worry @myfta has seems to be related to zoomin view (about which I’ve not tried to learn enough to troubleshoot), one other slight z-index problem is that the red tab for open draft tiddlers would be rendered behind this z-index:5000; footer (so, they would not be seen).

To the style section one could add the kluge:

.tc-drafts-list {z-index: 5001;}

[myfta]

Yes, as @Springer hints the issue I have does seem to relate to the Zoomin theme. It needs to scroll a littler further to display the page background below the tiddler.

Perhaps there is a Zoomin expert out there …?

[Springer]

Take with a grain of salt, because I’m just poking around (not a regular user of zoomin):

You can just add extra padding to the bottom of tiddlers when they’re in zoomin mode, in order to make sure they can scroll up enough to read the content that was getting stuck under your footer:

body.tc-body .tc-page-container.tc-page-view-zoomin .tc-tiddler-frame {
		width: 100%;
		width: calc(100% - 42px);
        padding-bottom: 8em;
	}

Surely 8em is too much. But you can make sure that works, then adjust as needed.

I realize this isn’t optimal in terms of aesthetics, because even shorter tiddlers will get that extra blank ribbon at the inside bottom area. But in zoomin mode I imagine this isn’t really getting in the way of anything. (Alas, adding margin rather than padding doesn’t seem to be helping, at least with my level of css hackery.)

[myfta]

@Springer

You can just add extra padding to the bottom of tiddlers when they’re in zoomin mode

I think you are on the right track, but this is having the effect of extending the tiddler rather than adding a margin (in the background color). That would be preferred as you can see the tiddler has ended rather than wondering if there was more hidden.

[Springer]

@myfta

adding a margin (in the background color)… would be preferred

Agreed. I tried a few things without success. And that’s where I didn’t have time/determination enough to get to the bottom of how zoomin handles templates and css for that single-tiddler story river. I do hope a zoomin connoisseur can step in and help!

[myfta]

I have tried inspecting the differences between Classic and Zoomin. Whilst I cannot locate the relevant CSS it seems to be a problem that Zoomin is not allowing a margin after the single tiddler is displayed and just runs the tiddler to the end of the screen, i.e. the story-river comes to an abrupt end.

[Brian_Radspinner]

The Zoomin page view gives all of the Story River tiddlers position: absolute; which takes them out of the normal flow. That’s why the Story River doesn’t wrap around them anymore.

To add some extra space below the tiddler, you can try adding an :after CSS element to the tc-tiddler-frame. Here’s a starting point, to see if you can get the effect you want…

.tc-tiddler-frame::after {
    content:" ";
    position: relative;

    height: 5em; 
    bottom: -8em;
    margin-top: -6em;

    display: block;
    width: 100%;

    background-color: #ff00ff26;   
}

This feels fairly hack-ish, but seems to get the job done.

Adjust the following values:

    height: 5em; 
    bottom: -8em;
    margin-top: -6em;

Once you figure out a combination for the desired spacing, you can remove the background-color to just have empty space.

[myfta]

Your solution works ‘out the box’ for me! Thank you.