[Eric VGLParticipant]

Hi guys,
I’d like to style the signup form for mailchimp and take it a bit further. Hope you can help me with this:

– I’d like to loose the shadow of the button font
– I’d like to change the color of the “email” box
– Is there a way to make the fields look like the ones in this example: http://skrwt.com/ – only with custom colors?

Appreciate any help!
Thank you!

URL http://www.vegan-good-life.com
Wordpress 4.2.3.
X 4.0.5.
Cornerstone 1.0.4.

[Prasant RaiModerator]

Hello Eric,

Thanks for writing in!

Kindly use following CSS under Custom > CSS in the Customizer:

.x-subscribe-form input[type="submit"] {
    text-shadow: none !important;
    background-color: #A6A6A6 !important;
}

.x-subscribe-form input[type="text"], .x-subscribe-form input[type="email"] {
    border: 1px solid #000 !important;
}

Let us know how it goes.

Thanks.

[Eric VGLParticipant]

Unfortunately, this didn’t do anything. I made sure I deleted all other subscribe-form CCS I tried out before – anything else I might be missing?
Thanks a lot!
Best,
Eric

[John EzraMember]

Hi Eric,

Thanks for updating the thread! Are entering in the customizer? If you entered it at the bottom and nothing happened, it’s possible you have a syntax error somewhere like a missing “}” bracket. This will cause all succeeding CSS to not work. You can try entering the CSS above everything and if it works, you know there is an error somewhere.

Also here is some updated CSS to help it look like your example link:

/* Removes white space caused by content band befor the form */
div#x-content-band-6 {
    margin: 0;
}

/* color of form heading */
div#x-content-band-7 h5 {
    margin: 0;
    color: #ffffff;
}

/* Background color of form content band */
div#x-content-band-7 {
    background-color: #333333!important;
}

/* make form inline */
form#x-subscribe-form-1362 fieldset{
    float: left;
    width:50%;
}

/* remove email field border */
.x-subscribe-form input[type="email"] {
    border: none!important;
}

/* colors of submit button, remove text shadow, no border, height adjustment, alignment */
.x-subscribe-form input[type="submit"] {
    background-color: #64C4FF!important;
    color: #ffffff;
    text-shadow: none !important;
    margin: 0;
    border: none;
    height: 37px;
}

It should look like this:

Hope this helps – thanks!

[Eric VGLParticipant]

You guys are unbelievable, the quality of service – unmatched! Thanks so much for all your help.
So: We’re almost there, if you look at http://www.vegan-good-life, you can see that I implented your code and it worked and I already tweaked it a bit to my liking and I’m stoked!

Two things:

– the fields are not completely in line – how can I change that?
– how can I change the hover color of the button text?

Again, thank you!
Eric

[ThaiModerator]

Hi There,

Try adding following CSS under Appearance > Customize > Custom > CSS:

.x-subscribe-form input[type="submit"] {
margin-top: 0;
}
.x-subscribe-form input[type="submit"]:hover {
color: #82098C;
}

Hope it helps.

[Eric VGLParticipant]

Hi,
Color change – success!
Getting the fields in line – nothing changed unfortunately.

Thankful for ideas 🙂

Best,
Eric

[ThaiModerator]

Hi There,

Please update the previous code a bit:

.x-subscribe-form input[type="submit"] {
margin-top: 0 !important;
}
.x-subscribe-form input[type="submit"]:hover {
color: #82098C;
}

Hope it helps.

[Eric VGLParticipant]

This did it, thanks so much!

[Prasant RaiModerator]

You are most welcome. 🙂

[SquickParticipant]

Hi! Can i also get help with this? This is as far as i could go with this! http://squickapp.com

[SquickParticipant]

I will also add that it won’t let me get rid of the red underneath the button! And i’d like the corners more rounded on the content band!

[RadModerator]

Hi there,

Would you mind providing some details of your issue? I don’t see any MailChimp form. And which button?

If this is not thread related, then you may start a new thread 🙂

Thanks!

[SquickParticipant]

SORRY! Didn’t see this post, Here is the link again -> http://squickapp.com i’d like to customize this further. Can you help me make it inline? and spaced a little from each other? thank you so much!

[LelyModerator]

Hi Squick,

Please update this:

.x-subscribe-form input[type="email"] {
    border: none!important;
}

To this:

.x-subscribe-form input[type="email"] {
    border: none!important;
    width: 48%;
    float: left;
}

Also update this:

.x-subscribe-form input[type="submit"] {
    margin-bottom: 0px !important;
}

To this:

.x-subscribe-form input[type="submit"] {
    margin-bottom: 0px !important;
    width: 48%;
    float: right;
    margin-top: -105px;
}

Hope this helps.

[Author]

Posts