Build Your Own Business Website header image

Styling a MailChimp Opt-in Box in Thesis 2

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

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 this session we demonstrate styling a MailChimp opt-in box in Thesis 2 by deleting and repositioning some HTML code from the widgets panel and striping out its inline styles. We also create a new Agility widget styles package for the opt-in box and give it a style.

Video Transcript

Member: What I was interested in is your widget package, your widget box that you have because I don’t like how this looks here. I would really you know, I was thinking of maybe I would just have it look like the background here like a wrapper and shove everything, see-through and then you just have like, the Subscribe and the Email here and then you know, a nice centered Signup or however I wanted to save here so all of it like that but the thing I was concerned about was when I got the code for MailChimp, it had all kinds of coding in there already and I had changed it to this color in the coding itself in the widget so let me show you what I had done and was done in there. And I did upload the widget box that you have, the Agility widget box which is this one. No, that’s not it. It’s the Main Sidebar, yes, here it is, this is what I had uploaded.

As far as I have, you know I’ve gone in here and I have changed some of the you know, I just kind of experimented in and changed the color here and I put here you know, works as label and Email Signup for Goodies, I was just like doing all that and just keep on testing it out and I did not like the submit, I wanted to change that I wasn’t sure if I should change the submit because it seems like I don’t know, it may have value for something else that I may wreck. I don’t know with MailChimp, I said I want to do anything but I know you said that I could just make the widget take class and add the code in there but I didn’t know how much of the code I should put in there because it has a lot of stuff in there.

Rick: Well, why don’t you open up a text file so open up notepad for a second and then I want you to copy all that text and put it in notepad

Member: Okay, so I’ll copy all this and put it in notepad

Rick: Uhuh. You’re missing one character at the bottom, you need to get the very last part, yes, there you go

Member: I have to get everything

Rick: Yes, copy that and then put it in that notepad, it’s down your task bar, there you go, okay. So that way, now you’re not going to lose it so go ahead and minimize that. What you’re going to do is starting at the Begin MailChimp Signup Form just below that

Member: You mean here? Right here?

Rick: Yes, right

Member: Right

Rick: Just after that, you’re going to delete that link and the style

Member: Delete up to where, like up to here?

Rick: Keep on going down till you get to the closing style tag

Member: Here?

Rick: Yes, just delete that

Member: Okay

Rick: Okay? Now, what I would do is I would delete the label out of there so you can see where it says, “label for”. Now, you could cut it and then put it above without the label reference, that would be okay too

Member: What is above where?

Rick: Put it above the MailChimp Signup Form

Member: Okay, so I would take this and put it above here, it would still work, above MailChimp?

Rick: Yes

Member: You mean like make a space and just put it above here?

Rick: Yes although what you’re just going to do is you’re just going to put “SIGN UP FOR GOODIES, NEWS AND EVENTS” up there

Member: Right, okay so I don’t have to put a label?

Rick: Right

Member: So just from here to here?

Rick: Uhuh, cut that out and put it above the MailChimp Signup Form

Member: Alright

Rick: And then cut out the label there, yes, just cut that out

Member: Okay, alright

Rick: Okay, so now you’ve got input type=”email” value=”EMAIL” div class=”clear><input type=”submit” “Subscribe” okay. So now, what do you want “Subscribe” button to say?

Member: I just want it to be like I’d probably change it later but I just want it to like probably say, “Get Your Goodies Now” or something like that

Rick: Okay, so under the thing that says value, not input type but in value right there, that’s where you would change that

Member: Right here where it says “Subscribe”?

Rick: Yes, change it to something else

Member: Alright, okay. Is that where I should have put it?

Rick: Sure

Member: Okay

Rick: Okay, now save this. Pardon me, you’ve got the class=”button” but take out the color, color equals such and such, take that out including the word “color”. What we’re doing is we’re stripping all of the styles out of this.

Member: Color up to here?

Rick: You need that closing tag, you need that closing bracket

Member: Okay so up to here? Up to this little thing? Okay

Rick: Yes, you’re just taking that inline style out

Member: What about that little greater than sign, do I take that out too?

Rick: No, the greater than sign is necessary

Member: Okay

Rick: That’s the end of your input tag so now you’ve got input “email” value, you’ve got a clearing div which is going to stick your button below the input and now, see down below where it says, “Add a class to this widget”?

Member: Yes

Rick: Add a class to it, just any name you want, a class name. No, it needs to be in a form of a class name so no uppercase letters, no spaces

Member: That’s it, can I do that?

Rick: Sure, there you go and now, save this

Member: Alright save it, where do I save it now? Save Widget

Rick: So you realize that you’re working in the widgets in the accessibility mode, right?

Member: What’s the accessibility mode?

Rick: If you go up to Screen Options, okay, you can go to Disable Accessibility Mode and now you’ll be able to drag and drop your widgets around

Member: No wonder. I was wondering why I could not drag and I search anywhere, at one point I could and then I couldn’t and when I thought, what really happened?

Rick: Yes

Member: Okay, so just disable that

Rick: So Disable Accessibility Mode and now your widgets panel is going to look a little different because now, you can drag things around like you see me doing.

Member: Good, I’m so glad to find that out I didn’t know what happened with that

Rick: Okay, let’s go take a look at your form now

Member: Okay

Rick: Refresh it

Member: Alright. Okay, we still have that color though and it does have a captcha. I never took the stuff off of that and just take the stuff off of caption.

Rick: Let’s go back to the form for a second. Yes I see, because one of them is the heading and the other is the label so we can get rid of the label then

Member: Right

Rick: Well, let’s go back to your widgets panel and let’s look at that code again for a second. There must be a background color in that div that it didn’t notice

Member: Yes

Rick: div mc_ember_signup input type=div class “clear” mc_embed_signup

Member: I may have put the color somewhere else, I don’t remember what I did

Rick: Okay, so let’s take that label that you’ve got above the signup form

Member: Will this work with because I did put your widget box inside that feature thing so I guess we can still style this with that?

Rick: Well, go ahead and put that title back in there

Member: This one?

Rick: Yes, the one that you just deleted, go ahead and put that back in

Member: Okay, I guess this thing

Rick: Okay and just go ahead and hit save again, okay. Now, let’s go over to the Thesis Skin Editor and we’re going to go into CSS, okay and you’re going to create a new package and you’re going to use the Agility Widget Styles and add the package and then in the selector there, it’s going to say .widget and then .main_signup

Member: It’s .main signup?

Rick: main_signup, yes

Member: Okay

Rick: Okay, now you can give it a name and a reference

Member: Do I do it just the main_signup like that?

Rick: Whatever you want to call it, doesn’t matter, give it a reference. Okay, then go over to your Options

Member: Where’s that? Options, okay

Rick: Okay. So now, you can style your widget title here. Actually, let’s style the widgets first, go ahead and open up the widgets. Now, if you want to put a background in, here’s where you can specify your background

Member: Okay

Rick: So now you can specify a background image or background color, go ahead and save that before you close it.

Member: Okay, that’s images so I would want to save this one, I think it’s this one, alright. Where was I?

Rick: It’s down at the bottom of the packages, yes, you got to scroll down there at the very bottom

Member: Oh, main_signup, Options, Background, okay…

Rick: Okay, let’s go ahead and make sure that it’s setup, the rest of the background image is setup the way you want it so it’s repeating in both directions and everything else, right so position doesn’t really matter, background attachment is fine, background repeat is fine, okay you got it, that’s fine.

Member: It’s fine there

Rick: Now, you can style your widget title anyway you want, you can style your text the way you want, you can style anything the way you want now

Member: And I have the margins set the way I wanted to?

Rick: Yes

Member: So the widgets, widget title, in font settings, I can just select any font?

Rick: Yes

Member: Alright, let’s just say we’re going to choose that it’s… 14… but I’ll change it later. Font weight, I’ll just leave it, text transfer we don’t that need that, margin…

Rick: Make it text align center though

Member: Text align center, letter spacing, we’ll just leave that at that

Rick: You don’t care about margin but go ahead and give it 20 pixels of padding all the way around so scroll down to padding.

Member: Okay, 20 everywhere

Rick: Now save it and let’s go take a look at it. Yes, we need to put it in our list too, right

Member: Do we save it?

Rick: We save it but we need to put the reference in because it’s not going to change it yet

Member: Oh, that’s right okay. Let’s go back in here

Rick: Well, it’s in the Thesis Skin Editor is where you have to go

Member: Oh, I probably need to go here right? No?

Rick: You need to be in the Thesis Skin Editor in order for you to put the reference in. Yes, there you go

Member: Thesis Skin Editor, okay

Rick: That’s where you need to be. No, you’re right there now, you’re in the right spot

Member: Right here?

Rick: In CSS

Member: You wanted to be in CSS. I need to go back into the main menu? This one?

Rick: Well, you need to put the main_signup reference in the reference list

Member: In here, in the CSS?

Rick: Yes

Member: Okay, we can do that right. Okay, main, what was it that you call it?

Rick: signup

Member: Okay, main_signup

Rick: Now, do you know where you made that widget yellow?

Member: No, I was just trying so many things

Rick: Did you do it in custom CSS?

Member: I probably did

Rick: Go open up custom CSS and see

Member: I may have gone in there… I think I went to inspect the element or something and maybe I tried going there and didn’t try to save

Rick: Okay. Well, let’s just look at what you got but we probably have to get rid of that yellow color that you’ve got in there. You know, it’s a lot faster if you keep a window open for the editor, a window open for the page you’re looking at, a window open for the dashboard so that you can just switch around back and forth

Member: Here look, see it changed

Rick: Yes, there you go

Member: I think I like that, yes I do like that much better. I mean, you know, I can still go in there and work with it

Rick: Yes. Let’s go back to your widgets panel. Leave this page open, open up a new window for your widgets panel

Member: Where do I do that?

Rick: Okay, right click on Begin Skin Care again, the name of your website up in the upper left. Okay now, right click on widgets

Member: Oh, right click on widgets, open in new window

Rick: Open link in new tab, no, new tab

Member: Oh, I said new window, is that okay?

Rick: Well, that’s fine but it’s much easier for you to switch tabs

Member: Okay

Rick: Now, go into main sidebar and open that up, open up the text and now for your Submit button where it says, class=”button”, change that to class=”submit”

Member: Where is that?

Rick: It’s just right there beside your cursor

Member: div class=”clear” is that above here? Here, class=”button”… okay

Rick: Change that to class=”submit”

Member: What do you want me to do now?

Rick: “submit”

Member: Okay

Rick: And hit save and now, that button, if you go back and refresh your page, now leave this window open, go up again to the “Begin Skin Care”, right click on that and say open in new tab

Member: New tab. I have so many tabs opened and I think that’s just confusing right now, I have a lot opened

Rick: But when you’re doing this, you want 3 tabs open. You want your site open, you want the Skin Editor open and you want your dashboard open because you just take a lot of time switching back and forth in the same tab

Member: Right

Rick: Okay now scroll down and take a look at it, you need to refresh this page here. I thought that button would change, it hasn’t changed

Member: Yes, because I would like to make that a different color too

Rick: Well, you can just create a style for that and it’ll work just fine

Member: So I can just create a style for just the button?

Rick: Yes

Member: Do it a widget? I mean, through the widget box that we have already or how do I do that?

Rick: No, the widgets package doesn’t have a submit button placed for you to style so you’ll have to create…

Member: What would I do after the class or what do I do for the ID, what do I use?

Rick: Well, you just change the class to “submit” right?

Member: Okay, okay so I would just create an element for the class of “submit”?

Rick: You would create a package

Member: A package for the class of “submit”

Rick: Right

Member: Okay

4 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
4 comments… add one

Leave a Comment

Cancel reply