Stop Classic story view from covering x px from the top.

[Sapphireslinger]

I am using Classic Story View with Vanilla Basic Theme (Blanca palette).

The Story View scrolls completely over my fixed Page Toolbar at the top of the screen, so that it is useless as a fixed toolbar (since I have to scroll back up to the top to see it anyway).

How do I tell the top boundary of the story view to stop at, say, 30 px from the top?

[Saq Imtiaz]

$:/ControlPanel -> Appearance -> Theme Tweaks -> Story top position

[Sapphireslinger]

Thank you for your suggestion. Unfortunately, I aleardy tried that, and it didn't work. I changed the 30 px to 300 px. The result: Tiddlers still scroll entirely up over the viewable part of the screen (And as always, I just see the covered up toolbar poking out the left side of the Story View, but the one icon visible is not clickable.) Only when I scroll all the way to the top does the entire "fixed" toolbar come into view, and I see that there is indeed a 300 px gap between the first tiddler and the toolbar.

[Sapphireslinger]

I just found this on the tiddlywiki website:

<quote>As part of navigating to a tiddler, TiddlyWiki scrolls the page so that the top of the tiddler lines up with the top of the browser window. This means that the upper part of tiddlers can be obscured when using custom position:fixed toolbars at the top of the window.

To adjust the scroll position to allow for the toolbar, add the CSS class tc-adjust-top-of-scroll to the toolbar. TiddlyWiki's scrolling mechanism will then dynamically adjust the scroll position by the height of that element. </quote>

How do I "add the CSS class tc-adjust-top-of-scroll to the toolbar"?

Do I make a tiddler, tag it with tags/stylesheet, and put something like this inside:

.tc-adjust-top-of-scroll {top: 30px}

[BurningTreeC]

Hi @Sapphireslinger, have you tried adding the class "tc-adjust-top-of-scroll" to your top Page Toolbar?

BTC

[BurningTreeC]

@Sapphireslinger, it would be helpful if you showed how your Page Toolbar looks like... And the code it uses

BTC

[Sapphireslinger]

I'm so sorry, I don't know what the name of the Page Toolbar tiddler is.

I know I should go to "More" and then click on either "Shadows" or "System" but I don't know how to find the Page Toolbar tiddler.

[BurningTreeC]

Maybe with a Screenshot we can tell you more

[Brian Radspinner]

Whatever tiddler you have that holds the top bar, give it the class of "$:/tags/PageTemplate". The height of that tiddler should be the new scroll margin.

An alternative is to have a tiddler just made to be that margin:

Put the following in the body of a new tiddler...

<div class="tc-adjust-top-of-scroll" style="height:30px;position:absolute;left:0;right:0; top:0;visibility:hidden;">This DIV is just here to give a height for the top bar, and apply the TC-ADJUST-TOP-OF-SCROLL class for TiddlyWiki to have tiddler title bars not end up behind the top bar. It won't be seen on the page.</div>

[Brian Radspinner]

Got things turned around...the "PageTemplate" class will keep the tiddler separate from the Story River, the "tc-adjust-top-of-scroll" class adjusts the margin. Tag the new tiddler with "$:/tags/PageTemplate".

[Sapphireslinger]

@BurningTreeC

Is it my $:/core/ui/TopBar/menu tiddler?

Here's what it says:

<$reveal state="$:/state/sidebar" type="nomatch" text="no">
<$button set="$:/state/sidebar" setTo="no" tooltip={{$:/language/Buttons/HideSideBar/Hint}} aria-label={{$:/language/Buttons/HideSideBar/Caption}} class="tc-btn-invisible">{{$:/core/images/chevron-right}}</$button>
</$reveal>
<$reveal state="$:/state/sidebar" type="match" text="no">
<$button set="$:/state/sidebar" setTo="yes" tooltip={{$:/language/Buttons/ShowSideBar/Hint}} aria-label={{$:/language/Buttons/ShowSideBar/Caption}} class="tc-btn-invisible">{{$:/core/images/chevron-left}}</$button>
</$reveal>

Is it my $:/core/ui/PageTemplate

Here's what it says:

\whitespace trim
\define containerClasses()
tc-page-container tc-page-view-$(storyviewTitle)$ tc-language-$(languageTitle)$
\end
\import [[$:/core/ui/PageMacros]] [all[shadows+tiddlers]tag[$:/tags/Macro]!has[draft.of]]

<$set name="tv-config-toolbar-icons" value={{$:/config/Toolbar/Icons}}>

<$set name="tv-config-toolbar-text" value={{$:/config/Toolbar/Text}}>

<$set name="tv-config-toolbar-class" value={{$:/config/Toolbar/ButtonClass}}>

<$set name="tv-enable-drag-and-drop" value={{$:/config/DragAndDrop/Enable}}>

<$set name="tv-show-missing-links" value={{$:/config/MissingLinks}}>

<$set name="storyviewTitle" value={{$:/view}}>

<$set name="languageTitle" value={{{ [{$:/language}get[name]] }}}>

<div class=<<containerClasses>>>

<$navigator story="$:/StoryList" history="$:/HistoryList" openLinkFromInsideRiver={{$:/config/Navigation/openLinkFromInsideRiver}} openLinkFromOutsideRiver={{$:/config/Navigation/openLinkFromOutsideRiver}} relinkOnRename={{$:/config/RelinkOnRename}}>

<$dropzone enable=<<tv-enable-drag-and-drop>>>

<$list filter="[all[shadows+tiddlers]tag[$:/tags/PageTemplate]!has[draft.of]]" variable="listItem">

<$transclude tiddler=<<listItem>>/>

</$list>

</$dropzone>

</$navigator>

</div>

</$set>

</$set>

</$set>

</$set>

</$set>

</$set>

</$set>

[BurningTreeC]

Hi @Sapphireslinger, no it's neither your TopBar/Menu or your PageTemplate. A screenshot of your Top Bar would be very helpful

BTC

[Sapphireslinger]

[Sapphireslinger]

Sorry the design is so lame. It's so I can use it on my smartphone as well as my desktop computer. When using this on my smartphone the right hand column tiddlers (I believe they are all tagged as sidebar segments) float to the top and do NOT cover the Page Toolbar.

The left-hand column is the story view tiddlers. On my smartphone, they all show up below the right-hand column tiddlers.

[Sapphireslinger]

Here you can see the Page Toolbar covered up when the Story View was scrolled upwards.

[Sapphireslinger]

@Brian Radspinner

I made a tiddler tagged with $:/tags/PageTemplate and put this in it: <div class="tc-adjust-top-of-scroll" style="height:30px;position:absolute;left:0;right:0; top:0;visibility:hidden;">This DIV is just here to give a height for the top bar, and apply the TC-ADJUST-TOP-OF-SCROLL class for TiddlyWiki to have tiddler title bars not end up behind the top bar. It won't be seen on the page.</div>

I then saved my Tiddlywiki, but nothing changed, tiddlers still scrolled over the toolbar.

[Sapphireslinger]

It's late where I am, I'll have to come back to this thread tomorrow. Thank you so much for all the suggestions.

[TW Tones]

I just saw this but I think this may be what you are looking for.

$:/themes/tiddlywiki/vanilla/sticky and set Top to 40px as an example for the Menu bar plugin.

Or create a separate stylesheet with this override.

I think the menu bar plugin now includes this setting internally.

Regards

Tones

[Sapphireslinger]

@ TW Tones

I discovered that yesterday, and it made sticky the non-sticky Edit Toolbar I'd been tolerating for a year : ) but it still didn't make the Page Toolbar sticky : (

The Story View keeps scrolling over it and rendering it unusable.

[BurningTreeC]

Hi @Sapphireslinger, maybe this is a z-index issue and you could try adding a high (enough) z-index to your top toolbar

BTC

[Sapphireslinger]

Maybe its the z-index of my .tc-story-river I should be modifying?

Here are the contents of my $:/themes/tiddlywiki/vanilla/sticky

.tc-tiddler-title { position: -webkit-sticky; position: -moz-sticky; position: -o-sticky; position: -ms-sticky; position: sticky; top: 40px; background: #ffffff; z-index: 500; } .tc-story-river .tc-tiddler-frame:nth-child(100n+1) { z-index: 199; } .tc-story-river .tc-tiddler-frame:nth-child(100n+2) { z-index: 198; } .tc-story-river .tc-tiddler-frame:nth-child(100n+3) { z-index: 197; } .tc-story-river .tc-tiddler-frame:nth-child(100n+4) { z-index: 196; } .tc-story-river .tc-tiddler-frame:nth-child(100n+5) { z-index: 195; } .tc-story-river .tc-tiddler-frame:nth-child(100n+6) { z-index: 194; } .tc-story-river .tc-tiddler-frame:nth-child(100n+7) { z-index: 193; } .tc-story-river .tc-tiddler-frame:nth-child(100n+8) { z-index: 192; } .tc-story-river .tc-tiddler-frame:nth-child(100n+9) { z-index: 191; } .tc-story-river .tc-tiddler-frame:nth-child(100n+10) { z-index: 190; } .tc-story-river .tc-tiddler-frame:nth-child(100n+11) { z-index: 189; } .tc-story-river .tc-tiddler-frame:nth-child(100n+12) { z-index: 188; } .tc-story-river .tc-tiddler-frame:nth-child(100n+13) { z-index: 187; } .tc-story-river .tc-tiddler-frame:nth-child(100n+14) { z-index: 186; } .tc-story-river .tc-tiddler-frame:nth-child(100n+15) { z-index: 185; } .tc-story-river .tc-tiddler-frame:nth-child(100n+16) { z-index: 184; } .tc-story-river .tc-tiddler-frame:nth-child(100n+17) { z-index: 183; } .tc-story-river .tc-tiddler-frame:nth-child(100n+18) { z-index: 182; } .tc-story-river .tc-tiddler-frame:nth-child(100n+19) { z-index: 181; } .tc-story-river .tc-tiddler-frame:nth-child(100n+20) { z-index: 180; } .tc-story-river .tc-tiddler-frame:nth-child(100n+21) { z-index: 179; } .tc-story-river .tc-tiddler-frame:nth-child(100n+22) { z-index: 178; } .tc-story-river .tc-tiddler-frame:nth-child(100n+23) { z-index: 177; } .tc-story-river .tc-tiddler-frame:nth-child(100n+24) { z-index: 176; } .tc-story-river .tc-tiddler-frame:nth-child(100n+25) { z-index: 175; } .tc-story-river .tc-tiddler-frame:nth-child(100n+26) { z-index: 174; } .tc-story-river .tc-tiddler-frame:nth-child(100n+27) { z-index: 173; } .tc-story-river .tc-tiddler-frame:nth-child(100n+28) { z-index: 172; } .tc-story-river .tc-tiddler-frame:nth-child(100n+29) { z-index: 171; } .tc-story-river .tc-tiddler-frame:nth-child(100n+30) { z-index: 170; } .tc-story-river .tc-tiddler-frame:nth-child(100n+31) { z-index: 169; } .tc-story-river .tc-tiddler-frame:nth-child(100n+32) { z-index: 168; } .tc-story-river .tc-tiddler-frame:nth-child(100n+33) { z-index: 167; } .tc-story-river .tc-tiddler-frame:nth-child(100n+34) { z-index: 166; } .tc-story-river .tc-tiddler-frame:nth-child(100n+35) { z-index: 165; } .tc-story-river .tc-tiddler-frame:nth-child(100n+36) { z-index: 164; } .tc-story-river .tc-tiddler-frame:nth-child(100n+37) { z-index: 163; } .tc-story-river .tc-tiddler-frame:nth-child(100n+38) { z-index: 162; } .tc-story-river .tc-tiddler-frame:nth-child(100n+39) { z-index: 161; } .tc-story-river .tc-tiddler-frame:nth-child(100n+40) { z-index: 160; } .tc-story-river .tc-tiddler-frame:nth-child(100n+41) { z-index: 159; } .tc-story-river .tc-tiddler-frame:nth-child(100n+42) { z-index: 158; } .tc-story-river .tc-tiddler-frame:nth-child(100n+43) { z-index: 157; } .tc-story-river .tc-tiddler-frame:nth-child(100n+44) { z-index: 156; } .tc-story-river .tc-tiddler-frame:nth-child(100n+45) { z-index: 155; } .tc-story-river .tc-tiddler-frame:nth-child(100n+46) { z-index: 154; } .tc-story-river .tc-tiddler-frame:nth-child(100n+47) { z-index: 153; } .tc-story-river .tc-tiddler-frame:nth-child(100n+48) { z-index: 152; } .tc-story-river .tc-tiddler-frame:nth-child(100n+49) { z-index: 151; } .tc-story-river .tc-tiddler-frame:nth-child(100n+50) { z-index: 150; } .tc-story-river .tc-tiddler-frame:nth-child(100n+51) { z-index: 149; } .tc-story-river .tc-tiddler-frame:nth-child(100n+52) { z-index: 148; } .tc-story-river .tc-tiddler-frame:nth-child(100n+53) { z-index: 147; } .tc-story-river .tc-tiddler-frame:nth-child(100n+54) { z-index: 146; } .tc-story-river .tc-tiddler-frame:nth-child(100n+55) { z-index: 145; } .tc-story-river .tc-tiddler-frame:nth-child(100n+56) { z-index: 144; } .tc-story-river .tc-tiddler-frame:nth-child(100n+57) { z-index: 143; } .tc-story-river .tc-tiddler-frame:nth-child(100n+58) { z-index: 142; } .tc-story-river .tc-tiddler-frame:nth-child(100n+59) { z-index: 141; } .tc-story-river .tc-tiddler-frame:nth-child(100n+60) { z-index: 140; } .tc-story-river .tc-tiddler-frame:nth-child(100n+61) { z-index: 139; } .tc-story-river .tc-tiddler-frame:nth-child(100n+62) { z-index: 138; } .tc-story-river .tc-tiddler-frame:nth-child(100n+63) { z-index: 137; } .tc-story-river .tc-tiddler-frame:nth-child(100n+64) { z-index: 136; } .tc-story-river .tc-tiddler-frame:nth-child(100n+65) { z-index: 135; } .tc-story-river .tc-tiddler-frame:nth-child(100n+66) { z-index: 134; } .tc-story-river .tc-tiddler-frame:nth-child(100n+67) { z-index: 133; } .tc-story-river .tc-tiddler-frame:nth-child(100n+68) { z-index: 132; } .tc-story-river .tc-tiddler-frame:nth-child(100n+69) { z-index: 131; } .tc-story-river .tc-tiddler-frame:nth-child(100n+70) { z-index: 130; } .tc-story-river .tc-tiddler-frame:nth-child(100n+71) { z-index: 129; } .tc-story-river .tc-tiddler-frame:nth-child(100n+72) { z-index: 128; } .tc-story-river .tc-tiddler-frame:nth-child(100n+73) { z-index: 127; } .tc-story-river .tc-tiddler-frame:nth-child(100n+74) { z-index: 126; } .tc-story-river .tc-tiddler-frame:nth-child(100n+75) { z-index: 125; } .tc-story-river .tc-tiddler-frame:nth-child(100n+76) { z-index: 124; } .tc-story-river .tc-tiddler-frame:nth-child(100n+77) { z-index: 123; } .tc-story-river .tc-tiddler-frame:nth-child(100n+78) { z-index: 122; } .tc-story-river .tc-tiddler-frame:nth-child(100n+79) { z-index: 121; } .tc-story-river .tc-tiddler-frame:nth-child(100n+80) { z-index: 120; } .tc-story-river .tc-tiddler-frame:nth-child(100n+81) { z-index: 119; } .tc-story-river .tc-tiddler-frame:nth-child(100n+82) { z-index: 118; } .tc-story-river .tc-tiddler-frame:nth-child(100n+83) { z-index: 117; } .tc-story-river .tc-tiddler-frame:nth-child(100n+84) { z-index: 116; } .tc-story-river .tc-tiddler-frame:nth-child(100n+85) { z-index: 115; } .tc-story-river .tc-tiddler-frame:nth-child(100n+86) { z-index: 114; } .tc-story-river .tc-tiddler-frame:nth-child(100n+87) { z-index: 113; } .tc-story-river .tc-tiddler-frame:nth-child(100n+88) { z-index: 112; } .tc-story-river .tc-tiddler-frame:nth-child(100n+89) { z-index: 111; } .tc-story-river .tc-tiddler-frame:nth-child(100n+90) { z-index: 110; } .tc-story-river .tc-tiddler-frame:nth-child(100n+91) { z-index: 109; } .tc-story-river .tc-tiddler-frame:nth-child(100n+92) { z-index: 108; } .tc-story-river .tc-tiddler-frame:nth-child(100n+93) { z-index: 107; } .tc-story-river .tc-tiddler-frame:nth-child(100n+94) { z-index: 106; } .tc-story-river .tc-tiddler-frame:nth-child(100n+95) { z-index: 105; } .tc-story-river .tc-tiddler-frame:nth-child(100n+96) { z-index: 104; } .tc-story-river .tc-tiddler-frame:nth-child(100n+97) { z-index: 103; } .tc-story-river .tc-tiddler-frame:nth-child(100n+98) { z-index: 102; } .tc-story-river .tc-tiddler-frame:nth-child(100n+99) { z-index: 101; } .tc-story-river .tc-tiddler-frame:nth-child(100n+100) { z-index: 100; }

[BurningTreeC]

Hi @Sapphireslinger, I'm pretty sure you should add a higher z-index to your Top Toolbar

[Sapphireslinger]

Would anyone happen to know where the Top Toolbar resides in the empty.html available for download on Tiddlywiki.com?

If I knew where it was in the original Tiddlywiki, maybe I could look for it in mine.

[Sapphireslinger]

I have a tiddler I created last year and tagged with stylesheet that seems to be controlling the Page Toolbar / Top Toolbar, because when I untag it, the Page Toolbar / Top Toolbar disappears.

Here is the code:

.tc-page-controls {position: fixed; top: -15px; left:0; right:0; padding-left: 3px; z-index:500; background-color: white; }

[BurningTreeC]

Hi @Sapphireslinger, in that tiddler you can try to set the z-index from 500 to 850, maybe it helps

BTC

[Sapphireslinger]

I found something that works!

I saw that Ton Gerner in https://groups.google.com/g/tiddlywiki/c/VRP043rh2S8 told someone:

Have a look at http://tw5custom.tiddlyspot.com/
Click the bottom button in the left toolbar for information.

I imported the $:/_simple_toolbar tiddler found there and Voila! The instructions at the site were so clear that I:

1. changed the width to 100% make it horizontal instead of vertical

2. tweaked the easily found start and end positions to get it up to the top of the screen

3. editing the tiddler contents for my preferred set of buttons was so easy! (I used "buttons" keyword in search tabs "shadows" and "system" to find the buttons I wanted)

Observation: I noticed that my original toolbar appears to be on a bottom layer, the stream of opened tiddlers on a middle layer, and the new toolbar on a top layer of the wiki. That's how they slide over and under each other.

Now I would like to get rid of my original toolbar. I had a rather useless tiddler titled "EditorToolbar Fixed Position" which read

.tc-page-controls {position: fixed; top: -15px; left:0; right:0; padding-left: 3px; z-index:500; background-color: white; }

When I removed the tag $:/tags/Stylesheet from this tiddler, my original toolbar hopped back over to the tabs area of my wiki. How do I remove its visibility or turn it off altogether?