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

Solved
Highlighted
New Member
12 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
Highlighted

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Staff
Shopify Staff
754 42 151

This is an 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

 

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
Highlighted
New Member
12 0 0

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

0 Likes
Highlighted
Shopify Staff
Shopify Staff
754 42 151

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
Highlighted
New Member
2 0 0

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 .

0 Likes
Highlighted
Tourist
3 0 1

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!

0 Likes
Highlighted
New Member
1 0 0

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?  

0 Likes
Highlighted

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;
}
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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes