Hi, I’m trying to make my headers have a nice horizontal bar going through the header line, but not through the header text itself (ie: to the left and right of the text). I’ve tried the CSS below, but cannot get it to work. This CSS works in a plain HTML file, but I think I cannot figure out what selector to use for Obsidian headers. I’m just grabbing h2 in this example.
Hi @ControlAltPete, I actually made headers like your picture a while back so I messed around with it. If I understand your description “headers left justified”, “short bar on the left”, “about a tab’s width” you want something like this:
If so there is probably a much cleaner way of doing it but I’m a hack at css so here is what I came up with:
.cm-header.cm-header-1,.cm-header.cm-header-2 {
display: inline-flex;
align-items: center; /* makes the line in the middle */
}
.cm-header.cm-header-1:before,
.cm-header.cm-header-2:before {
content: ' '; /* How long the line is */
height: 1px; /* How thick the line is */
margin-right: .1em; /* distance from line to header text */
}
/* Simple one */
.cm-header.cm-header-1:before {
background: red;}
/* Fancy one */
.cm-header.cm-header-2:before {
background-image: linear-gradient(270deg, white, red);}
Note this is for Live mode I don’t mess with any other mode.
If anyone knows a better way please post I’d like to see how since I am working on several different headers.
.cm-header.cm-header-1,.cm-header.cm-header-2 {
display: inline-flex;
align-items: center; /* makes the line in the middle */
width: 95%;
right: -30px;
}
.cm-header.cm-header-1:before,
.cm-header.cm-header-2:before {
content: ' '; /* How long the line is */
height: 1px; /* How thick the line is */
margin-right: .1em; /* distance from before line to header text */
}
.cm-header.cm-header-1:before {
background: red;}
.cm-header.cm-header-2:before {
background-image: linear-gradient(270deg, white, red);}
.cm-header.cm-header-1:after,
.cm-header.cm-header-2:after {
content: ''; /* Don't need content here flex-grow will handle it */
height: 1px; /* How thick the line is */
margin-left: .1em; /* distance from header text to after line */
flex-grow: 100; /* Filles in rest of line */
;
}
.cm-header.cm-header-1:after {
background: red;
}
.cm-header.cm-header-2:after {
background-image: linear-gradient(270deg, red, white);}
Again if anyone knows a better way please post it.
Edit because I can’t reply more than 3 times…
If you use multiple font sizes like in my above example the lead in bar will have different lengths
if you want the beginning uniform with different font sizes etc like this:
Then, Instead of:
you can use this bit:
.cm-header.cm-header-1:before,
.cm-header.cm-header-2:before {
content: '';
flex-grow: 5; /* How long the line is */
height: 1px; /* How thick the line is */
margin-right: .1em; /* distance from before line to header text */
}
.cm-header.cm-header-1,.cm-header.cm-header-2 {
display: inline-flex;
align-items: center; /* makes the line in the middle */
width: 95%;
right: -30px;
}
.cm-header.cm-header-1:before,
.cm-header.cm-header-2:before {
content: '';
flex-grow: 5; /* How long the line is */
height: 1px; /* How thick the line is */
margin-right: .1em; /* distance from before line to header text */
}
.cm-header.cm-header-1:before {
background: red;}
.cm-header.cm-header-2:before {
background-image: linear-gradient(270deg, white, red);}
Are you using any themes? I did mine in a new vault, no themes, no plugins, just the 1 CSS file for the headers. I could be doing something wrong as I’m not a CSS expert but as the dev team where I work often say…works on my machine. :slight_smile.
I am attaching the whole vault, see if it works for you. Should look like this (I have since added reading mode and some ugly color):
Looks good when I open your vault, still doesn’t work in my vault. I copied your latest css to my snippets, switched to default theme, dark mode, turned off all of my community plugins. I don’t have any other CSS snippets. I have no idea why it doesn’t work Any idea? Any CSS+Obsidian experts out there?
The above few snippets alone will give you the look from your screenshot above, but if you copy JimK’s JMK-Headers-GradientWingBars.css full file into your vault (from their headers vault snippets folder), and enable it you should be good to go
You could add:
.theme-dark, .theme-light {
to the top, to cover both dark/light modes, but it works as is in dark mode.
@ControlAltPete if what @ariehen suggests doesn’t work I don;'t have any further ideas, sorry. Maybe you could jump on the Discord and ask there if no one comes along here.
I did that originally. I put a copy of JMK-Headers-GradientWingBars.css in my vault and it didn’t work. It actually has awful results, my headers are now all split onto two lines, a blank line where the hidden ## markers are and the header indented on the next line and no horizontal bars anywhere.
Any idea? Any CSS+Obsidian experts out there?