Build Your Own Business Website header image

Install, Configure and Style the Social Media and Email Signup Boxes from DIYThemes – Part 5 – How to Style the MailChimp Signup Form

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.

In part 5 of this seminar on How to Install, Configure and Style the Social Media and Email Signup Boxes from DIYThemes we show how to style the MailChimp signup form.

In the absence of any styling, these forms are going to look exactly the same but you can in fact, style these. And right now what they’re doing is they are borrowing the style from the submit button. Let’s come over here and look at the CSS packages. Thesis Classic comes with this submit button style and it’s got a background image and that kind of sort of thing in it.

Create a Unique Style for the Signup Forms

So what we’re going to do is create our own entirely different style. I think probably the easiest thing for us to do is come over here and give it its own ID. We’ll call it free_register. That allows us to be very selective about the style that’s applied.

Create a Links Package for Styling

You might think this was an input package but in fact, it’s probably better off to do a submit button as a links package because the chances are, you want some kind of a hover behavior. If you want a hover color in the button that’s different than the regular color, you’re going to want to use a links package rather an input package.

Add a CSS Selector

So, we’re going to add the color and we’re going to call it MailChimp Free, #free_register. And then it’s not just #free_register but you also have to get the class of that selector. This is the class that’s currently being styled .input_submit so I’m going to grab that and add it to this, so it’s #free_register .input_submit.

Choose Background Color

Under links, leave the color alone but in terms of background color, I think I’m going to pick a lighter color here and then for hover links I’m going to pick a darker version of that and hit save. Now I need to add this mail_chimp_free reference and save that.

Notice how this did not actually change and the reason why it didn’t change is because what we’ve got here is a background image that is covering our background color. So we need to get rid of that background image and we’re going to do that inside of this. Although we’re going to have to do it under Additional CSS. We’ll grab the selector though and then say {background-image:none;} and now the background image is gone and we’ve got that changed.

Change Text Color, Add Border and Padding

At this point we could change the text color. So, let’s just make it white and the hover text color, we’ll make it white as well. Then I think the other thing we’re going to do here is say border:none. We could increase our padding so let’s do that and let’s use 10, 25, 10 and 25, say okay and now we have that going on.

You can get fancier right? We could add a border radius to this and we could have a box shadow. Let’s see, 5px and then gray. A box shadow takes the vertical, horizontal and that was it, yes and then color. I can always add another and when I do that I like to create a different version of this for the hover condition so .input_submit:hover and then say box shadow 3px, 3px, 3px so now you’ve got the change in that.

Signup Form in Action

At any rate it’s not particularly difficult to make this change and once somebody signs up here, right let’s just sign up. Oh no, I’m sorry I can’t sign up here. I can’t sign up in the canvass, I need to come over to the actual site. But you hit that Subscribe to list. And then, eventually what happens is you’ll get a confirmation email in your inbox and you sign up with that confirmation email and then your person has signed in. And that is how that one works.

1 Comment… add one
1 comment… add one
  • Tobias Laemmle January 6, 2014, 3:26 am

    Hello Rick,

    I’m trying to style the Submit Button so I changed as in the video suggested the background image. However there still seems to be another graphic in the background as well as an effect on the hover state.

    I can’t find the css for this styling. There just seems to be the .input_class and nothing else. What do you think is the best way to completely style a submit button on my own?

    Cheers,
    Tobi

Leave a Comment