css for success message tick icon

Resolved mar1as
(@mar1as)

4 years, 8 months ago

Hi,
I cannot find anywhere to change the color of the success message icon in the color settings, could you tell me what the css is please so I can add it to the custom section? I’ve changed the background and font color ok that way but I am having difficulty changing the icon.
Many thanks

Viewing 8 replies - 1 through 8 (of 8 total)

Plugin Support Laura – WPMU DEV Support
(@wpmudev-support8)

4 years, 8 months ago

Hi @mar1as

I hope you’re well today!

I admit I’m not quite sure which “success message tick icon” do you mean. Would you please share some screenshot of that part that you want to style?

If you could additionally share a link to a page where I could also see that “success message tick icon” live in action, it would also help a lot!

Best regards,
Adam

Thread Starter mar1as
(@mar1as)

4 years, 8 months ago

Hi Adam,

Sorry but the page is hidden at the moment until I get it all working.

After someone subscribes by hitting the submit button a message appears saying (in my case) “thanks for subscribing”. Above that there is a tick icon which I haven’t added and I cannot find anywhere in your settings to change the success message styling other than custom css? I have changed the text ok to white but I want the icon to also be white rather than blue.

Thanks
Plugin Support Patrick – WPMU DEV Support
(@wpmudevsupport12)

4 years, 8 months ago
Hi @mar1as

I hope you are doing well.

If you are looking to edit the colour only you can use the interface: https://monosnap.com/file/XCYDOQbiBwyavhMUYfhDOfdeaxXATf

But if you wish to replace the icon you can use this selector for CSS:
```
.hustle-ui .hustle-icon-check:before{
    content: "Icon";
}
```
Best Regards
Patrick Freitas
Thread Starter mar1as
(@mar1as)

4 years, 8 months ago

Hi Patrick,

I don’t have the section for changing the success message colours as per your screenshot. The last one I have is the Error Message, I have styled all of my form using those options but that is why I asked for the css for the success message as there is no option for that.

I don’t wish to change the icon, just the colour. I have tried the below but it doesn’t work, could you tell me what I have got wrong please.

.hustle-ui .hustle-icon-check:before{color: #ffffff;}

Many thanks

Plugin Support Patrick – WPMU DEV Support
(@wpmudevsupport12)

4 years, 8 months ago

Hi @mar1as

Could you let us know if you are using a PopUp, slide in or Embed?

We can try to replicate the missing configuration.

Best Regards
Patrick Freitas

Thread Starter mar1as
(@mar1as)

4 years, 8 months ago

Hi Patrick,

I have an Embed in place using a shortcode.
Thank you
Plugin Support Nithin – WPMU DEV Support
(@wpmudevsupport11)

4 years, 8 months ago
Hi @mar1as,

You can try the following CSS to change the icon color:
```
.hustle-success [class*="hustle-icon-"] {
	color: #ffffff;
}
```
The above CSS can be added by editing the Embed and under the “Appearance” tab as shown in the following screenshot:

I hope this helps. Please do check and let us know if you have any further queries. Have a nice day ahead.

Best Regards,
Nithin
Thread Starter mar1as
(@mar1as)

4 years, 8 months ago

Hi Nithin,
Thank you that is the css I was after.
Many thanks