Change the color of the tag-pill macro?

[si]

I'm building something in my wiki that makes use of the tag-pill macro, but I need to change the color to distinguish it from regular tags. Is there any way to do this?

I feel like it might be possible with the "element-attributes" parameter but I don't actually understand what it is for.

[Mohammad Rahmani]

Is it fine to use your own tag-pill macro

\define my-tag-pill(tag) <span class="tc-tag-label-new">$tag$</span>
<style>
span.tc-tag-label-new {
    display: inline-block;
    padding: 0.16em 0.7em;
    font-size: 0.9em;
    font-weight: 400;
    line-height: 1.2em;
    color: #ffffff;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: brown;
    border-radius: 1em;
}

</style>

Example

<< my-tag-pill  tag:"Macros">>  

Best wishes

Mohammad

On Sat, Apr 24, 2021 at 9:37 PM si <matthew...@gmail.com> wrote:

I'm building something in my wiki that makes use of the tag-pill macro, but I need to change the color to distinguish it from regular tags. Is there any way to do this?

I feel like it might be possible with the "element-attributes" parameter but I don't actually understand what it is for.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/edbaa294-21a0-4719-b67f-338be8d53440n%40googlegroups.com.

[PMario]

Hi,

I'm not really sure what you want. But every tag can be a tiddler eg: done. [1]

If you edit the "done" tag you can change the "color" and the "icon" field.

Is that what you want?

-mario

[1] https://tiddlywiki.com/#done

[si]

Thanks @PMario, for some reason I forgot about this feature of tags. Unfortunately for my use-case I am also changing the text displayed in the tag pill, so I will go with @Mohammad's suggestion and clone the tag macro.

Thanks to you both.

[Michael Wiktowy]

Just for reference, I implemented this in the past in a slightly different way for colouring and displaying tidders as tags based on their status field. I essentially cloned the $:/core/ui/TagTemplate to make the following $:/custom/ui/TagTemplate

\whitespace trim

<span class="tc-tag-list-item">
<$set name="transclusion" value=<<currentTiddler>>>
<$macrocall $name="tag-pill-body" tag=<<currentTiddler>> icon={{!!icon}} colour=<<tag_colour>> palette={{$:/palette}} element-tag="""$button""" element-attributes="""popup=<<qualify "$:/state/popup/tag">> dragFilter='[all[current]tagging[]]' tag='span'"""/>
<$reveal state=<<qualify "$:/state/popup/tag">> type="popup" position="below" animate="yes" class="tc-drop-down">
<$transclude tiddler="$:/core/ui/ListItemTemplate"/>
<$list filter="[all[shadows+tiddlers]tag[$:/tags/TagDropdown]!has[draft.of]]" variable="listItem">
<$transclude tiddler=<<listItem>>/>
</$list>
<hr>
<$macrocall $name="list-tagged-draggable" tag=<<currentTiddler>>/>
</$reveal>
</$set>
</span>

Only changing the highlighted part from a field transclusion {{!!colour}} in the original core tiddler to a variable <<tag_colour>> in the custom one. Everything else is the same.

Then I made a macro to call that template instead of the normal one:

\define status_colour() {{$(status)$!!tag_colour}}

\define colour_status_tag()
<$list filter="[is[current]has[status]get[status]]" variable="status">
<$wikify name=tag_colour text=<<status_colour>>>
<$transclude tiddler="$:/custom/ui/TagTemplate"/>
</$wikify>
</$list>
\end

<$list filter="[tag[tag_on_tiddlers_with_status_field]]">
<<colour_status_tag>>

</$list>

Maybe more complicated that what you need but extensible to make new tiddlers with different status (or whatever other property that you want to colour them by). You can likely reuse the same technique to change the icon too.

/Mike