Help Needed with CSS for Hiding Specific Frontmatter Fields in Obsidian Preview Mode

[DataWizerd]

Hi everyone,

I’m customizing my Obsidian setup and need some help with CSS to hide certain frontmatter fields in preview mode. Specifically, I want to display only the “kind,” “topics,” and “status” fields, and hide all other fields.

Here’s the current look of my frontmatter:

aliases::

title::

kind::

mode::

topics::

status::

date:: [[2024-06-08]]

summary::

I’ve tried the following CSS to achieve this, but it didn’t work as expected:

/* Ensure frontmatter is displayed */
.markdown-preview-view .frontmatter {
    display: block;
}

/* Hide all frontmatter fields except 'kind', 'topics', and 'status' */
.markdown-preview-view .frontmatter > :not(.frontmatter-key:contains("kind")):not(.frontmatter-key:contains("topics")):not(.frontmatter-key:contains("status")) {
    display: none;
}

/* Ensure 'kind', 'topics', and 'status' are visible */
.markdown-preview-view .frontmatter > .frontmatter-key:contains("kind"),
.markdown-preview-view .frontmatter > .frontmatter-key:contains("topics"),
.markdown-preview-view .frontmatter > .frontmatter-key:contains("status") {
    display: block;
}

I also tried the following CSS, but it didn’t work either:

div.metadata-properties > div.metadata-property[data-property-key="Property Name"] {
  display: none;
}

I’m not sure if I’m targeting the elements properly or if there’s an issue with the syntax.

Has anyone successfully hidden specific frontmatter fields in preview mode? Any suggestions or insights would be greatly appreciated!

Thank you in advance for your help!

[DataWizerd]

any help please

[anon23099027]

@DataWizerd

I’m not sure if I’m targeting the elements properly or if there’s an issue with the syntax.

Hello.

For front matter / properties, the format needs a single colon between the key and the value, and a date field doesn’t need square brackets [[ ]] to create a link if the Daily Notes plugin is enabled. See :

Property names are separated from their values by a colon followed by a space

Properties - Obsidian Help

With the Daily notes plugin enabled, the date property will additionally function as an internal link to the corresponding daily note for that date.

---
aliases: 
title: 
kind: 
mode: 
topics: 
status: 
date: 2024-06-08
summary: 
---

Don’t know anything about hiding fields with CSS, but the front-matter format is important.

[DataWizerd]

Thank you very much for your kind reply. im new to obsidian, i bave the watched the below video in youtube that explains that importance on having the Meta data within the template, so i followed it.

Youtube Vid : https://www.youtube.com/watch?v=5zcdG6ZWja4&t=2348s

[ariehen]

By “preview mode”, do you mean Reading view? If so, you could try something like this:

.markdown-preview-view {
  & div:is([data-property-key="aliases"], 
      [data-property-key="title"], 
      [data-property-key="mode"], 
      [data-property-key="date"], 
      [data-property-key="summary"]) {
           
        display:none;
}

Left to right: Source mode, Live Preview, Reading view.