Change header background color

Themes
1

My ghost blog posts using the latest casper theme seem really bland color wise. Is there a way to add colorful outlines to my blog post headers?

For example, H2 could have a light blue outline, H3 could have a light green outline, H4 could have a light orange outline.

I attached an image to show what it could look like.

Headers
Headers805×851 72.1 KB

2

Code injection would be a good way to accomplish that.

1 Like
3

I tried using code injection, but i only want it on the blog posts, not on pages or homepage.

/* Style for H2 elements */ h2 { border: 6px solid #0050DB; /* Green border */ padding: 13px; } /* Style for H3 elements */ h3 { border: 4px solid #d4af37; /* Blue border */ padding: 11px; } /* Style for H4 elements */ h4 { border: 2px solid #000000; /* Orange border */ padding: 9px; }

This is what i have been trying to use. But the colored outlines appear everywhere on the site.

They also appear around my author name and header cards which i dont like either.

4

Right, so you need better selectors. For your current theme, try:

.article.post h2 { stuff here}

That should restrict things a bit - tweak as necessary!

5

Screenshot 2023-04-13 154953

7

Here is the code I have. It still shows on the pages and around my author name.

<style>
  /* Style for H2 elements */
 .article.post h2 {
    border: 6px solid #0050DB; /* Green border */
    padding: 13px;
  }

  /* Style for H3 elements */
 .article.post h3 {
    border: 4px solid #d4af37; /* Blue border */
    padding: 11px;
  }

  /* Style for H4 elements */
 .article.post h4 {
    border: 2px solid #000000; /* Orange border */
    padding: 9px;
  }
</style>

And still shows a border around my header cards.

Screenshot 2023-04-13 155315
Screenshot 2023-04-13 1553151856×542 12.6 KB

8

What about trying the selector: .post-template .gh-content > h2?

9

This worked for everything except the header cards in my post! Thanks! Is there something I can add to remove it from the header card?

10

Did you include the > h2? The angled bracket (>) should prevent it from targeting the header card.

11

Thanks @RyanF

This is working!

2 Likes