I’d like to share my small collection of TiddlyWiki tweaks, settings, styles, palettes etc. that I use across my wikis. These are mostly small modifications that would not make much sense as plugins, but they took enough time to make/adjust/find that I want to keep them for future reference and share. There is a short explanation or simple usage example for each of them.
A couple ones that I’d like to highlight, I think the most universally useful, are:
Extended search: includes missing tiddlers and tags.
Minimalistic star/favorites system.
Caption displayed next to title.
Graphite palettes, inspired by IBM palette.
Editor toolbar buttons: highlight, translinkify (wrap title in inline translink macro), comment HTML, comment CSS.
View toolbar button to toggle $:/tags/Stylesheet tag.
Of course all questions and feedback are welcome. I hope it is friendly enough to new users, who are looking for the solutions I once looked for. The current design is a compromise between conveniently storing the tweaks for my own use, and making this useful and understandable to others.
Below is the full list of the tweaks with short descriptions. I’ll update this list when I change or add something relevant. It’s here only to make it findable on the forum, it is best viewed on the wiki itself. All tweaks are also catalogued in links.tiddlywiki.org.
Details macro: .details macro is a simple wrapper for <details> html element. Works only with inline content, I use it mainly for images. A more advanced solution by Thomas Elmiger is available as Details Widget plugin.
Direct icon: Value of the icon field is directly used as an icon (when viewing the tiddler and in tag pill) if it is not a title of an existing tiddler. Useful for quick assigning of emojis as icons – simply type the emoji, or any other character(s), in the icon field. Idea by Anthony Muscio, updated to 5.2.7 core code.
Extended search: Modifies the default search (in sidebar and in editor’s create link modal): Title matches also search caption, All matches searches all fields and includes tags and missing tiddlers.
List filter macros: .list-filter and .list-filter-details are wrapper macros for the core macro list-links. The filter itself, results count, and an optional comment are displayed before the list-links results; in -detals variant the results are collapsed by default inside a <details> element.
Pseudo zoom for TiddlyDesktop: Keyboard shortcuts ctrl/cmdshift+/-/0 to pseudo zoom in/out/reset zoom in TiddlyDesktop.
Review button: ViewToolbar button that sets field reviewed to current time, without changing modified time.
Simple star: Simple mechanism for starred (favorite) tiddlers: ViewToolbar button to toggle Star tag and Starred tab in SideBar. More advanced solution by Mohammad Rahmani is available as Favorites plugin.
Blend image class: blend utility class for images – blends B&W schematics with tiddler background, inverts colors by dark palette.
Center story style: Narrow and center aligned story river, with wider tiddlers in edit mode, for use with Fluid story, fixed sidebar layout. Adapted from tzk by Soren Bjornstad.
CodeMirror style: Custom background color of selected text in CodeMirror editor.
Embedded fonts: A collection of embedded fonts ready for use in TiddlyWiki: IBM Plex Sans, IBM Plex Mono, Source Sans Pro*, Inconsolata*. * From tzk by Soren Bjornstad.
Text input style: Text input elements look cleaner, consistent across browsers, and use primary border color when focused. From Palette Manager plugin by Mario Pietsch.
Title with caption: Caption is displayed next to the title of an opened tiddler.
Wow, vilc! This is wonderful. Thank you so much. I will be using several of these!
Question: is there a way to have the titles displayed before the symbols in the popup? That is, when I type ::, I would like to see (star) on the left and ★ on the right in the popup.
The hint will display as (star) ★. Similarly, you can change it to star: ★ or star - ★.
Go to Control Panel > Evidently Cube > Auto Complete > edit :: trigger > change Display Filter to the snippet above. Or import this modified trigger: $ _EvidentlyCube_Trigger_Symbol.json (605 Bytes) (modified to display as (star) ★).
YES! That is way more readable for me. I added a couple longer items like <span class=""></span> and details, so it is easier for me to look down the left side and see the names than to choose from the symbols or hunt for the unaligned names to the right.
I have just added a new functional tweak: Pseudo zoom for TiddlyDesktop. It adds keyboard shortcuts ctrl/cmdshift+/-/0 to pseudo zoom in/out/reset zoom in TiddlyDesktop, similarly to how it works in the browsers (not the same unfortunately, hence “pseudo”).
If any experienced user would have couple minutes to spare, I would be very thankful for feedback on how I export the necessary data from wilk-tweaks.tiddlyhost.com to wilk-links.tiddlyhost.com (containing data for links.tiddlywiki.org). I have a tiddler that generates JSON-formatted text with the desired data, then copy the rendered text, save it as JSON file, and import in my links wiki. It works, so I’m not really asking for help. I don’t need to update it too often, so I don’t need much more automation either. I’m just wondering if this approach is a clever hack or a dumb unnecessary workaround, and if there is some obvious easier path that I have overlooked.
Hello Mateusz, I wonder if Center Story could be tweaked at all to accommodate for the preview function in the editor?
I’ve been a loyal user for a while but I had to stop using it, as I’m now frequently making more complex tiddlers and don’t want to edit-save-edit-save to see my output.
Thanks to @yan above for bumping the thread. Somehow it escaped me earlier when I skimmed through the forum content that was posted before I joined the forum.
Nice collection of tweaks and great, very pleasant to read documentation.
Now, a question: the tweaks are recommended to be installed via drag-and-drop. What to do when drag-and-drop is tricky - like on mobile?
I have tried to apply by analogy my older knowledge about installing plugins (export the plugin tiddler as JSON, then import it manually), but something doesn’t go well.
For example, I want wilk-tweaks — TW tweaks, settings, styles, palettes. in my wiki and I can’t use drag-and-drop. That tiddler suggests to drag-and-drop the green $:/wilk/tweaks/CopyCodeButton button. If I click on it, a list opens up:
I have tried to export just the $:/wilk/tweaks/CopyCodeButton tiddler, but the resulting .json file contains only data from that tiddler, not the other two as well. How to do it the right way? Manually saving each tiddler is not scalable if a tweak would contain more tiddlers.
@yan something must have changed in the recent TW versions, the uneven division of the editor/preview doesn’t work for me too. Thanks for pointing out. I have updated the tweak just now by commenting out the problematic rules.
I will try to make it work with current TW. If anyone has an idea why
You would have to do advanced search with filter [[$:/wilk/tweaks/CopyCodeButton]tagging[]] and export the results. This is what dragging a tag pill does in TW – move all the tiddlers tagged with the tag, but not the tag itself.
Because of this and many other inconveniences of tags compared to plugins, and because self-hosting a plugin library is now easy, I have created wilk-plugin-library.tiddlyhost.com, discussed this thread.
I’m planing to eventually review all the tweaks and remake them as plugins, to make them easier to use by me and others. Some have already made their way there, including the Copy Code Button that you mentioned.
Hi @yan, is the css that you shared yours or mine? I can’t find it anywhere in my wiki and can’t remember setting up anything like this.
All the tweaks should be mostly independent of each other, especially the palettes – these are just palettes. I use the Graphite palettes in some of my other wikis with no issues. And I don’t use CodeMirror in my wikis anymore.
I would perhaps try importing just the single palette tiddler that you need to your wiki. The rest of tiddlers that I keep under the graphite palette tag are helpers for using the IBM palette colors (a dictionary with the colors and AutoComplete trigger to easily type them, as well as the CodeMirror CSS), which are not at all necessary for the palettes to work. Perhaps I should describe it all clearer.
