Organising The Bible in Obsidian

Knowledge management
64

Joe,

This issue has to do with how CSS rules are run.

CSS rules cascade according to specificity. The rule that is more specific will take precedence over one that is less specific. If two rules have the same level of specificity, then the latter one will take precedence.

With the code above it will affect any H6 that is inside a preview-view box. This will apply to anything in preview mode. In order to only apply to H6 elements inside an embed, you will want two rule sets. One less specific that effects all preview H6 elements. Then one more specific that effects all H6 elements inside embedded content.

There is already a general rule in the minimal theme so if you like that then no need to change it. If you want to change it you can create a selector as below:

.markdown-preview-view h6 {
    CSS for all H6 preview elements goes here
 }

Then to make a more specific rule for the embedded H6 elements:

div.markdown-embed .markdown-preview-view h6 {
    position: absolute;
    left: 5px;
    top: 1px;
    margin: 0px;
  }

If you only use this second rule and use minimal theme as your general rule it looks like this:

image
image3110×967 95.3 KB

For reference, here’s the entire snippet:

div.markdown-embed .markdown-preview-view h6 {
    position: absolute;
    left: 5px;
    top: 1px;
    margin: 0px;
  }

.markdown-preview-sizer
{ 
  padding-left: 40px;
  padding-right: 20px;
}

.markdown-preview-view .markdown-embed-content p:first-child {
    margin: 0px;
}

div.markdown-embed-link {
    visibility: hidden;
}
3 Likes