How To Add Style Of Your Tags In Obsidian

Timestamp Notes

1:20 Code To Copy From Forum

2:30 Atom Text Editor

4:10 Pasting Code In Your obsidian.css file

In this video I show you how to customize the style of your tags in obsidian.

Here's the original creator of this awesome hack: Tag Pills - Obsidian Forum

My Modified Code

This modified code has a couple of different style features

• black background
• different box shape
• made to fit with "Reverie" Theme

.tag {
    /*changed var to hex color */
            background-color: #000;
            /* border: none; */
            /* border: solid; */
         /* SY added border width to make it smaller */
            border-width:1px;  
            /* color: #ff0000; */
            /* font-size: 11px; */
            font-size: 12px;
            /* padding: 1px 8px; */
            padding: 1px 5px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            margin: 0px 0px;
            cursor: pointer;
            /* border-radius: 14px; */
            border-radius: 8px;
          }
          .tag:hover {
          color: white;
       /* changed color of hover over tag */
          /* background-color: var(--text-accent-hover); */
          /* background-color: #faf2d6; */
          background-color: #1C1C1C;
          }