Meta Post - Common CSS Hacks

Share & showcase
660

Also it’s better to start a new thread for a question like that so more people will see it.

1 Like
661

As of 1.6.0, .nav-folder-children seems to have been replaced by .tree-item.

Or at least, making that swap got the snippet working again for me, after updating to 1.6.0 (current insider release).

662

I updated the snippet to remove embedding borders, to work in edit mode as well.

/*
    clean-embeds-all.css snippet

    Removes title, link, padding, margins from embeds,
    so they really look like the same note.

    This will not require a `cssclass` to be set but work for _all_ notes.
    Derived from the `clean-embeds.css` snippet.

    2021-08-24 Matthias C. Hormann (Moonbase59)

    TODO: Find out how to correct PDF export. L/R margins & vspace too large on embeds.
*/

/* remove title and the table from the "Metatable" plugin */
.markdown-preview-view .markdown-embed-title,
.markdown-preview-view .obsidian-metatable,
.internal-embed .markdown-embed-title,
.internal-embed .obsidian-metatable {
    display: none;
}

/*
  For links to embeds NOT to be shown, uncomment the following
  and comment out the other section below.
*/

/*
.markdown-preview-view .markdown-embed-link,
.markdown-preview-view .file-embed-link {
  display: none;
}
*/

/*
  For links to embeds to BE shown, uncomment the following
  until the "End link show/hide stuff" comment
  and comment out the section above.
*/

/* Link icon */
.markdown-preview-view .markdown-embed-link,
.markdown-preview-view .file-embed-link,
.internal-embed .markdown-embed-link,
.internal-embed .file-embed-link {
    top: 0;
    right: 0;
    left: unset;
    text-align: right;
    border: none;
    margin: 0;
    width: 24px;
    height: 24px;
    color: var(--text-faint);
    cursor: pointer;
}

/* for Ars Magna theme and others that change ::before */
.markdown-preview-view .markdown-embed-link::before,
.markdown-preview-view .file-embed-link::before,
.internal-embed .markdown-embed-link::before,
.internal-embed .file-embed-link::before {
    display: none;
}

/* Link icon size & hide */
.markdown-preview-view .file-embed-link svg,
.markdown-preview-view .markdown-embed-link svg,
.internal-embed .file-embed-link svg,
.internal-embed .markdown-embed-link svg {
    height: 24px;
    width: 24px;
    opacity: 0;
    display: unset;
}

/* show on hover */
.markdown-preview-view .markdown-embed:hover .file-embed-link svg,
.markdown-preview-view .markdown-embed:hover .markdown-embed-link svg {
    opacity: 1;
}

/* change background on hover, to exactly see what’s embedded */
.markdown-preview-view .markdown-embed:hover,
.markdown-preview-view .file-embed:hover {
    background-color: var(--background-secondary) !important;
}

/* End link show/hide stuff */



/* remove border and scroll */
/* unfortunately needs !important for some themes */
.markdown-preview-view .markdown-embed,
.markdown-preview-view .file-embed {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.markdown-preview-view .markdown-embed-content,
.markdown-preview-view .markdown-embed-content>.markdown-preview-view {
    max-height: unset;
    padding: 0 !important;
    /* !important for "Pisum" theme */
    margin: 0;
    border: 0;
}

.markdown-embed {
    max-height: unset;
    padding: 0 !important;
    /* !important for "Pisum" theme */
    margin: 0;
    border: 0;
}

.internal-embed .markdown-embed .inline-embed {
    max-height: unset;
    padding: 0 !important;
    /* !important for "Pisum" theme */
    margin: 0;
    border: 0;
}

/* remove <br> between internal embeds */
.markdown-preview-section div>br {
    display: none;
}


/* remove vertical space added by markdown-preview-sizer */
div.markdown-preview-sizer.markdown-preview-section {
    min-height: unset !important;
    padding-bottom: 0 !important;
}

/* special considerations for printing (PDF export) */
@media print {

    /* remove frontmatter box if "Show frontmatter" was enabled */
    /* Also remove metadata table from "Metatable" plugin */
    pre.frontmatter,
    .obsidian-metatable {
        display: none;
    }
}
6 Likes
663

Hi,

This doesn’t work for me. I’ve followed all the steps as outlined.

I have:

  1. Copied the exact text as provided from the post

  2. Saved it as “clean-embeds.css”

  3. Enabled it in obsidian under: Settings - Appearance - CSS snippets

  4. Reloaded Obsidian

  5. Added the following to the top of my document (YAML frontmatter):

---
cssclass: clean-embeds
---

What am i doing wrong?

664

This topic is long and winding. Some snippets need cssclasses per note, and others are universal (for all your notes in that vault).

If you share exactly the one you are trying to use, maybe folks can help out and point you in the right direction.

666

Hi, the exact one I’m using (from this thread) is this:

/*
    clean-embeds.css snippet

    Removes title, link, padding, margins from embeds,
    so they really look like the same note.

    To be used with `cssclass: clean-embeds` in YAML frontmatter.

    2021-08-24 Matthias C. Hormann (Moonbase59)

    TODO: Find out how to correct PDF export. L/R margins & vspace too large on embeds.
*/

/* remove title and the table from the "Metatable" plugin */
.markdown-preview-view.clean-embeds .markdown-embed-title,
.markdown-preview-view.clean-embeds .obsidian-metatable {
  display: none;
}

/*
  For links to embeds NOT to be shown, uncomment the following
  and comment out the other section below.
*/

/*
.markdown-preview-view.clean-embeds .markdown-embed-link,
.markdown-preview-view.clean-embeds .file-embed-link {
  display: none;
}
*/

/*
  For links to embeds to BE shown, uncomment the following
  until the "End link show/hide stuff" comment
  and comment out the section above.
*/

/* Link icon */
.markdown-preview-view.clean-embeds .markdown-embed-link,
.markdown-preview-view.clean-embeds .file-embed-link {
  top: 0;
  right: 0;
  left: unset;
  text-align: right;
  border: none;
  margin: 0;
  width: 24px;
  height: 24px;
  color: var(--text-faint);
  cursor: pointer;
}

/* for Ars Magna theme and others that change ::before */
.markdown-preview-view.clean-embeds .markdown-embed-link::before,
.markdown-preview-view.clean-embeds .file-embed-link::before {
  display: none;
}

/* Link icon size & hide */
.markdown-preview-view.clean-embeds .file-embed-link svg,
.markdown-preview-view.clean-embeds .markdown-embed-link svg {
  height: 24px;
  width: 24px;
  opacity: 0;
  display: unset;
}

/* show on hover */
.markdown-preview-view.clean-embeds .markdown-embed:hover .file-embed-link svg,
.markdown-preview-view.clean-embeds .markdown-embed:hover .markdown-embed-link svg {
  opacity: 1;
}

/* change background on hover, to exactly see what’s embedded */
.markdown-preview-view.clean-embeds .markdown-embed:hover,
.markdown-preview-view.clean-embeds .file-embed:hover {
  background-color: var(--background-secondary) !important;
}

/* End link show/hide stuff */



/* remove border and scroll */
/* unfortunately needs !important for some themes */
.markdown-preview-view.clean-embeds .markdown-embed,
.markdown-preview-view.clean-embeds .file-embed {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.markdown-preview-view.clean-embeds .markdown-embed-content,
.markdown-preview-view.clean-embeds .markdown-embed-content > .markdown-preview-view { 
  max-height: unset;
  padding: 0 !important; /* !important for "Pisum" theme */
  margin: 0;
  border: 0;
}

/* remove <br> between internal embeds */
.clean-embeds .markdown-preview-section div > br {
  display: none;
}


/* remove vertical space added by markdown-preview-sizer */
.clean-embeds div.markdown-preview-sizer.markdown-preview-section {
  min-height: unset !important;
  padding-bottom: 0 !important;
}

/* special considerations for printing (PDF export) */
@media print {

  /* remove frontmatter box if "Show frontmatter" was enabled */
  /* Also remove metadata table from "Metatable" plugin */
  pre.frontmatter,
  .obsidian-metatable {
    display: none;
  }
}

Edit: It should also be notet that I’ve tried both adding:

---
cssclass: clean-embeds
---

and

---
cssclasses: clean-embeds
---

As well as both variations with and without the “s” in “clean-embeds”

667

Hi,
as far as I can see this CSS snippet is only changing the reading view. The CSS snippet that @YeshR posted is also changing the view in edit mode by including the CSS class .internal-embed. But be aware that the snippet from @YeshR is for all embeds in all notes. By comparing the two snippets and adding the CSS class .clean-embeds to @YeshR’s snippet it should be possible to use it only for embeds in some notes.
I’m new to Obsidian so this is not a qualified answer. Good Luck!

668

Thanks for the clarification @doc-fou . I have (essentially) zero knowledge in CSS so, yeah I brute forced my way to the solution which was something that I need for ALL obsidian pages. Please feel free to take the snippet and make it more generalisable for community’s sake.

I’m adding this comment as an update for my previous snippet, so that I can support dark mode as well.

/*
    clean-embeds-all.css snippet

    Removes title, link, padding, margins from embeds,
    so they really look like the same note.

    This will not require a `cssclass` to be set but work for _all_ notes.
    Derived from the `clean-embeds.css` snippet.

    2021-08-24 Matthias C. Hormann (Moonbase59)

    TODO: Find out how to correct PDF export. L/R margins & vspace too large on embeds.
*/

/* remove title and the table from the "Metatable" plugin */
.markdown-preview-view .markdown-embed-title,
.markdown-preview-view .obsidian-metatable,
.internal-embed .markdown-embed-title,
.internal-embed .obsidian-metatable {
    display: none;
}

/*
  For links to embeds NOT to be shown, uncomment the following
  and comment out the other section below.
*/

/*
.markdown-preview-view .markdown-embed-link,
.markdown-preview-view .file-embed-link {
  display: none;
}
*/

/*
  For links to embeds to BE shown, uncomment the following
  until the "End link show/hide stuff" comment
  and comment out the section above.
*/

/* Link icon */
.markdown-preview-view .markdown-embed-link,
.markdown-preview-view .file-embed-link,
.markdown-embed-content .file-embed-link,
.internal-embed .markdown-embed-link,
.internal-embed .file-embed-link {
    top: 0;
    right: 0;
    left: unset;
    text-align: right;
    border: none;
    margin: 0;
    width: 24px;
    height: 24px;
    color: var(--text-faint);
    cursor: pointer;
}

/* for Ars Magna theme and others that change ::before */
.markdown-preview-view .markdown-embed-link::before,
.markdown-preview-view .file-embed-link::before,
.internal-embed .markdown-embed-link::before,
.internal-embed .file-embed-link::before {
    display: none;
}

/* Link icon size & hide */
.markdown-preview-view .file-embed-link svg,
.markdown-preview-view .markdown-embed-link svg,
.internal-embed .file-embed-link svg,
.internal-embed .markdown-embed-link svg {
    height: 24px;
    width: 24px;
    opacity: 0;
    display: unset;
}

/* show on hover */
.markdown-preview-view .markdown-embed:hover .file-embed-link svg,
.markdown-preview-view .markdown-embed:hover .markdown-embed-link svg {
    opacity: 1;
}

/* change background on hover, to exactly see what’s embedded */
.markdown-preview-view .markdown-embed:hover,
.markdown-preview-view .file-embed:hover {
    background-color: var(--background-secondary) !important;
}

/* End link show/hide stuff */

/* remove border and scroll */
/* unfortunately needs !important for some themes */
.markdown-preview-view .markdown-embed,
.markdown-preview-view .file-embed {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.markdown-preview-view .markdown-embed-content,
.markdown-preview-view .markdown-embed-content>.markdown-preview-view {
    max-height: unset;
    padding: 0 !important;
    /* !important for "Pisum" theme */
    margin: 0;
    border: 0;
    background-color: var(--background-primary);
    /* Change default background color */
    transition: background-color 0.3s;
    /* Add transition effect */
}

.markdown-preview-view .markdown-embed-content:hover,
.markdown-preview-view .markdown-embed-content>.markdown-preview-view:hover {
    background-color: var(--background-modifier-hover);
    /* Change background color on hover */
}


.markdown-embed {
    max-height: unset;
    padding: 0 !important;
    /* !important for "Pisum" theme */
    margin: 0;
    border: 0;
    background-color: var(--background-primary);
    transition: background-color 0.3s;
}

.markdown-embed:hover {
    background-color: var(--background-modifier-hover);
}


.internal-embed .markdown-embed .inline-embed {
    max-height: unset;
    padding: 0 !important;
    /* !important for "Pisum" theme */
    margin: 0;
    border: 0;
}

/* remove <br> between internal embeds */
.markdown-preview-section div>br {
    display: none;
}


/* remove vertical space added by markdown-preview-sizer */
div.markdown-preview-sizer.markdown-preview-section {
    min-height: unset !important;
    padding-bottom: 0 !important;
}

/* special considerations for printing (PDF export) */
@media print {

    /* remove frontmatter box if "Show frontmatter" was enabled */
    /* Also remove metadata table from "Metatable" plugin */
    pre.frontmatter,
    .obsidian-metatable {
        display: none;
    }
}
669

So the snippet is working for me (I am using the most recent post from @YeshR ), but additional headings are not being hidden.

![[Contacts]] hides “Contacts” header, but ![[Contacts#This One]] still shows “This One”

Is this intentional? Can the subheaders also be hidden in the same way?

670

(Wont let me edit the above)
I added the following and it removed all headings from all embeds, which was my intent.

.markdown-embed h1,.markdown-embed h2,
.markdown-embed h3,.markdown-embed h4,
.markdown-embed h5,.markdown-embed h6{
	display: none; 
}