You don’t like the way Obsidian shows frontmatter in V1.1? Here’s how to fix it in three easy steps

Before the version 1.1 of Obsidian came around, the YAML header at the top of the files was shown as a codeblock with the YAML language. Alias and Tags were also shown as a metadata below this codeblock.

However, since the version 1.1 update of obsidian, this has changed. Now, the YAML codeblock does not show and the YAML fields show like Aliases and Tags did before. Here’s a picture of how it was and how it is now:

It’s true that for some people the codeblock YAML frontmatter might not have been a good option. But for me at least, I liked to have it that way. With the new update, two problems have been introduced to the way frontmatter is shown:

1. All of the YAML fields get shown like Alias and Tags fields. This makes the frontmatter look messy. Especially when there are YAML fields with longer texts inside.
2. The Information in the YAML are not inside the PDF file when we export the pages to PDF. I was so frustrated by this because I needed the information to also be shown in the PDF export.

These two reasons were enough for me to go look for a solution. I’ve found it thankfully, and you can follow along to fix this problem.

For this to work out, you need to add custom css to your vault. To do this, follow these steps:

1. Create a css file

You can add your custom css codes to your vault. To do this, go to the following directory (create the folder if it’s not there).

YOUR VAULT/.obsidian/snippets/

When you’re in the snippets folder, create a file with the .css extension. Then open it with your default text editor.

2. Add the css snippet

Add this css snippet to your newly created css file:

/* making the frontmatter visible */
.frontmatter.language-yaml {
 display:block !important;
}
.frontmatter-section {
 display:none !important;
}
.frontmatter-section.mod-tags, .frontmatter-section.mod-aliases {
 display: block !important;
}

This code will do three things (I will go through from top to bottom):

1. Hide the cluttered frontmatter fields that are shown in the new version of obsidian
2. Show the codeblock YAML frontmatter that was previously hidden
3. Show the two fields of Alias and Tags because we want them to be shown. (you can omit the final line if you don’t want to show tags and alias fields.)

3. Enable the effect of your custom css file

Finally, you need to enable custom css snippets in your vault if you haven’t done this already,. Open Obsidian, go to your settings, select Appearance from the menu, scroll to the bottom of the page, and switch on the css file you had just created. This is how it looks on my vault:

here’s the before and after applying this css snippet.

Before:

After:

Congratulations🎉

You have successfully changed the way YAML frontmatter is shown.

My name is Zachary Shirmohammadli and I’m an expert in using Obsidian and I make relevant content. You can follow me if you’re interested into this kind of thing.

Happy writing.