Editing Newsletter Header Font Color

Solved
New Member
2 0 0

Untitled.pngHow do I edit the section where it says "join..." including the line? I want to change the color to white instead of the black color. The issue is that when I edit the color to white, the body text on my product pages all change to white. How do I independently change the color of the newsletter section to white? PS. I am using the Brooklyn theme.

0 Likes

Success.

Shopify Partner
1838 173 601

Hello Wallace,

 

You will need to add some extra styles for that. But not to worry, it's quite simple to do so let's go to Online Store > Themes and then Actions > Duplicate to create a copy of your current theme as a backup in case something goes wrong. Now do Actions > Edit code and in the left pane of the code editor that opens navigate to the Assets folder and in that open theme.scss.liquid file. You will be looking for a section of code that looks like so

 

/*================ Newsletter area ================*/
.newsletter {
  background-color: $colorNewsletter;
  padding: $gutter 0;
  margin-top: $gutter * 2;

  ... more stuff edited out to keep it short
  ...
  ...

As you can tell from my comments in that code, I left some out to keep it concise. But that's exactly where you will want to add some new styles so the result looks like

 

/*================ Newsletter area ================*/
.newsletter {
  background-color: $colorNewsletter;
  padding: $gutter 0;
  margin-top: $gutter * 2;
  
  .h1, p {
    color: white;
  }
  
  .hr--small {
    border-top: 1px solid white;
  }

See how we added 2 new ones? Being nested within the .newsletter class, they will only affect elements with those classes that are children of any element that has the .newsletter class.

 

Hit save, give that a go and let us know if you need anything else.

 

Best wishes!

I turn coffee in to code - since 1998
1 Like
New Member
2 0 0

Works perfectly! Thank You

0 Likes
Tourist
5 0 0
Does this also work for the boundless theme as well?
0 Likes
New Member
3 0 0

Hi, 

I've been trying to do this but it keeps coming up with error.

I'm obviously missing something as it looks like it should be very simple. Could you give me any more help? 

Thanks

 

0 Likes