Does anyone know how I can change the font color and/or weight for these specific slide(s)?

[glimmer_clothin]

I would also like to know how to change the font color for either desktop or mobile view, since the mobile view’s text color is different from the desktop view. Ideally speaking I would like the font color to be white on desktop and mobile view on the first slide, and black on the second slide for both mobile and desktop. web URL: glymmerclothing.com

[BSS-Commerce]

Hi @glimmer_clothin

Please follow these steps:

1. From Shopify admin → Online store → Edit code:

2. You find the file base.css and add the following code at the end of the file:

#Slide-template--16656109207797__1c333427-4218-4d8f-8be3-4cc128bfc039-1 .slideshow__text * {
  color: #ffffff;
}

#Slide-template--16656109207797__1c333427-4218-4d8f-8be3-4cc128bfc039-1 .banner__buttons .button {
  background-color: transparent;
}

#Slide-template--16656109207797__1c333427-4218-4d8f-8be3-4cc128bfc039-1 .banner__buttons .button:after {
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(255, 255, 255, var(--border-opacity)),0 0 0 var(--buttons-border-width) rgba(var(--color-button),var(--alpha-button-background));
}

• We’ve noticed that you’re placing text below the image on mobile, so the white font will match the background. So you can change the option to always show on the slide or you can use the following code to only apply on desktop:

@media (min-width: 750px) {
  #Slide-template--16656109207797__1c333427-4218-4d8f-8be3-4cc128bfc039-1 .slideshow__text * {
    color: #ffffff;
  }

  #Slide-template--16656109207797__1c333427-4218-4d8f-8be3-4cc128bfc039-1 .banner__buttons .button {
    background-color: transparent;
  }

  #Slide-template--16656109207797__1c333427-4218-4d8f-8be3-4cc128bfc039-1 .banner__buttons 
  .button:after {
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(255, 255, 255, 
    var(--border-opacity)),0 0 0 var(--buttons-border-width) rgba(var(--color-button),var(--alpha- 
    button-background));
  }
}

• Here is the result:

I hope that it will work for you.

[glimmer_clothin]

Thanks a lot, it’s almost complete! Right now I only want to replace the border color of the button in the second slide to black (see screenshot) which I’ve tried to do with the following code but doesn’t seem to work:

#Slide-template--16656109207797__1c333427-4218-4d8f-8be3-4cc128bfc039-2 .banner__buttons .button {
  border-color: #000000;
}

[glimmer_clothin]

I’m also trying to change the font size of the heading in the first slide with the following code, but it doesn’t seem to work either.

#Slide-template--16656109207797__1c333427-4218-4d8f-8be3-4cc128bfc039-1 .banner__heading.h0 * {
  size: 120px;
}

[BSS-Commerce]

Hi @glimmer_clothin

You can change the following:

#Slide-template--16656109207797__1c333427-4218-4d8f-8be3-4cc128bfc039-2 .banner__buttons .button:after {
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--color-button-text),var(--border-opacity)),0 0 0 var(--buttons-border-width) rgba(0,0,0,var(--alpha-button-background));
}

• Change color code at rgba(0,0,0,var(–alpha-button-background)) with RGB color code

• Here is the result:

I hope that it will work for you.

[glimmer_clothin]

Thanks, fixed the job, do you have a solution to the other question I asked, it seems like you missed the question, it’s somewhere above, much thanks for your help!

[BSS-Commerce]

Hi @glimmer_clothin

We’re sorry for missing your question.

Regarding the fact that you want to change the font-size heading, you should not use * because it will only style the child elements within it, not it. So the code you just need to change as follows:

#Slide-template--16656109207797__1c333427-4218-4d8f-8be3-4cc128bfc039-1 .banner__heading.h0 {
  size: 120px;
}

A note that the font-size of the heading is currently 120px.

I hope that this can help you.

[glimmer_clothin]

Hello, thanks for your quick answer. It appears to be working, we only forgot to include font-size in the code, but I managed to solve it. Thank you for all the help!