Hide/Show Properties and "add property" button in Reading Mode

While we are waiting for the devs to let users choose how to handle Properties section visibility, I developed a some workaround. Here how it looks:


Edit mode
Edit mode

Reading mode
Reading mode

My approach is to use a CSS snippet to control the visibility of the Properties and “Add property” button.
Learn more about CSS snippets.


I will provide you with a step by step instruction so that you can configure the behavior that suits your style of work. It will be easy, you can do it!

1. Making CSS snippet

1.1. Hide/Show properties section in reading mode.

First, decide if you want to see the Properties section in Reading View by default, and be able to hide it.

If yes, then copy this piece of code:

Snippet: Show by default
/* 
Show Properties in reading mode by default.
Use "hide_properties" in `css_classes` property to hide them.
============================================================= */
.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view.hide_properties
.metadata-container{
    display: none;
}

Otherwise, if you want the properties to be always hidden, but shown when you need, then copy this piece of code:

Snippet: Hide by default
/* 
Hide Properties in reading mode by default.
Add "show_properties" to `css_classes` property to show them.
============================================================= */
.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view
.metadata-container{
    display: none;
}

.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view.show_properties
.metadata-container{
    display: block;
}

1.2. Hide/Show “Add property” button in reading mode.

Next, decide if you want the “Add Property” button to be visible in reading mode by default and disabled at your discretion.

If your answer is yes, copy this code:

Snippet: Show by default
/* Show "Add property" button in reading mode by default.
Add "hide_add_property_btn" to `css_classes` property to hide it.
================================================================= */
.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view.hide_add_property_btn
.metadata-add-button {
    display: none;
}

Otherwise, if you want the button to be hidden by default and displayed as you wish, then copy this code:

Snippet: Hide by default
/* Hide "Add property" button in in reading mode by default.
Add "show_add_property_btn" to `css_classes` property to show it.
================================================================= */
.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view
.metadata-add-button {
    display: none;
}

.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view.show_add_property_btn
.metadata-add-button {
    display: inline-flex;
}

2. Further actions

  1. Create the file Properties.css.
  2. Copy and paste chosen snippets to this file.
  3. Follow this instruction to put your .css file to the right place

3. How to use:

If you have chosen to show properties by default, then in order to hide them in the note’s reading mode, you need to create a “cssclasses” property in it and add “hide_properties” there. In another version of the action, you need to insert “show_properties” into this property.

Accordingly, to hide or show the add properties button, you need to use hide_add_property_btn or show_add_property_btn, depending on the scenario you choose.


Please feel free to ask questions if something is not clear. I tried to describe everything in the smallest detail, but still people who are far from these “programming thingies” may have questions.

15 Likes

Thank you for the excellent instruction on how to deal with property section visibility and invisibility. Well written and easily understood. I am so thankful for this. Thank you!!!

3 Likes

Thank you for your appreciation, glad it was helpful :3

1 Like

Thank you.

1 Like

Hello everyone,

In the read view, I have a specific requirement: I want to hide the Properties block and only display the tags, just like it used to be before the recent changes. Managing my tags used to be effortless, but the introduction of the Properties block in Obsidian has complicated things unnecessarily.

Here’s my workaround:

  1. I managed to hide certain properties (e.g., date updated, date updated, source) using CSS.
  2. I also successfully hide “Add Properties” button via CSS.

Good ! Now …

The only think I want now, is the hide the Properties title :

Thank you in advance :slight_smile:

Give this a try:

/* hide "Properties" title in Reading view */
.markdown-preview-view .metadata-properties-title {
     display: none;
}
1 Like

Oh yes, that works :slight_smile:
Thank you so much :slight_smile:

Now I have gap here. I guess I can remove it as well ?

I think this is the closest you can get things without using a negative value for the inline title margin-bottom:

 /* remove inline title bottom margin */
.markdown-preview-view .inline-title {
    margin-bottom: 0px;
}

/* remove Properties view top padding */
.markdown-preview-view .metadata-container {
    padding: 0px;
}
1 Like

Wow!! You deserve a tip my friend! Let me know if you have a tip jar somewhere :slight_smile:

This is how it looks now, not perfect, but much better!

Another question folks. How can I adapt my CSS update for the mobile (iphone) as well.
Thank you!

Heya, I’m new to obsidian and a total noob at css I don’t really know how to find the proper css-classes to add “show_properties” to. And I am trying to achieve the exact same thing you are.
Would you mind sharing with me your .css file so I can look over it and figure out how to did it?

Thank you very much in advance!

I don’t understand your question. All the CSS used are in the conversion above.

Cheers!

Apologies. I don’t know what “add show_add_property_btn” or “show_properties to css_classes” means.

My desired goal is to hide or collapse the frontmatter by default (especially in edit mode, preferably in both edit or preview) and be able to expand it for editing when I need it. I have copied the corresponding snippets and here is my entire file

/* 
Hide Properties in reading mode by default.
Add "show_properties" to `css_classes` property to show them.
============================================================= */
.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view
.metadata-container{
    display: none;
}

.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view.show_properties
.metadata-container{
    display: block;
}

/* Hide "Add property" button in in reading mode by default.
Add "show_add_property_btn" to `css_classes` property to show it.
================================================================= */
.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view
.metadata-add-button {
    display: none;
}

.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view.show_add_property_btn
.metadata-add-button {
    display: inline-flex;
}

I named the file Properties.css and put it in the …\VAULT_NAME.obsidian\snippets folder. However, I am not familiar with where the css_classes property is located. A Google search for “obsidian css_classes” didn’t provide a clear answer.

I would appreciate any guidance.

@phinnik Thanks for your great work! This really helps!
I think everything in reading view should be read-only, not only iiding “Addproperty” button, but also every property name icon and property values.(property type and property value are both not editable).
So, I just extend your css script and works perfect for me.

/* 
  Hide "Add property" button in in reading mode by default.
  Add "show_add_property_btn" to `css_classes` property to show it.
  ================================================================= 
*/

/* Hiding "Add property" button in reading view. */
.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view
.metadata-add-button {
    display: none;
}

/* Setting property key/type icons to read-only in reading view. */
.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view
.metadata-container
.metadata-content .metadata-property-key{
    pointer-events: none;
}

/* Setting property value of displayed to read-only in reading view. */
.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view
.metadata-container
.metadata-content .metadata-property-value .multi-select-container .multi-select-pill{
    pointer-events: none;
}

/* Setting property value of input boxes to read-only in reading view. */
.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view
.metadata-container
.metadata-content .metadata-property-value .multi-select-container .multi-select-input{
    pointer-events: none;
    display: none;
}

/* Setting property value of input boxes for url to read-only in reading view. */
.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view
.metadata-container
.metadata-content .metadata-property-value .metadata-link{
    pointer-events: none;
}

/* Setting property value of urls clickable in reading view. */
.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view
.metadata-container
.metadata-content .metadata-property-value .metadata-link .metadata-link-inner{
    pointer-events: visible;
}

/* Setting property value of input boxes for date & time to read-only in reading view. */
.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view
.metadata-container
.metadata-content .metadata-property-value .metadata-input.metadata-input-text{
    pointer-events: none;
}

By the way, I think “Header Title” and “Inline Title” still should be read-only:

/* 
  Making the title of the note in reading view is not editable.
  ================================================================= 
*/

/* View-Header-Title is read-only in reading view. */
.workspace-leaf-content[data-mode="preview"]
.view-header
.view-header-title {
    pointer-events: none;
}

/* Inline-Title is read-only in reading view. */
.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view
.mod-header
.inline-title {
    pointer-events: none;
}

But with this code both of the titles will be not selectable, may the OFFICAL team could consider the features, “Everything in Reading View Should be Read-Only”.

Have fun!

1 Like

First of all, many thanks for your advice.

May I seek your advice on how to apply these under “live preview mode” instead of “reading mode”?

There are a few different things going on with the CSS snippets above. If you say exactly what you’re looking to show/hide/change in Live Preview, I’m sure someone could whip something up.

Oh, I mean hiding properties in “live preview mode” in a particular note using cssclasses, while properties are shown by default.

This should do it. You can change the prop-zero to you liking (as long as it doesn’t conflict with other cssclasses you may have).

/* hide properties in live preview - notes with a cssclass of <prop-zero> */
.prop-zero {
    --metadata-display-editing: none;
}
1 Like

Thank you so much for your advice!