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
.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?