Hi everyone,
I’m new to Ghost, and my website looks about perfect. The only problem is that, while I like the accent color #e85c57 in the Casper theme, it also seems to change the entire header that color. For that area, which I believe features my site map, etc., I’d like it to be #121212. Anyone think they can help me with this? I can’t code for the life of me… So I’d appreciate it. Thanks!
You can add CSS using code injection (in the head.) Could you post a link to your site? Something like this might be what you want, but I’m not sure what you want. The CSS below changes both the background and the text color. You don’t want both, so delete whichever line you don’t want. And you may not want to change the color for the whole head, so you can delete either .gh-head-brand or #gh-head too.
<style>
.gh-head-brand, #gh-head {
background: #121212;
color: #121212;
}
</style>
When I change to Casper theme, my header image covers everything - the header color appears transparent. So I can’t test it without seeing your site.
Thanks for responding! My website is https://www.mobtownmag.com/
It looks like what you suggested worked, I just had to remove a little of it, so thank you! Do you happen to know how I’d make the body of my posts that same color by chance?
Unfortunately, that menu still turns red color on mobile, now that I look at it.
I don’t see the red. Maybe you fixed it since. I think you can change the body text with:
body {
--color-darkgrey: #121212;
}
Redefining “dark gray” this way is definitely hacking Casper improperly. You’re supposed to be able to set the color schemes using the admin interface, but this doesn’t look as easy as setting the accent color.
Your site does look fantastic.
You think so? I have a specific obsession for darker themes, so I’ve tried very hard to fulfill that while still making them easy it easy to read as a news site. If you’re being serious, I really appreciate it!
The only issue for me, though, is that the header seems to take up to much space on the mobile version of my site. Can’t figure out how to change the mobile version specifically.
Oh yeah, I’m being sincere. I’m not normally into dark themes, but you’ve structured and blended all the elements really well.
For the mobile version, you will need to use a media query, like this:
@media screen and (max-width: 750px) {
.site-logo {
max-width: 450px;
}
Hope that example helps, but I can get more specific to your site, if needed.
I’m quite new to this, so the more specific the better, to be honest!
To be more specific, on the mobile version, there is just all this blank space in the cover photo/header, and I’d like to tighten it up. I put blue marks in the blank space I’m referring to, so I’d appreciate it if you could give me fix specifically for this.
Gotcha, you just want to get rid of some of that extra padding. It looks like it will take a couple of different steps. Try this one first to get rid of the padding that’s at the top of the post list:
@media screen and (max-width: 500px) {
.post-feed {
padding: max(10px) 0 0;
}
}
It looks good on an iPad, so I think this should just be applied to the mobile phone size and that should help.
Let me know and we can take a look at the top section.
All right. I put that in code injection (in between the style tags). Doesn’t seem to have changed anything thus far.
Hopefully I’m not being stupid, and I’m actually following directions correctly here haha. Like I said, new to this.
.site-header-cover {
object-fit: contain;
height: unset;
}
.site-header-content.outer {
min-height: fit-content !important;
}
Try that (within Style tags of course).
No, you are not being stupid. It’s the way the site header image is scaling. Cathy’s suggestion should be good.
Cathy: This fixed the issue on mobile, but it made the header significantly larger on the desktop version of the website. Unsure why.
It fixed my problem on mobile, but it also made the header very large on desktop for some reason.
Yeah, so you can probably just wrap Cathy’s code in the media query.
@media screen and (max-width: 500px) {
.site-header-cover {
object-fit: contain;
height: unset;
}
.site-header-content.outer {
min-height: fit-content !important;
}
}
It worked! Thanks so much, everyone. It’s great that Ghost has a community like this. Not sure how I would’ve been able to do much of anything without all your help.