Change color of blog post article header?

Store Design
,

Topic summary

A user seeks to change the background color of their blog post article header, which currently displays an unexpected light greenish color not found in their theme settings.

Solutions Provided:

  • Brett_Helium suggests adding custom CSS through the theme customizer’s ‘Default blog post’ template, targeting .article-template header with a background color override.

  • PageFly-Victor and GemPages both recommend adding CSS code to the theme.liquid file (above </head> or </body> tags respectively), though Victor’s initial solution addressed title color rather than background color.

Current Status:

The original poster clarified they need the background color changed, not the title color. A secondary user found the solutions helpful and has extended questions about changing colors for:

  • Blog comment sections
  • Blog landing page headings
  • Policy pages

These additional questions remain unanswered. All solutions involve custom CSS modifications to the theme files.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

How do I go about changing the color (currently a light greenish color) of the Blog Post Article Header? This particular green is not in any of my theme settings so I am not sure where the theme is pulling it from.

Click here to see an example post!

Thank you!

2

Hey there! I am not sure where the color would be coming from if it is not one of your theme colors, but you could add some CSS to override this.

Navigate to the ‘Default blog post’ template in your theme customizer, select the ‘Blog post’ section from the left sidebar, and you should now have a custom CSS box in the right sidebar where you can enter the following:

.article-template header {
    background: #FFFFFF;
}

This will set the background to white, or you can change it to any other hex color that you want.

Hope that helps!

3

Hi @meganjennifer

This is Victor from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyVictor_0-1680658366700.png
PageFlyVictor_0-1680658366700.png1409×333 78.6 KB

Hope this can help you solve the issue

Best regards,

Victor | PageFly

1 Like
4

Hi @meganjennifer ,

Glad to support you today.

You can check out my suggestion below to get your concern resolved.

  1. Go to Edit code on Online Store:

GemPages_1-1680666386710.png
GemPages_1-1680666386710.png400×163 25.3 KB

  1. add my code above the tag on Theme.liquid:

*Note: You can replace my color code to another color you want.

Hope you find my answer helpful!

Kind & Best regards,
GemPages Support Team.

5

Hi Victor,

Thank you for your response! I was looking to change the background color, not the title color. Apologies for the confusion!

6

Hi @meganjennifer No worries,

Is there anything else that i can help?

7

Thanks. This was really helpful for me.

Any advice on how to change the colours of the blog comment section and the Blog landing page heading on the dawn theme? Also any ideas on how to do the same for the policy pages?