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.
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
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
Rick: Yes, just delete that
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?
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?
Member: So just from here to here?
Rick: Uhuh, cut that out and put it above the MailChimp Signup Form
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: 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
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”?
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?
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
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
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
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
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
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?
Member: So the widgets, widget title, in font settings, I can just select any font?
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?
Member: Okay, we can do that right. Okay, main, what was it that you call it?
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
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: 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
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?
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”