How to create pill-style tags for diplay and export

[ingewertwijn]

Here is hoping someone of you clever people can help me out, coz I am a not a programmer.

1. How do I create the pill-box style for tags? In one or more colours? Some themes have this, others don’t, but I cannot find how it is done.

2. How can I get the pill-box style to print when exporting to Ms Word, using pandoc?

[looper]

@ingewertwijn

Some themes have this, others don’t, but I cannot find how it is done.

I’m not a programmer either, but I think the following CSS should work in any theme to create the rounded pill-box style around a tag. I found this in one of the themes I use. Some themes are more complex than others, but I found this in one of the simpler ones (Solarized), by going to Settings in Obsidian, then Appearance, then opening the Themes folder by clicking on the folder icon in the Themes section, then opening the Solarized.css file in a text editor and lastly searching for “tags”:

/* Tags */
.cm-s-obsidian span.cm-hashtag-begin,
.cm-s-obsidian span.cm-hashtag,
.cm-s-obsidian span.cm-hashtag-end,
a.tag {
    background-color: var(--text-normal);
    color: var(--background-primary) !important;
    font-family: inherit;
    padding: 2px 0px;
    text-decoration: none;
}

.cm-s-obsidian span.cm-hashtag-begin {
    border-radius: 1em 0px 0px 1em;
    padding-left: 5px;
}

.cm-s-obsidian span.cm-hashtag-end {
    border-radius: 0px 1em 1em 0px;
    padding-right: 5px;
}

a.tag {
    border-radius: 1em;
    padding: 2px 5px;
}

A Google search confirms that border-radius is what’s working the magic.

I’m not sure about your 2nd question…

[Koen]

Not a programmer either, but here is the CSS snippet I use:

.tag {
  background-color: var(--text-accent);
  border: none;
  color: white;
  font-size: 11px;
  padding: 1px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0px 0px;
  cursor: pointer;
  border-radius: 14px;
}
.tag:hover {
color: white;
background-color: var(--text-accent-hover);
}
.tag[href^="#Books"] {
  background-color: #8e44ad;
}
.tag[href^="#Videos"] {
  background-color: #f1c40f;
}
.tag[href^="#Articles"] {
  background-color: #FF9D66;
}
.tag[href^="#TV_series"] {
  background-color: #f1c40f;
}
.tag[href^="#Movies"] {
  background-color: #dd1c44;
}
.tag[href^="#Project"] {
  background-color: #EE5F85;
}
.tag[href^="#People"] {
  background-color: #FC766F;
}
.tag[href^="#Course"] {
  background-color: #8e4c44;
}
.tag[href^="#Gespreksnotities"] {
  background-color: #7172FC;
}
.tag[href^="#Podcast"] {
  background-color: #ADCB2A;
}
.tag[href^="#Podcast_series"] {
  background-color: #859737;
}
.tag[href^="#Observing_and_coaching"] {
  background-color: #000000;
}```

When I export as PDF, the pills are there. Not sure about exporting to Word.