How to change text color for an "Image with text" section only (Narrative theme)

Solved
New Member
10 0 0

I am using the "Narrative" theme and there are 4 "Image with text" sections. 2 of those sections have a black background and I want to change the text color to white. I don't even know which template I have to edit. Please help :) 

0 Likes

Hello 

Add this css at bottom
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

.index-section--image-with-text {
    color: green;
}

  

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes

Success.

Shopify Staff
Shopify Staff
723 40 106

Hi, @andreas20028  !


Katy here from Shopify. I hope all is well with you, and welcome to our Community here. 

 

To adjust this you will need to add some code to the bottom of your theme's Custom Style Sheet or CSS as @oscprofessional  suggests.

 

However in order for each 'Image with text' to appear with different color text, we will need to target them individually, for example using their section ID, as well as both the text and header elements.

 

I have tested this out in my own store using the latest version of Narrative (7.7.4) , and the code structure below does the trick. Though I would like to confirm your own section ID so as to be able to give you the exact code for your store. If you could share a link to your store, I can then share this with you. 

 

If however you are happy to go ahead with this yourself, I have added the general steps - I do strongly recommend trialing this first in a duplicate version of your theme first.

 

Below is the code that I have placed at the bottom of my own CSS file. I have used my own store's Section ID. You would need to sub in your own here - I have created a short demo on how to find this per each relevant section using the dev tools here just in case.

 

 

.feature-row--1478026923193 { /* you will need to sub in your own section ID in place of '1478026923193'*/ 
  .feature-row__heading.h3 {
    color: #fff; 
  }
}

.feature-row--1478026923193 {
  .rte-setting.featured-row__subtext{
    color: #fff;
   }
}

.feature-row--1572432786904 {/* you will need to sub in your own section ID in place of '1572432786904'*/ 
  .feature-row__heading.h3 {
    color: #000;
  }
}


.feature-row--1572432786904 {
  .rte-setting.featured-row__subtext{
    color: #000;
  }
}

 

Also if you prefer, our theme support would be able to set up a selector for this within your theme customizer. It might be handier if you plan on changing this color text down the line. 

 

Feel free to let me know your thoughts or if you need an extra hand with this. 

 

Cheers,

Katy

 

Katy | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
10 0 0

@Katy  Great, thank you! Can you set up a selector within my theme customizer?

0 Likes
Shopify Staff
Shopify Staff
723 40 106

Hi, @andreas20028 !

 

You're very welcome - happy to help.

 

Yes, that's no problem at all. I have sent you an email to verify your details, if you could reply to me when you can that would be great.

 

Cheers,
Katy

Katy | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes