[hello@spirituslepus.comParticipant]

Hi there

I’m trying to customise a mailchimp email sign up form and have cobbled together a bit of CSS but not got it correct.

I created a form through X Addons , email forms.
Then I went into cornerstone to add the Mailchimp element.

I then went into the custom CSS to try and do two things:

1) replace the submit button with an image
2) make the form responsive

I’ve uploaded the image but it’s so tiny. And the email field placeholder doesn’t display the entire text. I’ve most likely got a lot of these settings wrong!

Please see attached screenshot of the CSS coding I’ve used.

Thanks for your help!

(I’ll send another message after this with my URL and login details)

[hello@spirituslepus.comParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please update your code to :

.x-subscribe-form input[type="submit"] {
    background: url('http://www.spirituslepus.com/wp-content/uploads/2016/04/coming-soon-02.png') center no-repeat;
    background-size: cover;
    border: 0;
    width: 100%;
    color: transparent;
    padding: 10px 44px;
}

Hope it helps.

[hello@spirituslepus.comParticipant]

Hi Christopher

That sort of worked! The image is still being cut off on the end though.
And the button itself isn’t responsive any more.

Do I need to change the size of the container for the form itself somewhere? maybe in the section where you create the form in the first place?

For reference the measurements of the image are:
134 x 104

The other issue I had was that the email field placeholder isn’t displaying all of the example text. Is there a way to make that placeholder wider?

Thanks for your help and sorry for constantly asking questions!

[Paul RModerator]

Hi,

Please change the code to this.

.x-subscribe-form input[type="submit"] {
    background: url('http://www.spirituslepus.com/wp-content/uploads/2016/04/coming-soon-02.png') center no-repeat;
    background-size: cover;
    border: 0;
    width: 100%;
    color: transparent;
    padding: 10px 44px;
    min-width:134px;
    min-height:104px;
}

/*  email field width  */
.x-subscribe-form input[type="email"] {
    width: 500px;
}

You may change 500px to achieve your desired width.

Hope that helps.

[hello@spirituslepus.comParticipant]

WOOHOO Paul you are aces thank you! that worked perfectly.

I’ve had a play around and added an image to use as a background for the email field as well. (using your previous code as a guide line).

The Dimensions for this email field image are 268 × 54 so that’s what I’ve put as the min-width and min-height.

My question to you now oh gods and goddesses of X theme, is:

1) how can I make the email form and the submit button align? the submit button is just sitting ever so slightly lower than the email form. (all the CSS I have used is in the attached screenshot)

and

2) Can I shorten the height of the container for the mailchimp element? (I’ve attached a marked screenshot of what I mean – I want to shrink the size of the red area).

Once again your support and help is fantastic thank you very much!

[hello@spirituslepus.comParticipant]

ahhh whoops let me upload that attachment for reference for the 2nd question the file size was too big.

[ThaiModerator]

Hi There,

Please add the following CSS:

.x-subscribe-form input[type="email"] {
    margin-top: 10px !important;
}

.page-id-1107 #x-section-2 {
    padding-top: 0 !important;
}

Hope it helps 🙂

[hello@spirituslepus.comParticipant]

Thanks very much Thai, you guys have been really great.

[ChristianModerator]

You’re welcome. Glad we could help. 🙂

[Author]

Posts