Yesterday I shared how to integrate Twitter into your website to encourage people to share your content. One of those ways was to include Click to Tweet links throughout your posts. However, right out of the box, Click to Tweet links are kind of boring. Not to mention that they don’t blend in with your theme.
Let’s change that. With a little CSS, you can quickly customize Click to Tweet links so they blend seamlessly with your site.
Customizing Click to Tweet links from the WordPress plugin
This is how Click to Tweet links look right out of the box when using the Click to Tweet WordPress plugin:
Of course, some of the styling, such as on the actual links themselves, will be inherited from your theme’s stylesheet, so your actual results may vary.
Time to spice things up.
First let’s focus on the box, which can be customized via the tm-click-to-tweet class. We’re going to get rid of the border and give the box a background color.
.tm-click-to-tweet {
border: 0 !important;
background-color: #f5f5f5 !important;
}Normally, you’d want to avoid using !important in your code, but since you’re overriding the plugin’s defaults, it’s a must in this case.
Here are the results:
Now let’s customize the actual link itself. Let’s make it yellow, uppercase, size 18, and use the Google Font Montserrat. We’re also going to make the text black on hover.
.tm-click-to-tweet .tm-ctt-text a {
color: #DDB16B !important;
font-family: Montserrat !important;
text-transform: uppercase !important;
font-size: 18px !important;
}
.tm-click-to-tweet .tm-ctt-text a:hover {
color: #000 !important;
}To load Montserrat, you’ll need to add the following to the <HEAD> section of your theme:
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>The results:
Better. Now let’s tackle the Click to Tweet logo. We’re going to change the color, align it to the left, and replace the bird with a different one, using Font Awesome. Oh and we’re also going to give it a hover state of black.
.tm-click-to-tweet a.tm-ctt-btn {
color: #FD9789 !important;
background: none !important;
float: left !important;
padding-right: 0 !important;
}
.tm-click-to-tweet a.tm-ctt-btn::before {
content: '\f099';
font-family: FontAwesome;
margin-right: 7px;
font-size: 16px;
}
.tm-click-to-tweet a.tm-ctt-btn:hover {
color: #000 !important;
}Notice how I didn’t have to include any !important declarations in .tm-click-to-tweet a.tm-ctt-btn::before. That’s because the plugin didn’t have attributes specified for the class, so there was nothing to override.
Then place the following code in the <HEAD> section of your theme:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">Looking good, right?
And that’s it! You can use your imagination and customize it further by changing the border radius of the box, increasing the letter spacing, or anything else you can think of.
Customizing Click to Tweet text based links
If you’re not on WordPress or you aren’t using the Click to Tweet plugin, you can still customize the link to your liking.
When you enter a link into the Click to Tweet website, you’ll be presented with a bit of code that looks like this:
<a href="http://ctt.ec/fdW9e">Tweet: I am a test Tweet.</a>Which looks like this:
Since it’s a normal text link, it’s not going to stand out much. To customize it, we’re going to have to give it a custom class, which we’ll call ctt-link.
<a class ="ctt-link" href="http://ctt.ec/fdW9e">Tweet: I am a test Tweet.</a>I’m also going to get rid of the “Tweet:” text.
<a class ="ctt-link" href="http://ctt.ec/fdW9e">I am a test Tweet.</a>Okay, that’s better.
Now it’s time to give some attributes to the ctt-link class.
.ctt-link {
color: #DDB16B;
text-transform: uppercase;
}
.ctt-link::before {
content: '\f099';
font-family: FontAwesome;
margin-right: 7px;
font-size: 16px;
}
.ctt-link:hover {
color: #000;
}Remember to load Font Awesome and the Montserrat Google Font in the <HEAD> section of your theme:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>What a difference, am I right?
If you want to give it a box, add a div to the link, like so:
<div class="ctt-box"><a class="ctt-link" href="http://ctt.ec/fdW9e">I am a test Tweet.</a></div>And customize it:
.ctt-box {
padding: 15px;
background-color: #f5f5f5;
margin-bottom: 30px;
}The results:
And you’re done! Now you just have to remember to add the link class and the div class to each of your links and they’ll be displayed the same every time.
Want to customize your Click to Tweet links? Here’s how:
Click To Tweet
Want more tips to better your blog? Subscribe to my weekly tipletter for exclusive tips, tricks, and offers delivered straight to your inbox.