Hide Edit/Delete/More Buttons for Specific Tiddlers

[Mohammad]

I have selection of tiddlers (like all shadows, all tagged with public, Tiddler Commander, Tasks Explorer, HelloThere, …)

I like to hide the below viewtoolbars buttons ONLY for my selection (not other tiddlers)

• edit button
• delete button
• more button

My selection is long and I don’t want to manually add CSS stuff for each of them!

How can I achieve this using the smallest WikiText/CSS/Settings or any other simple method?

[Mohammad]

Oh, I found the solution. Thank you @telumire

The trick with CSS in TiddlyWiki?

Here’s a neat css trick to shorten all of these css rules : using the :is selector [data-tiddler-title="{{!!title}}"] :is(table, th, td) { property:property-value; } :is([data-tiddler-title^=prefix],[data-tiddler-title$=suffix],[data-tiddler-title*=elloThe] ) div{ ... }

[TW_Tones]

I wonder if it would be possible to do the same thing by creating a custom class that one provides to the tiddlers class field?

• I expect not, but it would make sense if such settings could be applied directly to the tiddlers on which we want it applied, so there is no need to edit a seperate tiddler, And they can be applied cumulatively
• We could also use the cascade mechanism perhaps to have an object-type = page which gives a tiddler without “edit” and change buttons, perhaps even a different appearance.
• Being able to choose which button to include would be better than which to exclude?

[TW_Tones]

@Mohammad could you please share the code you used to Hide the Edit/Delete/More Button here for future visitors to this Topic?

• Then it will contain the answer in addition to the Question

[twMat]

I get this to work

[data-tiddler-title="{{!!title}}"] :is(
 .tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fmore-tiddler-actions,
 .tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fedit,
 .tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fdelete
 ){
 background:red !important;
}

[Mohammad]

The code @twMat shared is the answer. I use a $list widget to do so. For example to hide buttons on my default tiddlers, I use

<$list filter="[tag[start]]">
[data-tiddler-title="{{!!title}}"] :is(
button.tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fmore-tiddler-actions,
button.tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fedit,
button.tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fdelete
 ){
display:none;
}
</$list>

NOTE: All credits go to @telumire and @twMat for this nice solution.
I will later write a Tips&Tricks post with more examples.

[TW_Tones]

We should add how to get the correctly formatted title.
%24%3A%2Fcore%2Fui%2FButtons%2Fedit = $:/core/ui/Buttons/edit

[telumire]

You can optimize this a bit more by using two :is selector :

\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline html

:is(<$list filter="[tag[start]]">[data-tiddler-title="{{!!title}}"],</$list>) 

:is(
button.tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fmore-tiddler-actions,
button.tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fedit,
button.tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fdelete
 ){
display:none;
}

That way you only repeat the selector for the titles

E.g:

Optimized

Original

Even better: since you are using a tag for the styling, you dont need a list widget, instead you can use an attribute selector:

[data-tags*="start"] :is(
button.tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fmore-tiddler-actions,
button.tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fedit,
button.tc-btn-\%24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fdelete
 ){
display:none;
}

EDIT: Using EricShulman’s code to improve readability

[data-tags*="start"] :is(
<$list filter="more-tiddler-actions edit delete">
<$text text={{{ button.tc-btn-$:/core/ui/Buttons/[{!!title}]+[join[]encodeuricomponent[]search-replace:g[%],[\%]]}}}/>,
</$list>
 ){
display:none;
}

[TW_Tones]

I was just creating a button to convert a given title such as $:/core/ui/Buttons/edit to %24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fedit so it can be used in the is selector.

• How can we do this conversion in TiddlytWiki, what are the rules?

[Edited] Here is a quick button to copy the title with the correct encoding to generate “button.tc-btn-” tiddlername entries

Copy title encoded button.json (1011 Bytes)

[EricShulman]

@TW_Tones

I was just creating a button to convert a given title such as $:/core/ui/Buttons/edit to %24\%3A\%2Fcore\%2Fui\%2FButtons\%2Fedit so it can be used in the is selector.

• How can we do this conversion in TiddlytWiki, what are the rules?

Try this:

{{{ [<currentTiddler>encodeuricomponent[]search-replace:g[%],[\%]] }}}

-e

[TW_Tones]

thanks @EricShulman I updated my last reply with a simple working button