FROM CACHE - en_header

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

Solved
andreas20028
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 🙂 

Accepted Solution (1)

Accepted Solutions
Katy
Shopify Staff
Shopify Staff
779 43 174

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

 

Please note: This account is no longer regularly monitored.
 - If you need assistance please do start a new topic (referencing an older topic/post if you find this helpful).
 - Thank you for your understanding. We hope you enjoy exploring the Community.
 - To learn more visit the Shopify Help Center or the Shopify Blog.

View solution in original post

Replies 18 (18)
oscprofessional
Shopify Partner
12560 1937 2488

Hello 

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

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

  

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Katy
Shopify Staff
Shopify Staff
779 43 174

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

 

Please note: This account is no longer regularly monitored.
 - If you need assistance please do start a new topic (referencing an older topic/post if you find this helpful).
 - Thank you for your understanding. We hope you enjoy exploring the Community.
 - To learn more visit the Shopify Help Center or the Shopify Blog.

andreas20028
New Member
12 0 0

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

Katy
Shopify Staff
Shopify Staff
779 43 174

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

Please note: This account is no longer regularly monitored.
 - If you need assistance please do start a new topic (referencing an older topic/post if you find this helpful).
 - Thank you for your understanding. We hope you enjoy exploring the Community.
 - To learn more visit the Shopify Help Center or the Shopify Blog.

Kai20
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 .

EdOMalley
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!

cjurzenski
New Member
3 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?  

oscprofessional
Shopify Partner
12560 1937 2488

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;
}
Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Graeme101
Tourist
9 0 4

Hi there, I'm having the same problem but with the brooklyn theme, I wish to change the colour of the header within the Image with text section on my homepage. 

 

https://www.hydria.store/?key=fe2d0f2886880be9c1de1d9070509544b80fade391117f28679c8dd77f83354a

Graeme101
Tourist
9 0 4

Hi there, is it possible to change the color of the header only in an image with text section? 

 

https://www.hydria.store/

example.PNG

oscprofessional
Shopify Partner
12560 1937 2488

Hi,

Do you want to change this text color?

which color you want?

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Graeme101
Tourist
9 0 4

Hi, yes I'd like to change the color of the header green whilst maintaining the subtext black 

oscprofessional
Shopify Partner
12560 1937 2488

 

.feature-row__item h2.h3 {
    color: #a5ba93 !important;
}

 


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

Note : If you want change color then add in place of #a5ba93

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Graeme101
Tourist
9 0 4
yumina
Tourist
15 0 1

Hi! I have the same issue using Narrative Theme. I want to change a background colour for a featured product section. Here is my store URL. I want to change the colour from white to black #162020. I also want to change a text colour in that section to white, so it can be readable with a black background

I've already tried to use this code for a background colour but it didn't work

#shopify-section-featured-product {

background-color: #162020; !important;

}

 

Could you please assist me with that? Thanks so much!

oscprofessional
Shopify Partner
12560 1937 2488
div#shopify-section-1486649811524 {
    background: #162020;
    color: white;
}
.featured-product__content-header h2.product__title.text-center {
    color: #fff;
}button.btn.btn--to-secondary.btn--full.product__add-to-cart-button.shopify-payment-btn.btn--secondary {
    color: white;
}
a.product__more-details.btn.btn--secondary.btn--primary-color.btn--clear {
    color: #fff;
}
.product__policies.rte a {
    color: #fff;
}

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

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
yumina
Tourist
15 0 1
oscprofessional
Shopify Partner
12560 1937 2488

Hi @yumina ,

You can accept the solution !

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing