Change Publication Description font color

Developer help
1

I am using the latest version of Ghost and the Casper theme. My address is mcquinnreport.com.

Due to the fact that my Publication Cover is white in color, my Publication Description is not showing.

It looks like I need to change the font color to black or perhaps even green.

How can I do that?

Any help much appreciated.

2

Something like

<style>
.site-header-content {
  color: var(--ghost-accent-color); /* or color: #14171a of you don't want to use your accent color with it*/
  background: none;
}
</style>

in code injection should do it :slight_smile:

3

Ah that has done the trick.

Your help is much appreciated Vikas!

4

How could I change to font to something with a bit more style?

5

That depends on which font you’re trying to use. If you use something like google fonts, they tell you what you need to do to get the font loaded on your site

6

I tried:

.site-header-content {
color: var(–ghost-accent-color); /* or color: #14171a of you don’t want to use your accent color with it*/
background: none;
font: Syne+Mono;
}

But the font on my Publication Description does not seem to be changing.

7

How do you get the content to appear like the code in your post above?

8

I don’t see the Google font being loaded; have you added this block?

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap" rel="stylesheet">
9

Surround the block with 3 backtics ~

```
```
10

Does that go in the code injection? In between the style tags?

11

It does go into code injection but not in between the style tags. This is how the font gets downloaded :slight_smile:

12

This is what I’ve got:

<link href="https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap" rel="stylesheet">

<style>
.site-header-content {
  color: var(--ghost-accent-color); /* or color: #14171a of you don't want to use your accent color with it*/
  background: none;
  font: Syne+Mono;  
}
</style>

<style>
    a.gh-head-button {
        display: none;
    }
</style>```

But it doesn't seem to rendering.
13

Change your font declaration to this: font-family: 'Syne Mono';

14

Yes I didn’t notice the font-family part.

TYVM Vikas!

You have made my day!

1 Like
15

Does the code injection overrule all of the code in the theme’s zip file, or how does it work?

I would also like to implement a major change to the portal pop-up. How could I do that? Would it be via code injection or would I have to edit the theme’s zip file?

Edit: I have sorted the portal issue described above, kind regards @vikaspotluri123 for your assistance.