Looking for CSS Script to style tags

Custom CSS & Theme Design
1

Good afternoon. I am looking for an updated CSS snippet that allows me to style tags (change the color, font, weight, border, fill color, etc.) for inline tags and frontmatter tags (as well as frontmatter aliases) in both editing and reading modes. Even better if it integrates into Style Settings plugin! I have searched Obsidian forums and Reddit and found lots of somewhat helpful hits but either the formatting is only for a specific view mode or only works in early versions of Obsidian. Alternatively a plugin would work as well but there seem to be limited choices. Colorful Tags is really what I am after but the GitHub repo is abanondoned, the plugin is way out of date and is buggy. Don’t know if it has been forked and updated. Colored Tag Wrangler is newer but only changes tag color.

Thanks!

2

You should try this - Colored Tags (by Pavel Frankov)

3

You can explore this snippets collection.
You’ll find snippets for tags and many more.

5

@ninja_turtle Thank you for the suggestion. I am looking to color and style individual tags as well which is out of the scope of the plugin.

6

@allervoiretregarder Thank you! These snippets are exactly what I am looking for. Do you know how to style frontmatter tags and aliases as well as incorporate the CSS into Style Settings plugin?

7

I am afraid it is not possible to style tags or other properties in frontmatter individually without a plugin. They have no classes or other indicators that will allow CSS to distinguish between them.

My plugin can add colors to the frontmatter tags, but if you want to use pure CSS, there is no way to do this.

8

@reaty thank you for the reply. Can your plugin style frontmatter properties other than color? I don’t necessarily need to use exclusively CSS to style frontmatter properties. How else could I do it? Using HTML?

9

My plugin only adds colors, but it also adds data-attributes to HTML, which allows you to use your own CSS for any custom styles.

The thing is, to change some things you need to change HTML, but the only way to change HTML is to use JavaScript, which mean you need a plugin or at least a custom script. There is no way around that.

10

Your plugin is really slick! Is it possible to change the background shape/color, font size, style, etc. of tags in frontmatter as well? Might be useful options to make tags and aliases and other frontmatter stand out more.

11

This can be done with css.
For example if you want you frontmatter tags to be bold, you can use something like this:

.metadata-property[data-property-key="tags"] .multi-select-pill {
font-weight: bold;
}
12

Great. I actually submitted a post in the plugins section of the forums asking questions on using CSS to format tags. Please take a look if you have a minute.

13

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.