Colorchanging header

Solved

Colorchanging header

CorazonRTS
Visitor
2 0 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!

Accepted Solution (1)

CodingFifty
Shopify Partner
562 85 105

This is an accepted solution.

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 <style> block:

    <style>
    {% if template == 'index' %}
       .header__icon {
          color: white !important;
       }
    {% endif %}
    </style>
Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com

View solution in original post

Replies 3 (3)

CodingFifty
Shopify Partner
562 85 105

This is an accepted solution.

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 <style> block:

    <style>
    {% if template == 'index' %}
       .header__icon {
          color: white !important;
       }
    {% endif %}
    </style>
Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
CorazonRTS
Visitor
2 0 1

Hi Codingfifty!

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

 

Sometimes I am surprised of my own stupidity haha.

 

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

CodingFifty
Shopify Partner
562 85 105

Please mark and like the solution @CorazonRTS 

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com