Narrative theme: Custom Content Section

Solved
Excursionist
35 2 7

I am using the Narrative theme.  I added code for a widget to the custom content section to display a form on my site.  The widget/form has a couple of data entry fields that should appear as white but they appear as black prior to entry of data. Can someone please tell me where to fix the code so that the fields display white and they are not overriden?  I received the below message from the company that provided the code/widget.  Thank you.

The reason the boxes are black is that the styles (in https://cdn.shopify.com/s/files/1/0252/1939/9746/t/19/assets/theme.scss.css?v=8287778691560722163) overrun the widget styles. If you edit it like in these screenshots it should be ok:
https://monosnap.com/file/BuEAHV0VhTjk9BtYKtkZOOVI9EsnF6
https://monosnap.com/file/iUYGdSaAQ2Iog0zYt6YiMaTEt23VKp

Shopify Partner
12006 1479 4347

This is an accepted solution.

@Kay30 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Excursionist
35 2 7
Shopify Partner
12006 1479 4347

This is an accepted solution.

@Kay30 

Thanks for the details 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.custom-content input[type='text'] {
    background: #fff;
    color: #000;
}
.custom-content input[type='text']::placeholder {
 color: #000;
opacity: 1;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Excursionist
35 2 7

Thank you so much!!  It worked. It's still showing with white fields on the page which is not the home page.  I have this widget on another page too.  Do I need to paste the code somewhere else too or do I need to use different code? Here's the link.

https://www.fiercebolddigital.com/pages/lgaudit

Shopify Partner
12006 1479 4347

This is an accepted solution.

@Kay30 

Thanks for it, yes please add this code

.ssa-leadgen-widget__input {
    background: #fff;
    color: #000;
}
.ssa-leadgen-widget__input::placeholder {
 color: #000;
opacity: 1;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Excursionist
35 2 7

Thank you.  This code did not fix the issue with the widget on the other page.

0 Likes
Shopify Partner
12006 1479 4347

This is an accepted solution.

@Kay30 

Thanks 

can you please add me to the staff account so i will check all pages?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Excursionist
35 2 7
Click to expand...
Click to expand...
You have been added.
Shopify Partner
12006 1479 4347

This is an accepted solution.

@Kay30 

I have done this, please check.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing