Centering a header with a gradient line

[Liefbread]

Things I have tried

I used the following code (after researching a couple different methods in the forum) to create the following effect.

h1 {
	display: flex;
	width: 100%;
	align-items: center;
}
h1:after{
	content: '';
	background-image: linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0));
	height: .1em;
	margin: .5em;
	flex: 1;
}
h1:before{
	content: '';
	background-image: linear-gradient(270deg, rgba(0,0,0,1), rgba(0,0,0,0));
	height: .1em;
	margin: .5em;
	flex: 1;
}

What I’m trying to do

I’m trying to achieve the same visual effect in editor mode but cannot seem to find the right CSS class for it.

I tried .cm-header-1 and .HyperMD-header-1 after looking through the various divs with developer mode but could not seem to narrow it down.

Thank you!

[Liefbread]

Just replying to note that by changing the following:

.HyperMD-header.HyperMD-header-1 {
	display: flex;
	width: 100%;
	text-align: center; }

I was able to at least get it to center, although I still cannot get the gradient effect to work properly.

[anon12638239]

This works in my vault:

span.cm-header.cm-header-1 {
	display: flex;
	width: 100%;
	align-items: center;
}
span.cm-header.cm-header-1:after{
	content: '';
	background-image: linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0));
	height: .1em;
	margin: .5em;
	flex: 1;
}
span.cm-header.cm-header-1:before{
	content: '';
	background-image: linear-gradient(270deg, rgba(0,0,0,1), rgba(0,0,0,0));
	height: .1em;
	margin: .5em;
	flex: 1;
}

Angel

[Liefbread]

This one worked for me.

Thank you so much

[Liefbread]

Quick follow-up on this one, I notice that the first portion of the code

span.cm-header.cm-header-1 {
	display: flex;
	width: 100%;
	align-items: center;}	

is causing the # markdown for the header to go to a separate line, which is causing a sort of weird phenomenon that all headers seem to look like this until I switch to preview mode and back, is there a way to have the code function without that going on to another line?

Thank you!

[anon12638239]

I didn’t see that in my test file. I won’t be in front of a computer for a couple of days, but I will try it again when I get an opportunity. Perhaps someone else will be able to help in the meantime.

If you are running a specific theme, you could ask the theme author for help as they might know what is causing that.

Angel

[Liefbread]

Odd, I tried disabling all themes and plugins (just in case) leaving only the CSS Snippet that I use and had the same issue.

Posting below just in case anyone else has insight as to something I might have in there that would break it.

/*Change header font */
.view-header-title { font-family: sigurd; }

/* Make background a softer warm white */
.theme-light.minimal-light-white {
	--background-primary: #e4e1e0;
	--background-secondary: #ded7c9;
	--background-secondary-alt: #e4e1e0; }
	
/* Change header font in editing view */
.cm-header-1,
.cm-header-2,
.cm-header-3,
.cm-header-4,
.cm-header-5,
.cm-header-6,
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6  {
    font-family: sigurd knight !important; }


/* Change default document font */
.markdown-source-view.mod-cm6 .cm-scroller {
  font-family: inferi !important; }

/* Change Line Break to a gradient that fades in the center*/
.markdown-preview-view hr,
.markdown-source-view.mod-cm6 hr {
border-image: linear-gradient(to right, #17567a, rgba(0,0,0,0), #17567a);
border-image-slice: .05%; }

/* Change heading colors */
body.colorful-headings {
    --h1-color: #7d1418;
    --h2-color: #35653f;
    --h3-color: #17567a;
    --h4-color: #212121;
    --h5-color: #6c3b96;
    --h6-color: #2a5670; }

/* Change export font */
@media print { 
    .print .markdown-preview-view { 
		font-family: inferi;
    }
}


/* Settings coloration changes */
.vertical-tab-header-group-title {
--text-faint: #514f4e;
--font-family: sigurd !important; }
.dropdown {
background-color: #ded7c9;
--interactive-normal: #ded7c9; }


/* Gradient line on centered H1 */
.markdown-preview-view h1 {
	display: flex;
	width: 100%;
	align-items: center; }
.markdown-preview-view h1:after {
	content: '';
	background-image: linear-gradient(90deg, #17567a, rgba(0,0,0,0));
	height: .1em;
	margin: .5em;
	flex: 1; }
.markdown-preview-view h1:before {
	content: '';
	background-image: linear-gradient(270deg, #17567a, rgba(0,0,0,0));
	height: .1em;
	margin: .5em;
	flex: 1; }
	
span.cm-header.cm-header-1 {
	display: flex;
	width: 100%;
	align-items: center;}	
span.cm-header.cm-header-1:after {
	content: ' ';
	background-image: linear-gradient(90deg, #17567a, rgba(0,0,0,0));
	height: .08em;
	margin: .5em;
	flex: 1; }	
span.cm-header.cm-header-1:before {
	content: ' ';
	background-image: linear-gradient(270deg, #17567a, rgba(0,0,0,0));
	height: .08em;
	margin: .5em;
	flex: 1; }

Thanks to anyone who might have insight!

[anon12638239]

Grabbed a quick look at this on a borrowed Mac, thanks to the kindness of a fellow traveller. I realise now that I do see the two lines when editing (1) all the time if I have source mode on, or (2) when using live-preview mode and the cursor is in the line. I expect it is a quirk of Obsidian’s editor and can’t find a way to prevent the wrapping. Live-preview mode is definitely easier on the eye in this case. That said, it seems:

1. The leading span reference isn’t needed
2. That display: inline-flex; improves the layout (at least in the test vault I am using here)

Hope someone can offer a real solution.

.cm-header.cm-header-1 {
	display: inline-flex;
	width: 100%;
	align-items: center;}	
.cm-header.cm-header-1:after {
	content: ' ';
	background-image: linear-gradient(90deg, #17567a, rgba(0,0,0,0));
	height: .08em;
	margin: .5em;
	flex: 1; }	
.cm-header.cm-header-1:before {
	content: ' ';
	background-image: linear-gradient(270deg, #17567a, rgba(0,0,0,0));
	height: .08em;
	margin: .5em;
	flex: 1; }

Angel