Change colour of slideshow text from white to black

Store Design
1

Hi there, I’d like to change the desktop slideshow text colour and button outline and text from white to black on our homepage. Ideally just the first slide in the image attached but if it has to be on all slides then we can make it work. I’m using the Dawn 2.0 theme. Our website is www.muthapuppa.com.

Thanks in advance for your help!

Screenshot 2022-06-14 at 12.19.56.png
Screenshot 2022-06-14 at 12.19.56.png2856×1454 542 KB

2

Hi!

From briefly looking at the code, I believe you should be able to edit these options by going to ‘Online Store’, ‘Themes’ and then ‘Customize’ on the current theme you’re using.

If not I can request access and code it into your CSS files for you if you aren’t familiar with coding.

3

Hi @gbmangione , this is not a problem, but in that case your text is not that visible, do you wanna proceed with this?

Screenshot 2022-06-14 at 13.38.17.png
Screenshot 2022-06-14 at 13.38.17.png764×353 68 KB

4

Hi Marina, I would be changing the slideshow image to white so that the text shows up : )

5

Hi Woody, I’m not technical unfortunately. Have been winging it : )

6

Hi!

I’d be happy to take a look for you, just need your STORE.myshopify.com link and I can request collaborator access :slightly_smiling_face:

7

Thanks Woody, would you be able to make this change for the first slide only (screenshot)?

8

I’ll take a look at your code to see if it’s possible once I have collaborator access as it’ll be much easier for me to work out rather than inspecting the page

9

Understood: https://muthapuppa.myshopify.com/

10

Hi,

I need a collaborator request code so I can request access, you’ll find it on your ‘Plan and Permission’ section of your shopify admin

11

6527

12

@WoodyDev do you now have access?

13

Hi!

Yes sorry was trying to figure out how to edit the first slide only but it doesn’t seem possible, so have applied the change to all of the slideshow

14

That’s brilliant. Thank you. Could you please post instructions on how to and also how to revert back to how it was? I’ve seen others with the same issue so that would be helpful. Thanks, @WoodyDev , you’re a legend.

15

No problem at all, happy to help.

For the button go to:

section-image-banner.css and use ‘CTRL + F’ to find the following:

.banner--desktop-transparent .button--secondary {
    --color-button: 255, 255, 255;
    --color-button-text: 255, 255, 255;
    --alpha-button-background: 0;
  }

Then change all of the ‘255’ to ‘0’

For the the header text, stay in the same CSS file and search for the following:

.banner__heading {
  margin-bottom: 0;
}

and replace it with

.banner__heading {
  margin-bottom: 0;
  color: black;
}

Finally for the text, go to component-slideshow.css and search for:

@media screen and (min-width: 750px) {
  .slideshow__text.slideshow__text--left {
    align-items: flex-start;
    text-align: left;
  }

and replace it with

@media screen and (min-width: 750px) {
  .slideshow__text.slideshow__text--left {
    align-items: flex-start;
    text-align: left;
    color: black;
  }
16

Thanks, Woody. Can I now remove permissions for you?

17

Yep if that’s resolved for you, mark my answer as the resolution and feel free to remove my permissions from your store :grinning_face_with_smiling_eyes: