Styling header for editing mode

in editing mode my headers look like this:
editing
i want them to look like in reading mode. like this:
reading mode

i tried this class “.HyperMD-header.HyperMD-header-6” in my css snippets for all headers but padding doesnt work it seems.

please help :sob:

What theme and/or CSS are you using now to style the Reading view headings? If you share that, it will be easier for folks to offer suggestions.

i use obsidian.css for styling. i have no theme installed.
vaultName → .obsidian → snippets → obsidian.css

i use this styling for headers, which only applies to reading mode:

h1,h2,h3,h4,h5,h6 {
    background: #5d7aab00;
    padding: 4px;
    border-left: 1px solid rgb(116, 159, 223);
}

then i use this for editing mode:

.HyperMD-header.HyperMD-header-6,.HyperMD-hea...{
    background: #5d7aab00;
    padding: 4px;
    border-left: 1px solid rgb(116, 159, 223);
}

the padding doesnt work here.

Give this a try

.HyperMD-header .cm-header {
    background: #5d7aab00;
    padding: 4px;
    border-left: 1px solid rgb(116, 159, 223);
}
1 Like

thank you so much it works now :smiley_cat:

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.