Specifying color on a single tag-pill macro?

#1

Hi guys

I am looking at adding tag-pills at the end of lines of text for colorful, visual, easy identification purposes. I am not talking about the pills of actual tags, just individual uses of the tag-pill macro.

Is there any way to add styling to individual tag-pills, something like this? (but this doesn’t work).

<<tag-pill "unread" color:"#eaeaea;">> <<tag-pill "kindle" color:"#969696;">>

On tiddlywiki.com it talks about element-attributes, but of course the link to ‘examples’ is an empty link, so I don’t know how to set that up, if it even applies.

If this is not achievable currently, could you guys consider “style” as a parameter for this macro in the next update to TW? style=“color:#eaeaea;”` I simply want to treat these pills as tiddler-less, independent visual elements.

#2

The tag-pill macro is very old and very complex. It has a lot of “forground / background” color handling, to keep a high contrast between foreground and background.

So my idea was to create a new macro, that only duplicates the shape, without the complexitiy.

Eg: A <<tag-pill test>> macro call creates the following HTML outptut.

<span class="tc-tag-list-item" data-tag-title="test">
  <span class="tc-tag-label tc-btn-invisible" 
    style="background-color:; fill:#333333; color:#333333;"
  >
    test
  </span>
</span>

Where the fill attribute is there for icons. – Do you intend to have icons?

The above code could be a starting point for a simplified macro, that only duplicates the form of a tag-pill without the complexity.

just an idea

#3

It’s not possible to have a second style attribute. It’s already used in the current macro. So it will always overwrite a new macro parameter.

#4

Since the style is in the macro, I suppose this would mean I need to create a global macro tiddler for each color I want to use, tag-pillgreen, tag-pillblue, etc.

#5

you could pull the style out into a let that’s constructed using macro parameters, right? i haven’t tested but something like

\procedure pill(text color fill)
</$let pillstyle="background-color:; fill:<<fill>>; color:<<color>>;">
<span class="tc-tag-list-item" data-tag-title="test">
  <span class="tc-tag-label tc-btn-invisible" 
    style=<<pillstyle>>
  >
    <<text>>
  </span>
</span>
</$let>
\end

<<pill kindle #777777 #FFFFFF>>
#6

You could use the new parametrised transclusions.

Create a tiddler eg: pill-template with the following content

\parameters (tag background:#ec6; color:black; )

\define tag-pill-styles() background-color:$(background)$; fill:$(color)$; color:$(color)$; 

<$macrocall $name="tag-pill" tag=<<tag>> />

Call you pill with eg:

  • {{pill-template | some text |red;}} or
  • {{pill-template | some text |red; | yellow;}}

have fun!
mario

custom-tag-pill-template.json (520 Bytes)

#7

Thank you all for your replies. Time to test them out!

#8

Mario, your json worked great! I made the template a system tiddler, adjusted the font-weight to normal, and it is exactly what I wanted. Thank you, Mario! And thank you, too, Scribs!

2 Likes
#9

I just saw this now and glad you have a solution @DaveGifford. I will consider your requirement in a solution I have developed called “filter pills”. I think they would make sense in this case as you want tag pill behaviour that diverges from the core.

Update, my filter pill solution already handles a tag pill color but I will review the completness of my documentation within the package before sharing.

This is still in development, perhaps perpetualy :nerd_face: filter-pills.json (20.0 KB)

After installing you would use the following to get your desired results.

<<filter-pill "[tag[unread]]" pillcolor:"#eaeaea;">> 
<<filter-pill "[tag[kindle]]" pillcolor:"#969696;">>

Additional features appear on the pill dropdown

2 Likes
How to create a second series of tags
#10

Thanks Tones! I will compare this to the other solutions provided above. Blessings.

#11

Thanks again Tones. I finally got round to trying this out. Nice! I just needed a way to display text and adjust the color, with no dropdown information needed. So this was a little overkill for my problem. But this is a wonderful tool with lots of possibilities.

1 Like