I don’t normally write posts like this but I thought it would be nice to share with you since so many of you have WordPress blogs. If you haven’t seen the new Click to Tweet Wordpress plugin that came out recently, you might want to check it out.
It makes adding those tweetable quotes super easy, which means that you may get shared more. I know that Andy Traub mentioned he had a boost because of it and I’m sure there are others that have too.
The plugin itself generates a pretty nice look. But I’ve seen in the comments of the original post that people are wanting to customize it a bit more. So I asked the plugin developer if I could write a post that would help people customize it with CSS and he said it would be great.
Here’s how this works.
1. Download the plugin or proceed to step 2.
2. Install it. In your WordPress admin, go to Plugins -> Add New. Do a search for “click to tweet” and it should be the first one that is by “Todaymade”. Or you can upload the file you downloaded in step 1. Be sure to activate it as well.
3. Add your custom CSS, which I’ll outline below.
VERY IMPORTANT: This assumes you have setup at least 1 post that has a “click to tweet” code in it. That way you can see what you’re doing visually. It also assumes your theme has a place to put custom CSS. It will be different for all themes but should be under a Misc tab or custom code or something along those lines within your theme settings. I DO NOT recommend editing your theme style sheet unless you know what you’re doing. Nor will I be held liable for any issues this causes. So edit at your own risk 😀
A few things you can do to edit the look of your “click to tweet” box.
To edit color of font:
.tm-click-to-tweet .tm-ctt-text a { color: #5798CD; }
Just change the #5798CD to whatever color you want. You can use a colorpicker to generate a hexcode, which you will need the # in front of like the example.
To edit font size:
.tm-click-to-tweet .tm-ctt-text a { font-size: 20px; }
Just change the number to whatever you want. Note that you can combine elements for more efficient code. The below will allow you to change the font size and color in one line.
.tm-click-to-tweet .tm-ctt-text a { color: #5798CD; font-size: 20px; }
To edit the background color of the box:
.tm-click-to-tweet { background-color: #eeeeee; }
Again, just change the hexcode to what you want. And again, use a colorpicker if you need.
To edit border:
.tm-click-to-tweet { border: 1px solid #eeeeee; }
This means it gives a border of 1px that is solid and has a color of the hexcode. Increasing the number will make the border thicker and you can change the “solid” to “dashed” or “dotted” as well. Use the colorpicker for the hexcode you want.
Again, if you decide to change the background color and the border color, be sure to combine the code.
.tm-click-to-tweet { border: 1px solid #eeeeee; background-color: #eeeeee; }
Hope that helps a little. I’ll be keeping up with this post a little so be sure to ask if you have a specific request. I can’t promise anything, but I’ll do what I can. Feel free to help each other out in the comments as well.