The next thing we’re going to talk about in this Using the Agility Skin for Thesis 2 seminar is integration with DIYThemes boxes.
Integration with Social Media Boxes
The first one I want to show you is integration with their social media boxes. Let’s go to Thesis and Manage Boxes. I have all those boxes installed here. For example, the Tweet Button, the Pinterest Pin It button, the LinkedIn Share button, Google+ and Facebook Like button. I’ve got all of those there.
When I hit save boxes and come back over to a page, now you see I’ve got all these social share buttons laid out here. And on the pages that have the social share buttons, they show up across the bottom.
On a single post, they actually show up at the top and the bottom, so below the featured image and at the bottom of the post. They show up in both places. As you probably know you can’t put more than one of their share boxes on a template without the help of this box that I’ve added to Agility.
Agility DIY Social Media Extender
Next we’ll look at the Agility DIY Social Media Extender. And you’ll see this in the skin editor. Essentially what it does is it gives you the ability to choose which of these you want to use.
Choose Order and Number of the Buttons
If you don’t have one of them installed you’re not going to have the choice. So if the Pinterest one is not activated the Pinterest won’t show up here. But it gives you the opportunity to decide which one you want to use. You can move them around to choose the order that you want them in and then you can take this box and drop it wherever you want.
I’ll show you an example. Let’s go to the single template for a moment and go to our content area. You’ll see that inside of main content I have the social media wrapper top which is showing all of those buttons and that’s above the content and below the image.
Then I have another one, social media wrapper bottom, that is below the content and these can each be configured differently and you can put really as many of these things on as you want. You’re not limited to one or two, you can put as many of them as you want and as long as you use this box the buttons will line up side by side.
Stack Neatly and Tops of Buttons all Align
Again, some people have found that they’ll use those buttons and then lo and behold, the buttons won’t sit side by side, they stack on top of each other. But Agility comes with CSS that makes them sit side by side and makes them sit side by side in a uniform way. Then also these things are all lined up so that the tops of them all line up across. Without Agility that takes a little bit of fiddling to make that all work since they’re all different sizes.
The only thing you have to do to use it is to activate the boxes you want to use and if you deactivate one of those boxes, that button will go away. For example, I know I’m not going to use Pinterest so I’ll turn that off. Save the box, come back over and refresh the page and the Pin It button is gone now.
The same thing happens if you rearrange the order, it would change in that. So that’s how this works with the DIYThemes Facebook Like, Google+, LinkedIn Share, Tweet Button and Pinterest Pin It button.
AWeber and MailChimp Signup Forms
The other thing that Agility does is it incorporates both the AWeber signup form and the MailChimp signup form. Let’s activate the AWeber signup form and refresh the page. But first let me come back over here and get this skin back into its default condition. And now there it is, the AWeber signup form and now you have the signup form here styled so that it fits in the site.
Customizing the Forms
If you change the style, the colors and that sort of thing, the button is going to change and everything else will change.
This is configured to show both email and name and it’s set up really for an optin. If you’re familiar with these boxes you know that they’re sort of set up as if you were a blogger and you wanted to update somebody about your blog posts. That’s all their default content is.
I’ve changed that default content so that the title up here is not “Send Me Updates” but it’s “Add Your Own Opt-in Title”, “Add your own opt-in sales pitch” and then “Send me your offer now!” instead of “Send Me Updates”.
These are all things that are customizable in the AWeber box and in the MailChimp box so you can always come over to the submit button and change the submit button text. You can change the name input and that kind of thing. Then once this is done, we come back over to skin content, you can change the title Sidebar AWeber Form, you can change the intro text and rest of it.
The same thing is true for the MailChimp box so instead of AWeber you’re using MailChimp signup form. It’s going to look exactly the same really, I’ve styled them both and customize them both so they would have the same content. So this is now the MailChimp form and it’s automatically set up and styled to sit there in the sidebar and to take your content. You can always use one of the background styles then to add additional styling to your opt-in form.
Actually I haven’t ever done that before but I’ll show you an example. Let’s come over to the skin editor and go to content area, 2 column content, main sidebar, MailChimp signup form. I’m going to add the class style-1 to this and save it.
Then I can come back over here to my skin design and look at my backgrounds. Say extra style 1 and let’s give it a background color of light yellow and 24 pixels of padding all the way around. Let’s also give it a solid border that’s 1 pixel wide and choose a darker color. Give it a border radius of 10, give it a drop shadow color, an offset and blur of 5px and 5px.
Let’s say okay to those changes and save the design options. Now you’ve got an opt-in form that stands out a little bit more. So that’s the kind of thing that you can use these custom styles for and it’s a way in which you can use the custom style to say draw attention to something specific on your site.