Background formatting for the text under a header

Help
3

Hi @efemkay !

Works like a charm, thanks!

I have applied the first solution (with the Contextual typography plugin) and it does the trick. Works on view mode only, but that is good enough! :blush:

Before the solution:

Screenshot 2022-11-13 at 13.06.00
Screenshot 2022-11-13 at 13.06.001582×628 23.2 KB

After the solution:

Screenshot 2022-11-13 at 13.06.26
Screenshot 2022-11-13 at 13.06.261572×654 24.9 KB

The CSS snippet that does it with the Contextual typography plugin:

.cm-s-obsidian .HyperMD-header-3,
  .markdown-preview-view h3
   {
    background: #3e6185;
    width: 100%;
    padding: 10px;
    border: 2px solid #6a9ed4;
    border-radius: 10px;
    margin-top: 40px;
  }
div .el-h3 + .el-ul {
    background-color: hsla(290, 30%, 30%, 1);
    border-radius: 4px;
}

You can modify it to change any header level or apply it to several heades.

1 Like