Build Your Own Business Website header image

How to Create a Custom Opt-in Form with MailChimp & Thesis 2 – Part 3 – Style the MailChimp Submit Button

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Now that we’ve added our background image and submit button to the MailChimp form in Thesis 2, we’re going to move on to styling the submit button.

Customize Options

Let’s come back over to our images and get this image button. Notice it’s 70 pixels by 70 pixels. We’ll copy that image, go back to CSS, come back down to our Submit button. Under Options, Input, we’re going to say our background is this image here. Background position is center center. Background repeat is no repeat. Then we’re going to give it 70 pixels of width and I think we’ll just give it 30 pixels of top and bottom padding which make it the right height.

That funny little thing is in the way so instead of doing that Submit button that way, we’ll get rid of the padding and say delete, delete and we’ll just give that absolute height. No, we can’t give it an absolute height with just a setting, we’ve got to take our selector and say height:80px. Let’s save that. And then now, we need to get rid some of that top padding and that looks like maybe about 40 pixels of that top padding need to go away so say 310.

Use Absolute and Relative Positioning to Move the Button

Then what I want to do is move this down and I’m going to use absolute and relative positioning to move the button. Right now, this thing is inside of div id=”optin” and so I’m going to give optin a position of relative. Then I’m going to give the button inside of it a position of absolute and move it down.

So, we’ll come back over here to optin and we’re going to have to do this in Additional CSS, position:relative; save and then in the Submit, we’ll say position:absolute and then right:0 and top:40px; see how that looks.

Okay, that didn’t turn out quite right. We’ll look at our input type=”image” and if we remove right and remove top…actually, it’s probably right: 30px. That’s probably all we really need.

Add Padding

Now we just need to put that padding back into this. If we take that padding and make it 365, okay and that’s about what we want the button to do. We probably need to make more bottom padding for that so that gives us a little bit more room and then we probably want to take that top.

Rather than top: 0, let’s say top: -10px and you know, I never remember which one this is suppose to be. Okay, so if it’s top: 0 what happens? If it’s top: 40px; if it’s top: 80px. Oh, because of what I was using, that’s right now I knew that, 100 right, okay, 300 and 60 so 350. See, I want this button to overlap it just a little bit but otherwise be there so it’s right: 30px, top: 350px and then we take that padding back to 365px, okay, right: 30px; top:350px and then the background of this is 365px. Okay, perfect.

0 Comments… add one
0 comments… add one

Leave a Comment