Meta Post - Common CSS Hacks

There’s two ways you could do this using CSS combinators. First:

div.header-1 ~

which select every div with the class “cm-line” underneath an H1. The drawback to this is that you have to have something at the end of the list to break the chain. If you’re going from H1 to H1, that’s perfect. But you couldn’t have a few indented paragraphs, and then one without—the CSS will see them all as the same thing.

Another option is:

div.header-1 +,
div.header-1 + +

The first line selects any .cm-line div directly following an H1, the second line selects the .cm-line directly following that one, and so on, add as many as you like. Drawbacks are that it’s clumsy CSS, and you can only go down as many levels as you define in the CSS. If you know your lists only have ten items or less, for example, that works, but if they vary from 5 to 15, then you’ve got to add in that many lines in the CSS, which is going to get fugly in a hurry. Better to use this one if your lists will be short, probably.


this is exactly what I am thinking about.
I use California Coast theme, which provided seamless embed in “stying setting” plugin. it works fine, but the scroll still exists, I wonder if it’s possible to remove the scroll of embed in Live Preview just like this useful css snippet.

Try this:

/* eliminate scrollbars in transclusions */
.markdown-source-view .markdown-embed-content,
.markdown-source-view .markdown-embed-content>.markdown-source-view {
  max-height: unset;

Re: Live preview for clean embeds.

I essentially did a find and replace for ".markdown-preview-view " to “” (empty string) and it seems to work.

one exception was turning this part

.markdown-preview-view .markdown-embed-content,
.markdown-preview-view .markdown-embed-content > .markdown-preview-view  {


.markdown-embed-content { 

though I’m not really sure.

Edit: Further poking around with element inspector, found I had to add this to remove additional padding:

/* remove padding in editing view */
.markdown-embed .markdown-preview-view {
    padding: 0px;

Interesting that the embeds seem rendered with “Reading mode” styling. Is there a way to make embeds use “Editing mode” styles when in that mode?

1 Like

Forgive me for sounding like an idiot here but can you apply custom CSS to an individual note? Like maybe some CSS snippet that can be tagged in the YAML frontmatter?

What I am trying to do is display a list of movies in a specific way - like this

The issue is I do not use the Minimal theme but instead use Primary.

Also, I don’t want all of my dataview tables to look like this so it would be excellent to localize the CSS to one note.

Any suggestions? Thank you very much in advance! :melting_face:

You can use cssclass in the YAML of the page to load a css snippet.

The top of your note would look like this:

cssclass= "snippet.css"

you can see more here CSS for specific pages - Resolved help - Obsidian Forum

writing the css code to style your content is a bigger challenge, but at least this is how you would connect it to your page.


So it will work the other way around. Instead of calling a css file from the YAML front matter, the YAML front matter assigns your page a class which the CSS calls to apply different formatting based on if that class is present.

Here is an example of what it looks like in YAML and where it shows up:

At the end of the highlighted line you will see that the DIV element now has an additional class called “mycustomcss” at the end.

If you want to target anything inside that DIV you would use CSS selectors like normal with the added condition that they are contained withing a DIV that has the mycustomcss class.

For example, lets say you want H1 elements to be a different color if you have this YAML.
You would add a statement ahead of the selector like this:

color: yellow;

This states we are applying the rules to any span with a class of “cm-header-1” that exists inside a DIV with a class of “mycustomcss”

Feel free to ask me any further questions. Happy coding.


Obsidian newbie here.
Anyone have CSS to make the outline look like this?
It’s a screenshot from one of Nick Milo’s videos and I love how clean the lines and bullets look here. I’ve tried a CSS snippet I found online but my outlines don’t render like this.

1 Like

You can accomplish this with the Outliner plugin. Depending on the theme you use, there might be settings to control how bullets and indentation guides look like under the theme settings or the Style Settings plugin.

1 Like

Thanks PR-C for taking the time to share this helpful information with me. Will look into these options soon!

1 Like

You can also use gradients/background images if you don’t want icon flags:
Easy one would be:
.tag[href^=“#Germany”] {
background-image: linear-gradient(0deg, rgba(255,249,0,1) 26%, rgba(255,0,0,1) 26%, rgba(255,0,0,1) 67%, rgba(0,0,0,1) 67%);
-webkit-text-fill-color: #d8dfdf;
border-block-color: slategrey;
font-weight: 800;
Which would use your image of the flag or the gradient as the background:

Here is my little update for the: clean-embeds-all.css snippet.
It works for my theme.
And credit for the idea belongs to @Moonbase59

    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 {
  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 {
  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 {
  display: none;

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

/*Scherifow update*/
/*fix the lines on top and bottom*/
border-top: 0px solid var(--background-modifier-border);
    border-bottom: 0px solid var(--background-modifier-border);
     padding: 0px 0;
     margin: 0px 0;

/*Fix the scrooling*/
.markdown-embed-content {
    height: fit-content;
    min-height: auto;
    overflow: auto;

/* show on hover */
.markdown-preview-view .markdown-embed:hover .file-embed-link svg,


In case you are new to Obsidian, you maybe don’t know that Obsidian gives you teh opportinity to download different community-colour schemes.
You will find it in Obsidian options.
The community color theme you are looking for is GitHub - nickmilo/LYT-Mode: LYT Mode is for "Linking Your Thinking". It invokes sensemaking and lateral thinking.

I’ve published my CSS snippet for the folder view, it adds outlines on the left of the folders’ file list. I use it alongside with the Obsidian Icon Folder plugin to get a colored folder view.

You can see the snippet parts and the explanations there. I tried to make the CSS as light and clean as possible, if you have any question you can reply me here, on discord (Evelf#1578) or on github.


Neat code blocks

Supports 25 languages. How to install (GitHub repo)

1 Like

Same here. Have you figured this out?

Kanban Redesign

How to install (


Hey, I am relatively new to Obsidian and trying to “warp” the editor’s visuals to my needs. I am new to CSS and JS as well, but want to build at least some understanding of its syntax to do unassisted customizations and combine them in Obsidian.

As of now, I am trying to display blocks of my text in some sort of frame, similar to a chat bubble (see the image below). Blocks are separated by two line breaks (not one) – that is the low level “syntax” I am used to. As this is just to visually guide me, I need to use the feature in editor Mode in live preview.

When it comes to the blocks, I would be happy to just have a different backgroundcolor with no frame. A subtle frame plus rounded edges would be cool as well (see image) but I have no idea how to create them.

I did some research an guess I have to style every element that is not proceeded by two
elements. However, I am still struggling to come up with a code snipped that does the job, especially regarding its supposed to work in live preview (which I do not fully understand yet).

many thx in advance

CSS Cascading Style Sheets) is not a “hack” it is an integral part of styling electronic Hypertext documents.
These are the foundation of what started as the World Wed Web. Hypertext Markup Language (HTML) defines the structure and CSS describes the design.
Markdown was created to “hide” what many though was “ugly” HTML when bloggers
created and published their blogs to the web.
CSS and HTML can be very powerful ways to express ideas thoughts and knowledge. They are far from “hacks” and worth going deeply into.