How can I customize colors for different sections on my website?

Store Design

Topic summary

Customizing different text colors for Image Banner and Slideshow text on a Shopify store via CSS in base.css.

Issue: Initial CSS for the Image Banner also affected Slideshow body text, likely due to broad selectors and use of !important.

Access: Store URL and password were shared; content visibility fixed to allow inspection.

Proposed fix: Specific selectors were provided for:

  • Banner heading and subheading (set to red).
  • Slideshow heading (set to green) and subheading, with advice to remove !important from older rules.

Follow-up: Slideshow subheading/body remained white; a targeted selector with !important corrected the subheading but only on the first slide.

Adjustment: New selectors using .slideshow__slide applied colors across all slides, setting heading (green) and subheading (red) with !important. Remaining inconsistency (2nd/3rd slides subheading red) was resolved by editing the second-to-last line in base.css.

Outcome: Per-section color customization achieved; all slides display intended colors. Code snippets were central; screenshots supported diagnosis.

Key points:

  • Use precise CSS selectors per section.
  • Remove conflicting earlier code; place new rules at the bottom of base.css.
  • Apply !important selectively to override theme defaults.

Status: Resolved.

Summarized with AI on February 9. AI used: gpt-5.
1

Hi there,

I found a code online to customize the color of my Image Banner text and Slideshow text.

However, it seems that the code for the Image banner is also applying the color to the body textof the slideshow.

This is the code I’ve put in base.css

Screen Shot 2022-09-01 at 12.37.55 PM.png
Screen Shot 2022-09-01 at 12.37.55 PM.png598×448 43.3 KB

and this is how it appears online:

(Image Header is on top, Slideshow is on the bottom)

Screen Shot 2022-09-01 at 12.38.16 PM.png
Screen Shot 2022-09-01 at 12.38.16 PM.png546×876 311 KB

I would like each section to have different color text.

Any help would be greatly appreciated!

2

please share the store url also

3

https://topknotinc-wholesale.com/

password is hello’’

4

your store content is hidden

5

Should be good now! Sorry about that

6

This is code for your current settings.

please remove the important from your previous added code.

/* for header heading */
#Banner-template--15520387367064__166195245573c68d78 > div.banner__content.banner__content--middle-left.page-width > div > h2 > span{
   color: red;
}
/* for header sub-heading */
#Banner-template--15520387367064__166195245573c68d78 > div.banner__content.banner__content--middle-left.page-width > div > div.banner__text.body > span{
 color: red;
}
/* for slideshow heading */
#Slide-template--15520387367064__16619621812520365e-1 > div.slideshow__text-wrapper.banner__content.banner__content--middle-left.page-width.banner--desktop-transparent > div > h2{
   color: green;
}
/* for slideshow sub-heading */
#Slide-template--15520387367064__16619621812520365e-1 > div.slideshow__text-wrapper.banner__content.banner__content--middle-left.page-width.banner--desktop-transparent > div > h2{
   color: green; 
}

Please try the following guide to apply formatting to individual elements.

7

Thank you!

Unfortunately the slide show subheading is still white. Also, the rest of the text on slideshow images are all white

8

please paste the below code at the bottom of the base.css file

#Slide-template--15520387367064__16619621812520365e-1 > div.slideshow__text-wrapper.banner__content.banner__content--middle-left.page-width.banner--desktop-transparent > div > div.banner__text > span {
    color: white !important;
}
9

This works!!!

But only on the 1st photo in the slideshow. The others still have white text for header and body

10

Please remove the previous code for the slider and add this one. it will work on all slides.

.slideshow__slide > div.slideshow__text-wrapper.banner__content.banner__content--middle-left.page-width.banner--desktop-transparent > div > h2 {
    color: green !important;
}

.slideshow__slide > div.slideshow__text-wrapper.banner__content.banner__content--middle-left.page-width.banner--desktop-transparent > div > div.banner__text > span {
    color: red !important;
}
11

Kind of worked- all slides are changed but the 2nd and 3rd slide have red subheading text. only the 1st slide is all green

12

you can change it on the second last line of base.css file

13

It’s working now! Thank you so much I really appreciate it!!