Changing the header font colour in Casper

Themes
1

Hello everyone,

What would I add to code injection to change the font colour of the header in Casper?

Thank you for your help.

1 Like
2

You can try either gh-head-brand which is used in the header or site-title which is used in the hero section on the homepage.

.gh-head-brand { color: #ffff00; }
3

Thank you. I think some of my other code injection is messing with it. That code is:

<style>
.gh-head, 
.site-header-content {
    background: #000000; }
</style>
4

It also looks like it is only working on smaller screens.

5

Can you copy and paste the entire contents of your code injection here?

6

Sure, although I’ve chopped out my Fathom Analytics code that sits at the top.

<!-- Removes photo and name from posts since I am the only author. -->
<style>
.author-list,
.author-name,
.post-card-byline-content span:first-of-type {
    display: none;
}
.post-card-byline-content {
    margin-left: 0;
}
</style>
<!-- / Removes photo and name. -->

<!-- Changes header to separate color from text. -->
<style>
.gh-head, 
.site-header-content {
    background: #000000; }
</style>
<!-- / Changes header to separate color from text. -->

<style>
.site-title,
.gh-head-brand { color: #8F3A84; }
</style>
7

So the first thing is that you should have all of your CSS within one set of <style></style> tags.

The other thing is that you will want to do comments inside those style tags /* like this */

So try:

<style>

.author-list,
.author-name,
.post-card-byline-content span:first-of-type {
    display: none;
}

.post-card-byline-content {
    margin-left: 0;
}

/* Removes photo and name. */

.gh-head,
.site-header-content {
    background: #000000;
}

/* Changes header to separate color from text. */

.site-title,
.gh-head-brand {
    color: #8F3A84;
}

</style>

And let me know if that’s what you’re wanting your header to look like.

8

Thank you for cleaning things up. Very much appreciated.

However, it only seems to be changing the colour of the hamburger and nothing else.

9

What are you trying to change the colour of? The title of your site that’s in the middle of the header? On the test site I’m running, using the CSS I pasted above, I’m seeing a header with a black background and purple title on both small and large screens.

Or are you referring to changing the colour of the nav menu items that appear when you click the hamburger icon on a small screen? Because at the moment, nothing in your code is targeting those elements, so that’s why they aren’t changing colour.

10

Ah! I think I realize my mistake. I should’ve said the text of the navigation links.

My apologies.

11

No problem! Do you know how to open up the Developer Tools Inspector (in Firefox) or the equivalent in whichever browser you are using, to find out what selectors you will need to target?

If not, this would be a great opportunity to learn, because the Developer Tools are going to become your best friend :grinning:

12

Unfortunately, I can’t do use it on my setup (iPad). Thank you for all your help.

13

You should be able to use this Tools - Safari - Apple Developer I think?

14

Unfortunately, it doesn’t work without a computer. No worries. I’ve tracked one down. Thank you.