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

New Member
5 0 0

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!

0 Likes
New Member
5 0 0

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

0 Likes
Shopify Expert
665 170 199

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
New Member
5 0 0

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
New Member
5 0 0

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
Shopify Expert
665 170 199

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!
0 Likes
New Member
5 0 0

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
Shopify Expert
665 170 199

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