Change header color on specific page of Craft theme?

elliemichelle · ‎05-29-2023

I'm using the craft theme and trying to change the header color on the front page of my website using the Craft theme. I'd like to change it from black to white. The problem is that when I try going to Customize > Theme Settings > Colors > Text and change the color there, it changes all my headers to white. I only want the text over the banner to be changed. I'm guessing I will have to edit the code, but I'm not sure where to start. Thank you!

PageFly-Lucas · ‎05-29-2023

Hi @elliemichelle

This is Lucas from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

h2.banner__heading.inline-richtext.h0 {

color: white !important;

}

Hope that my solution works for you.

Best regards,

Lucas| PageFly

banned

View solution in original post

PageFly-Lucas · ‎05-29-2023

Hi @elliemichelle

This is Lucas from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

h2.banner__heading.inline-richtext.h0 {

color: white !important;

}

Hope that my solution works for you.

Best regards,

Lucas| PageFly

banned

Made4uo-Ribe · ‎05-29-2023

Hi @elliemichelle ,

We can help you to change the text on the specific section, but would you mind to share your URL website with password? Thanks!

Please don't forget to

Like

and

Mark Solution

to the post that helped you. Thanks!
Sip, savor, and support ☕ – your

Coffee Tip

helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com

muhammad-danish · ‎05-29-2023

Hi @elliemichelle,

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file header.liquid

Step 3: Paste the below code in the style tag of the file -> Save
{% if template == 'index' %}
.header-wrapper{
background-color: #fff !important;
}
{% endif %}

If it works for you, don't forget to like it and Mark it as Solution

SAN_MSWEB · ‎05-30-2023

Hi @elliemichelle

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

1st you need to replace this code from your theme.liquid file:

<body class="gradient"> replace it to
<body class="gradient template-{{ request.page_type | handle }}">

Then you can paste this CSS on your bottom of the base.css file:

.template-index .header-wrapper {background: #fff !important;}

Regards,

San

If it’s helpful to you, please mark it as a solution.

Need Help with Shopify Design, Migration, Speed, or Custom tasks?
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

Change header color on specific page of Craft theme?

Like

Mark Solution

Coffee Tip

Made4uo.com

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links