Edit header background in Edition theme without changing accent color

Themes
1

Hey all, I am trying to edit just the background color of the header in Edition, but keep the accent color different. In essence, I’d like to be able to have a different color for the header background and the accent.

I tried altering the CSS in the .header file, but it doesn’t seem to respect my changes and overrides with the accent color no matter what, even if I use !important.

Any ideas? I know the basics but am not a developer. I used ghost before and was always able to customize this stuff, but it seems like maybe something changed.

Screen Shot 2022-04-20 at 11.31.07 AM
Screen Shot 2022-04-20 at 11.31.07 AM1169×162 10 KB

2

What if you put the CSS rule in your Code Injection Site Header? (Go to Settings > Code Injection > Site Header.)

There, you’ll need to put the CSS in a <style> tag.

<style>
.with-alt-header .site-header {
background-color: #ff0000; /* Add your color */
}
</style>

Let me know if that works!

1 Like
3

That did the trick! Thank you, sir. A little thing but it really helps.

1 Like