Mail Chimp form alerts

[Deesign]

Hi Team ApeX,

Looking for some support finalizing the Mail Chimp signup form for our new site. Initially we ran into the issue of the submit button not working but found the patch solution here: https://theme.co/apex/forum/t/submit-not-working-on-mailchimp-form/60911/6

Now the button is working but the error and successful notices are both formatted incorrectly.
We did try to find the css to adjust but without any luck.

1 - Can you please point us in the right direction to both align the text and update the font to our website body font.
2 - Is there also an option to have the alter box background simplified to a flat version, no border/shadow?
3 - Can the 3 original form fields be aligned to the center of the page, for all screens?

[friech]

Hi @DeeDesign,

Thank you for writing in,

@DeeDesign

3 - Can the 3 original form fields be aligned to the center of the page, for all screens?

We can, but we can’t keep those fields inline with a fixed width on those fields including the button, at some point we need to let those fields stack to each other.

@media (max-width: 999px) {
	.tco-subscribe-form fieldset {
		float: none;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

@DeeDesign

1 - Can you please point us in the right direction to both align the text and update the font to our website body font.
2 - Is there also an option to have the alter box background simplified to a flat version, no border/shadow?

Please add this to Theme Options > CSS

/*Email Form Custom Styling*/
.tco-subscribe-form-alert-wrap {
	display: inline-block;
}
.x-alert-success, .wpcf7-mail-sent-ok, .buddypress #message.updated, .bbp-template-notice.updated {
	color: #848484;
	font-family: "Lato",sans-serif;
    font-size: 1rem;
	background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

Feel free to adjust those values.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

[Deesign]

Thank you @Friech

Very helpful, the alignment css helped a great deal.
And with a nod in the right direciton and your developer toolbar link I was able to expand the suggested success alert css to the danger alerts too.

Many thanks

[lely]

You’re always welcome @DeeDesign!

Cheers.