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

[andreas20028]

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 :) 

[oscprofessional]

Hello andreas20028,

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

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

[Katy · Accepted solution]

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

[andreas20028]

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

[Katy]

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

[Kai20]

Hi, @Katy , 

I'm using Debut theme , addition to what you explain , would you guide us on how to proceed if we want to change on each section only a part of the text , e.g : core text in black and some key words are on red . ( xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx) .

I'm novice with coding , it would be helpful if you could include and example of code to add at the end of theme css liquid .

Thank you very much .

[EdOMalley]

Thanks a lot for this - I tried to follow the directions on your video, but I am not getting specific section id numbers - just something like this:

<div id="shopify-section-rich-text" class="shopify-section index-section index-section--rich-text"><div class="rich-text rich-text--rich-text" data-section-id="rich-text" data-section-type="rich-text">
  <div class="grid page-width">
    <div class="grid__item text-center medium-up--two-thirds medium-up--push-one-sixth">
      
        <h2 class="rich-text__heading separator                     has-animated" data-animate="">
          Talk about your brand
        </h2>
      <div class="rich-text__body-text rich-text__body-text--medium rte-setting">
        <p>ZXZXZXI am typing this so I can find it in the code.</p>
      </div>
      
    </div>
  </div>
</div>


</div>

Is this because my site is not live yet (I'm just evaluating things to see if Shopify is the right solution for me.

Thanks!

[cjurzenski]

Hi there

I am looking to change the font for my image/text section on my homepage - cranel.myshopify.com. I want to make the background red - and the font white. I also want to make that particular accent white as well. Is this possible?  

[oscprofessional]

Hello cjurzenski,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.feature-row.feature-row--feature-row-0.feature-row--small.feature-row__image-crop--none {
    background-color: red;
}
.feature-row__heading::before {
    background-color: white;
}
.feature-row__heading.h3.separator.has-animated {
    color: white;
}
.rte-setting.featured-row__subtext {
    color: white;
}