Editing Newsletter Header Font Color

Solved
wallace432
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
KarlOffenberger
Shopify Partner
1867 182 813

This is an accepted solution.

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!

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
wallace432
New Member
2 0 0

Works perfectly! Thank You

0 Likes
AFTrotter
Tourist
5 0 0
Does this also work for the boundless theme as well?
0 Likes
SharonWemyss
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
ttezera1
New Member
5 0 0

How does this work for the minimal theme I do not have a newsletter area that looks like that?

 

ttezera1_0-1621186733896.png

 

0 Likes