How to make a sticky editor-toolbar how to add your css and js?

#1

How do I make a dockable button bar menu when editing, in the code this bar <div “class = tc-editor-toolbar”>
I haven’t yet learned wiki syntax when editing a long text I have to scroll up, press the right button scroll down to realize it was the wrong button scroll back up.
For the clever person, this implementation of a function in a couple of lines of code which will greatly improve the experience of interacting with this great tool.
You could, for example, add a checkbox in this panel with a checkmark to fasten to unfasten. But if the developers think that this is not such a necessary feature, it’s worth implementing. Please tell me where and how you can add your css and js code?
English is not my first language, used the translator.
So please forgive me for this incoherent text.

Translated with www.DeepL.com/Translator (free version)

#2

Have a look at this thread that is on the same topic and discusses potential solutions:

#3

Yes, I read it before creating the topic, there is indeed a solution

.tc-tiddler-preview {
  overflow: unset;
}
.tc-editor-toolbar {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 0px;
    background: ##1a1a1a;
    z-index: 500;
}

And it works.
But I unfortunately did not figure out how to embed css and created a topic, the solution I found in the documentation. https://tiddlywiki.com/static/Using%20Stylesheets.html
Create a note with $:/tags/Stylesheet

Thank you so much for such a quick response
The TiddlyWiki is awesome!
TiddlyWiki is amazing stuff!

3 Likes
#4

I adjust the top to work with notebook theme.

.tc-tiddler-preview {
  overflow: unset;
}
.tc-editor-toolbar {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 95px;
    z-index: 500;
    background:#e8e6e6;
}