I would like to drop some options. What is the right way to customize this menu? Must I adjust the system tiddlers (there is no option in the control panel)?
There might be a better way, but the only thing I’ve used is to override a shadow tiddler, such as $:/core/ui/Buttons/new-journal-here and removing the tag $:/tags/ViewToolbar
2 Likes
Thank you, Scott, I’ve overridden my shadow tiddlers. Just wanted to make sure there is no other way to achieve a custom menu.
1 Like
Here’s another way, using just CSS without modifying any shadow tiddlers…
Create a tiddler (e.g., “HideMenuItems”), tagged with $:/tags/Stylesheet, containing:
*[class~="{{{ [[tc-btn-$:/core/ui/Buttons/new-journal-here]encodeuricomponent[]] }}}"]
{ display:none !important; }
How it works:
The classname for each menu item includes a reference to the corresponding TWCore shadow tiddler button definition (e.g., $:/core/ui/Buttons/new-journal-here) with an added prefix of “tc-btn-”.
However, these shadow tiddler titles include characters that are not allowed in CSS selectors such as $, :, and /, so we use “filtered transclusion” syntax (the tripled curly braces) to “uri encode” the classname (e.g., “tc-btn-%24%3A%2Fcore%2Fui%2FButtons%2Fnew-journal-here”), which makes it usable in a CSS selector.
To hide several menu items (e.g., all the “new …” menu items), you can write something like this:
\define items() new-tiddler new-journal new-image new-here new-journal-here clone
<$list filter="[enlist<items>addprefix[tc-btn-$:/core/ui/Buttons/]encodeuricomponent[]]">
*[class~="<<currentTiddler>>"] { display:none !important; }
</$list>
where “items” is a space-separated list of button names. The $list widget then takes each item in this list, adds the tc-btn-$:/core/ui/Buttons/ prefix, uri encodes the classname and then uses that classname (referenced within the $list widget as <<currentTiddler>) to hide the item.
enjoy,
-e
1 Like
I like this technique a lot, and have used it before. I’m surprised I didn’t consider it this time.
My recommended version is very slightly different:
.tc-drop-down button[class~="{{{ [[tc-btn-$:/core/ui/Buttons/new-journal-here]encodeuricomponent[]] }}}"]
{ display:none; }
This removes the !important annotation from the CSS. I avoid it as much as humanly possible.
Instead this uses a selector which will be higher in the CSS cascade than the existing TW rules.
I use this technique to hide buttons in various places that aren’t in the ViewToolbar’s “more” dropdown, such as the Sidebar PageControls and Sidebar Tools tab. It also works if you’ve used the $:/ControlPanel > Appearance > Toolbars > ViewToolbar settings to move ViewToolbar items from the “more” dropdown so they appear directly in the tiddler ViewToolbar.
I also define two custom CSS classnames – .authortools and .readertools – that can be used wrap any wikitext content based on the current “readonly” state ($:/config/TiddlyTools/ReadOnly) of the TiddlyWiki.
See TiddlyTools/Stylesheet/ReadOnly for my complete solution, which includes a toolbar/topbar button for on-the-fly toggling of “read-only” mode.
-e
I choose to use multiple selectors for those cases, as I detest !important. But your mileage may vary.
1 Like
Thank you, Eric, this seems to be a more elegant solution. I will try it out in my test environment first and then let you know if it works. I’m still not very experienced and don’t want to crash my live wiki.
Thank you Scott, I like your input because CSS, in comparison to TW workarounds, is something I’m very accomplished in!
1 Like
Can I just ask has the options Settings > Appearance > Toolbars check appears on toolbars unchecked is behind the more button!