Sometimes you want to give a little extra 'oomph' to a specific tweet on your site to help it stand out from the rest - say, bold text or a different background colour. But how do you achieve this when your twitter feed uses the same CSS classes, or alternating CSS classes, for every list element? Use TweetStyler!
Wha?
TweetStyler! is a simple, lightweight jQuery plugin for assigning custom CSS classes to specific tweets by adding custom symbols to a Twitter post. Here's an example:
This is a Twitter feed from 2BriteStudio WITHOUT TweetStyler!
Twitter feed generated with Tweet!And this is the exact same feed WITH TweetStyler!
Twitter feed generated with Tweet!Huh?
Notice the symbols (^, rb, !, cb) in the first feed contained within the {curly braces}? They are what set the styles. The symbols can be anything you want as long as they're contained within {curly braces}. You can even use multiple styles for each tweet by seperating the symbols with commas!
TweetStyler! removes the symbols from the tweet to keep things looking cleaner, then applies the CSS classes associated with each symbol to each list element within the feed.
How?!
- Download jQuery.
- Download TweetStyler!
- Link to both jQuery and TweetStyler!
<script language="javascript" src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript" src="jquery.tweetstyler.js" type="text/javascript"></script> - Initialize TweetSyle! within the jQuery page load, and on window load:
<script type='text/javascript'>
jQuery(document).ready(function($){
$(window).load(function () {{
$(".yourFeedElement").tweetstyler({
styleSymbols: ["!","^","rb"],
classes: ["boldClass","upperClass","redBack"]
});
});
});
</script> - Define the CSS classes:
<style type="text/css">
.boldClass{font-weight:bold;}
.upperClass{ text-transform:uppercase;}
.redBack{ background: #FF0000;}
.cloudBack{background:url(images/Clouds.jpg) repeat top left; color:#000000;}
</style> - Create your posts in Twitter!
Some things to keep in mind:
- Make sure there's a symbol for each class you create and vice versa, Otherwise the styles will get mixed up - so if you remove a class from the 'classes' array, remember to remove it's associated symbol.
- Obviously, your tweets will only be styled on the pages that you've initialized with TweetStyler!. For this reason, keep your symbols simple as they'll be seen to others who view your feeds elsewhere. ie, avoid symbols that look like this: {MyClass003forBold} - you get the idea...
