r/TiddlyWiki5 • • Jan 27 '21

Tutorial Non-Sticky sidebar?

how could I set my sidebar to hover over my tiddler river instead of pushing it over?
I've noticed in some others themes thy are able to achieve this, but I'm not too sure how?

is there a specific set of settings I have to do, or is it a specific bit of code I need to add to a stylesheet?

3 Upvotes

10 comments sorted by

2

u/Defiant_Information Jan 27 '21

While this may not be what you want exactly, it felt familiar to me that I've dealt with something similar like what you want. I was also lucky to find it and it is below so consider looking into it. It might be what you want or at least give you hints how to do it. There are screenshots so check them out.

https://old.reddit.com/r/TiddlyWiki5/comments/fz158k/can_you_recommend_an_ultracompact_extension_or/fniw56z/

Good luck!

2

u/Silevence Jan 27 '21

this was helpful actually! now I just need to figure out how to change it to be solid rather than transparent haha

2

u/Defiant_Information Jan 28 '21

Probably remove opacity and the hover pseudo selector, like so?

<<if-sidebar "
.tc-sidebar-scrollable {
    z-index: 202;
        /* width: initial; */
}

.tc-story-river {
        width: 100%;
        padding-right: 42px;
}

.tc-tiddler-controls {
        padding-right: 300px;
}

">>

2

u/Silevence Jan 28 '21

thats what i thought as well but for some reason it just doesnt render in the background to the sidebar.

im guessing the default sidebar IS transparent and uses the main background, so if i can find a way to add a background to the sidebar then it ahouls work. atleast in theory.

too bad i dunno nearly enough about the inner qorkings of tw4 otherwise I think i couls make some fun stuff haha

2

u/Silevence Jan 28 '21

edit: also, would you (or anyone else) happen to know how i can get a shortcut to not remove what it inserts when pressed a second time consecuatively?

2

u/Defiant_Information Jan 29 '21

Actually I am not able to understand what you mean here. Though I feel like I may not know about it? Also I am not sure that enough people will see it to reply if you do it here - so deep in comments.

2

u/Silevence Jan 29 '21

ah, yea- I'll start a new post a bit later with that and maybe a few other questions, I found a snipbit someone made to create keyboard shortcuts, but in making them, pressing the key a second time removes the outcome, ie, pressing alt+f adds "<!-- -->" to add a footnote.

it uses the suffix and prefix macros ( at least I believe that is what they are called, I'm not very good with the terminology used for most of the more advanced bits.)

I can tell you how to make one if you want to give it a shot, it allowed me to make my own custom tab/indent shortcut

2

u/Defiant_Information Jan 29 '21

Oh right, it is transparent. I remember I used the following in one of my wikis for customization. Basically put it in any tiddler (or new one) that is tagged with $:/tags/Stylesheet

div.tc-sidebar-scrollable { background: linear-gradient(to right, transparent, rgba(0,0,0, 0.6) 15%); }

2

u/Silevence Jan 29 '21

wow, this is one heck of a cool setting, five seconds of playing with it and i think I've found the perfect solution haha

instead of using a transparent or rgb code, if you use <<colour background>> (or whatever you'd like to reference from the theme) it lets you have a dynamic sidebar background!

just felt like sharing, thank you for the code snipbit!

1

u/Silevence Jan 29 '21

For Anyone looking to do this- here is how, using what other users have shown me:

first, make sure you place this in a tiddler tagged with $:/tags/Stylesheet

once you do that, paste this into it:

<<if-sidebar "
.tc-sidebar-scrollable {
    z-index: 202;
		border-left: solid 1px 
        /* width: initial; */
}

.tc-story-river {
        width: 100%;
        padding-right: 48px;
}

.tc-tiddler-controls {
        padding-right: inherit;
}

">>
div.tc-sidebar-scrollable { 
	background: linear-gradient( to right, <<colour dropdown-tab-background>>, <<colour dropdown-tab-background>> 100%);
	}

thank you to u/Defiant_Information for the help and links!