How to insert icons in the subtitle field

#1

Hello everyone.

Does anyone know how to put icons in the tiddlers subtitle? Specifically I want to put an icon before the Created and Modified dates.

I have tried modifying the tiddler $:/core/ui/ViewTemplate/subtitle/created and putting this, for example:

{{$:/core/images/stamp}} ''Creado el'' <$view field="created" format="date" template={{$:/language/Tiddler/DateFormat}}/> but it does not work.

I have seen on Soren’s wiki that he does it but he uses Fontawesome, I think, and I would like to do it with icons that I have.
If you know of any page that has them, it would also be worth it, so I’ll take a look.

Greetings and thank you.

#2

Did you tag your tiddler: $:/tags/ViewTemplate/Subtitle ?

1 Like
#3

Hello @Pmario.

Yes, the tiddler is labeled that way, but the icon does not appear…

#4

What you wrote works for me. But I did not have time to look into it too much. (I’ll come back later)

Anyway I remember that I did somethibg similar but i wrapped the icon in:
<button class="tc-btn-invisible"disabled>{{your icon}}</button>
Because it looked better

Oh, and I think I modified $:/core/ui/ViewTemplate/subtitle not $:/core/ui/ViewTemplate/subtitle/created

But I’m going from memory on mobile, when I’m on my desktop and can check I’ll come back to you

1 Like
#5

If you are in a version of tiddlywiki later than when the tag $:/tags/ViewTemplate/Subtitle was added, you simply create a tiddler containing what you wish to appear in the subtitle.

  • I am not sure why you would simply display an icon (that what the topic title asks), perhaps only display it when a particular condition is true on the current tiddler, so it tells you something about the tiddler.

When the $:/tags/ViewTemplate/Subtitle was introduced the following tiddlers also got the tag;

  • $:/core/ui/ViewTemplate/subtitle/modified
  • $:/core/ui/ViewTemplate/subtitle/modifier

You can either use the tag pill and change the order of the subtitle tiddlers with drag and drop. Or use list-before or list-after fields in your tiddler tagged $:/tags/ViewTemplate/Subtitle

  • If you use a list-before either a tiddler name or leave blank to be added to the front
  • If you use a list-after either a tiddler name or leave blank to be added to the end

Dont modify $:/core/ui/ViewTemplate/subtitle as this is what uses the tag to list items in the subtitle, if you have, just delete it to revert to the original.

If you created the tiddler “$:/core/ui/ViewTemplate/subtitle/created”, that does not exist in the core you are misleading others and yourself, because it is not in the core/ui.

  • Instead create your own tiddler such as $:/Xabrina/custom-subtitle, containing what you want to appear, tagged $:/core/ui/ViewTemplate/subtitle
    • Later you can even export all tiddlers with the [prefix[$:/Xabrina]] or [prefix[$:/Xabrina/custom-subtitle]]

Tell us how you go @Xabrina

1 Like
#6

The reason people are asking about this is because it simply seems to work, with your content in a tiddler tagged like that:

created.json (289 Bytes)

Of course you will probably want to change or remove other parts of the subtitle, but just adding that content really is simply a matter of putting it in a tiddler with the appropriate tag.

1 Like
#7

Hello everyone, sorry but I’ve been a little busy and that’s why I couldn’t answer you sooner.

The truth is that I don’t know what I did the first time but following @Matteo’s advice and applying it to the example model that I had taken from Soren it works perfectly.

This would be the code that worked for me:

\whitespace trim

<$reveal type="nomatch" stateTitle=<<folded-state>> text="hide" tag="div" retain="yes" animate="yes">
<div class="tc-subtitle">
<div>
<button class="tc-btn-invisible"disabled>{{$:/core/images/home-button}}</button>&ensp;Created&nbsp;<$view field="created" format="date" template={{$:/language/Tiddler/DateFormat}} />
</div>
<div>
<button class="tc-btn-invisible"disabled>{{$:/core/images/list}}</button>&ensp;Updated&nbsp;<$view field="modified" format="date" template={{$:/language/Tiddler/DateFormat}} />
</div>
</div>
</$reveal>

However, if I try to do it from the new subtitle tiddlers that have appeared in the latest versions, I can’t get it to work out well. If I try to get the results in two lines, a displacement appears in the lower text that I don’t know how to avoid. So that they appear in two lines, I use a <br> at the end of the first code.

If I do nothing, the two pieces of information appear one after the other and without any problem, although I like the way the information appears in two lines better.

What I do is modify the tiddler $:/core/ui/ViewTemplate/subtitle/modified and create a new one called $:/xabriña/subtitle/created (thanks @Tw_Tones, you are absolutely right about how I should name new tiddlers that do not form part of the core of Tiddlywiki).

The text I put in them is the following:

<button class="tc-btn-invisible"disabled>{{$:/core/images/list}}</button>&ensp;Updated&nbsp;<$view field="modified" format="date" template={{$:/language/Tiddler/DateFormat}} /><br>
and

<button class="tc-btn-invisible"disabled>{{$:/core/images/home-button}}</button>&ensp;Created&nbsp;<$view field="created" format="date" template={{$:/language/Tiddler/DateFormat}} />

Do you know how to fix this?

Thank you so much.

#8

By the way, do you know where I can find the template that generates the table in the SystemTag tiddler: $:/tags/ViewTemplate/Subtitle?

From what I have seen, the table does not overflow the limits of the tiddler even if the content of the cells is very long and I wanted to take a look at its code, although it may be because of the transclusion…

I understand that it is a template since when I open the tiddler I don’t see anything, I have searched a little but I can’t find it :sweat_smile:…

#9

As the subtitle appears on tiddlers when viewing them, the subtitle is part of the view Template so it is tagged $:/tags/ViewTemplate and is $:/core/ui/ViewTemplate/subtitle

I suggest not modifying this but at most remove the tag $:/tags/ViewTemplate/Subtitle from either or both;

  • $:/core/ui/ViewTemplate/subtitle/modified
  • $:/core/ui/ViewTemplate/subtitle/modifier

And tag your own with $:/tags/ViewTemplate/Subtitle

This is its content

\whitespace trim
<$reveal type="nomatch" stateTitle=<<folded-state>> text="hide" tag="div" retain="yes" animate="yes">
<div class="tc-subtitle">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/tiddler-subtitle]!has[draft.of]]" variable=subtitle-tiddler><span title={{{ [<subtitle-tiddler>get[description]] }}}><$transclude tiddler=<<subtitle-tiddler>>/>&nbsp;</span></$list>
</div>
</$reveal>

and I suggest your overflow question may be due to class=“tc-subtitle”
Now searching for .tc-subtitle we find it is defined in $:/themes/tiddlywiki/vanilla/base with references including;

.tc-subtitle {
	font-size: 0.9em;
	color: <<colour tiddler-subtitle-foreground>>;
	font-weight: normal;
}

.tc-subtitle .tc-tiddlylink {
	margin-right: .3em;
}
  • Would margin right be enough?