How to change color of newsletter form success message in Debut?

fancynothing
Tourist
5 0 2

I've just launched my shop, and I am having difficulty changing the background + text color of the form success message in the Debut theme – currently, the message appears in white text inside a white box, so it's unreadable. I've tried adjusting every conceivable color setting in the theme and none of them seem to affect this message.

 

I found the following topic that addresses how to change these colors in the Brooklyn theme (https://community.shopify.com/c/Shopify-Design/Form-Success-message-Edit-colors/td-p/483904), but when I implement this code in the theme.scss.liquid file of my theme, it has no effect on this message.

 

I should add, this is specifically affecting the text displayed after a user enters their email in the Mailing List form in my footer.

 

I have successfully changed the text of the message using the language settings, but need to figure out how to adjust the colors so that users can actually read the displayed message. Please help!

fancynothing
Tourist
5 0 2

I should add, this is specifically affecting the text displayed after a user enters their email in the Mailing List form in my footer.

OTM
Shopify Expert
667 170 236

Hi, @fancynothing ,This is Evita from On The Map.

 

Can you tell me where can I find your success message?

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
fancynothing
Tourist
5 0 2

The Success Message appears above the "email address" form field in the lower right corner of the footer under the "Mailing List" heading after a user enters their email address, clicks the "Sign Up" button and completes a captcha. 

 

It appears as a white box with white text inside. I've attached a screenshot where I have the text highlighted to show it is, indeed, displaying my newsletter signup success language. But without being able to change these colors, it has the appearance of a blank form field popping up! I haven't done any css modification to the debut theme, so I'm surprised I can't find any past posts about other people having this same issue using this theme!

 

Screen Shot 2019-09-20 at 3.23.04 PM.png

0 Likes
fancynothing
Tourist
5 0 2

Here is what it looks like without the text highlighted. You can see why this is a problem. Screen Shot 2019-09-20 at 3.22.59 PM.png

0 Likes
OTM
Shopify Expert
667 170 236

Add this code to Assets/theme.scss.liquid at the bottom: 

.form-message.form-message--success {
   color: #e400f7!important;
}
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
fancynothing
Tourist
5 0 2

That had no effect on the form success message, it still appears as white text in a white box across all browsers. This is quite frustrating, as this is a basic theme that I'm using without having made any edits to the CSS. 

0 Likes
OTM
Shopify Expert
667 170 236

Make sure you copied everything and put the code on the bottom of the file. For me everything works fine - https://prnt.sc/paf05s

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
KristinW
Excursionist
27 2 4

This is probably too late to be helpful - sorry just I saw - this is what worked for me (and also changes the font color in the message customers see when they use the "Contact Us" form):

 

In Debut under Edit Code > theme.scss.liquid > line 395 > $color-success: (change to the color you would prefer)

estepa79
New Member
2 0 1

Were you ever able to get this figured out?

0 Likes