Sidebar UI Footer

Authoring Twine
1

Please specify version and format if asking for help, or apply optional tags above:
Twine Version:2.3.13
Story Format: Sugarcube 2.34.1

Ok this is probably gonna be a really stupid easy fix but I, in my infinite noobitude at Twine and coding cannot for the life of me figure it out.

How can I add a footer specifically to the bottom of my sidebar? like, say i want to add a footer that lists the version number of my project that always appears on the sidebar at the bottom, beneath all the menu buttons?

I Know how to make custom buttons with StoryMenu, How to add custom text to the sidebar with StoryCaption

but for the life of me i cannot figure out how to get text to appear at the bottom of the Sidebar underneath the buttons that stays down there like a footer even when the window is resized for people with different screen sizes.

2

There isn’t a built-in way to do that, but it’s not too difficult to do once you know the trick.

First, add something like this to your Stylesheet section:

#ui-bar {
    overflow: hidden auto;
}
#ui-bar-body {
    height: auto;
    min-height: -webkit-calc(100% - 120px);
    min-height: -moz-calc(100% - 120px);
    min-height: calc(100% - 120px);
}
#uifooter {
	position: relative;
	width: -webkit-calc(100% - 60px);
	width:	  -moz-calc(100% - 60px);
	width:		   calc(100% - 60px);
	padding: 12px;
}
#ui-bar.stowed #uifooter {
	display: none;
}

and then add something like this to your JavaScript section:

$("#ui-bar").append('<div id="uifooter"><center>(Footer content here.)</center></div>');

Now it should display whatever you put there for the footer content at the bottom of the UI bar.

Enjoy! :slight_smile:

3

Thanks for responding!

Unfortunately, i tried adding the above code and it didn’t seem to do anything :frowning:

The only thing I have in my stylesheets already that effect the UI is a popover javascript to make an Appearance page appear oveer the current passage instead of going to a new one, one to add a background image to the ui (Which i tried turning off to make sure the footer wasnt appearing behind it; it wasnt.) and this to give a bit of space between custom buttons.

ul#menu-story {
border: none;
}

ul#menu-story li {
margin-top: 1rem;
border: 1px solid #444;

4

Ah, sorry about that. I forgot that I had some other CSS that needed to be there as well.

I’ve updated the previous post, but be aware that you might need to modify the “120px” parts of the CSS depending on how tall the footer is.

Please let me know if you have any additional problems with it. :slight_smile:

5

That worked flawlessly and is EXACTLY what Ii was looking for

Thank you so much for your help <3