[TW5] Change tag "bubble" apperance

[Tom Bardout]

Hi,

I'd like to know where I can find the code that makes the rounded corners for tags. I'd like to make it rectangular

[TonyM]

Tom,

To start with you may want to use the words "tag pill".

I did a little investigation and found in my current selected theme $:/themes/tiddlywiki/vanilla/base the following;

button.tc-tag-label, span.tc-tag-label {
    display: inline-block;
    padding: 0.16em 0.7em;
    font-size: 0.9em;
    font-weight: 400;
    line-height: 1.2em;
    color: <<colour tag-foreground>>;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: <<colour tag-background>>;
    border-radius: 1em;
}

If you edit this it replaces the shadow tiddler

Deleting "    border-radius: 1em;" Got the result you were after.
Just changing to "    border-radius: 0em;" also works

Not Happy?

Delete $:/themes/tiddlywiki/vanilla/base and the default content will be restored.

I am sure there are more elegant methods like overwriting the CSS in a style sheet because if $:/themes/tiddlywiki/vanilla/base is updated you will not see the update. But this works

But my hack was as follows;

Add to the Tiddler MyStyles tagged $:/tags/Stylesheet

The Whole clause above with your modification, this will override that in the theme.

People with more CSS scill can override just the boarder-radius.


Regards
Tony

[PMario]

On Thursday, September 7, 2017 at 4:00:06 AM UTC+2, TonyM wrote:

But my hack was as follows;

Add to the Tiddler MyStyles tagged $:/tags/Stylesheet

This is best practice and not a hack

 

The Whole clause above with your modification, this will override that in the theme.

People with more CSS scill can override just the boarder-radius.

 

-m

[Tom Bardout]

Thanks Tony

[TonyM]

Well, I must be more confident then and recognise I have some idea of best practice.

Thanks for making it clear Mario.