Colorchanging header

Technical Q&A

Topic summary

A user needed help changing header colors on their landing page. Their website has a transparent header with black text and icons, which became invisible against a dark background image on the homepage.

Initial Problem:

  • Attempted to use {% if template == 'index.json' %} to conditionally style the header
  • Code wasn’t working as expected

Solution Provided:

  • Change template reference from 'index.json' to 'index'
  • Wrap CSS code in proper <style> tags
  • Verify the correct class name (.header__icon) via browser inspection

Resolution:
The issue was resolved. The user discovered they had mistakenly placed the closing </style> tag inside the conditional statement, which broke the code structure. After correcting the placement, the color-changing header now works correctly.

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

Hi,

Ive setup a website for the Company Corazon RTS.

I have designed a transparent header with a black title & black icon, because the website is white.

The problem occurs because the landingpage consists of a dark image. I have tried changing the color using {% if}

But I am unsurten if I have set it up correctly, the code is placed in the header but I am not sure how to target the ‘Index.json’

Currently I followed what what other people have done, when reading here on the forums

{%if template == ‘index.json’}

.header__icon{

color: white !Important;

}
{%endif}

Please let me know if any of you see the problem, which I cant seem to solve!

2

Hi @CorazonRTS ,

To fix the issue, try this:

  1. Use index instead of index.json:

    {% if template == 'index' %}
   .header__icon {
      color: white !important;
   }
{% endif %}

  2. Ensure the class .header__icon is correct by inspecting the element.

  3. Place the code inside a block:

    <style>
{% if template == 'index' %}
   .header__icon {
      color: white !important;
   }
{% endif %}
</style>
3

Hi Codingfifty!

Thank you so much for your help with the setup, I had tried this solution earlier, but realised I had placed inside the {%if}

Sometimes I am surprised of my own stupidity haha.

Never the less, Thank you so much - It worked perfectly!

1 Like
4

Please mark and like the solution @CorazonRTS