Turning black text white on Baseline Theme

Technical Q&A
,

Topic summary

A user seeks to change black text to white in Shopify’s Baseline theme, specifically on the Hero Slideshow and Image with Text components.

Initial Solution:

  • PageFly-Noah provides CSS code to add to base.css targeting .splide__track .font-heading.text-heading-feature with color: white !important
  • This successfully resolves the slideshow text color issue

Follow-up Request:

  • User asks how to change black text to white in additional full-width image sections
  • Multiple support representatives (PageFly-Noah and Dan-From-Ryviu) offer solutions

Additional Solutions Provided:

  • Dan-From-Ryviu suggests adding custom CSS through Online Store > Themes > Customize for specific sections, targeting .font-heading with color: #fff
  • PageFly-Noah provides alternative code for scrolling items containers

Note: Several code snippets and screenshot references appear corrupted or reversed in the original text, but the core CSS approach remains clear: using !important declarations to override default black text styling with white color values.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

Hello

I’m using the Baseline theme. I want to change the black text on the Hero “Slideshow” and the “Image with text overlay” component to white.

How would I go about doing this?

URL: https://skipsbazaar.com

2

This is Noah from PageFly - Shopify Page Builder App

You can change color by add code below to file base.css:

.splide__track .font-heading.text-heading-feature{
   color: white !important;
}

// if you want change color button
.splide__track .theme-button{
   color: white !important;
}

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

3

Thank you. That worked. What about the other sections with the black type? Currently, they are the full-width image sections with black text. How would I change the text to white?

4

Hi @skipsbazaar You mean change color section it to white ?

Screen Shot 2024-03-25 at 11.06.33.png
Screen Shot 2024-03-25 at 11.06.33.png3350×244 89 KB

5

Hi @skipsbazaar

You can do that by adding this code into Custom CSS in Online Store > Themes > Customize of those sections

.font-heading {
color: #fff;
}

Screenshot 2024-03-25 at 14.21.31.png
Screenshot 2024-03-25 at 14.21.31.png1898×690 201 KB

6

Hi @skipsbazaar You can add code below:

scrolling-items-container scrolling-items scrolling-items-surface{
color: white !important !important;
}