ShowMeDo Blogs the World

7 views
Skip to first unread message

ShowMeDo Blogs the World

unread,
May 13, 2010, 10:35:47 PM5/13/10
to show...@googlegroups.com

ShowMeDo Blogs the World

Site Relaunch – customizing that Twitter Widget

Posted: 13 May 2010 08:47 AM PDT

With limited time to post any content to the Blog or Twitter micro-blog, being able to reuse/advartise that content seems like a win-win. Twitter helpfully provide a widget for just this purpose but, out of the box, it’s not quite right for my purposes. But with a little javascript, jQuery and CSS magic that can all be put right.

First a little screenshot to show what the vanilla widget looks like, after a bit of customization that you can perform on the Twitter site (you’ll find the widgets hanging off the ‘Goodies’ link at the bottom of your facebook page:

The widget shown is ok but:

  • I don’t like the header area, with those two Showmedos and a rather redundant Showmedo logo (this is appearing on the Showmedo site).
  • I’d also like to remove the padding to left and right of the tweets to align the text with the rest of the column content.
  • The font-used is lucida-grand but I would prefer to use Verdana, the default font for my site.
  • The ‘twitter’ badge on the bottom left, which is probably most likely to be clicked, takes users to the twitter home page ‘http://twitter.com’ but I would like it to direct to my twitter page ‘http://twitter.com/ShowMeDo’.

With a few a lines of css and jQuery javascript these problems are easily addressed.

First we remove the header by finding its css class, ‘twtr-hd’, and using jQuery to hide it. This is equivalent to setting its css ‘display’ attribute to ‘none’.

$('.twtr-hd').hide();

To change the padding and font-family just add some css to your style-file:

div#contentRight .twtr-widget{
    font-family:Verdana,Arial,Helvetica,"Trebuchet MS",Trebuchet,sans-serif !important;
}

.twtr-widget .twtr-tweet-wrap {
    padding:6px 0 !important;
}

Note the use of the !important flags to override existing settings and escape the css cascade. Now twitter themselves, rather frustratingly, set the widget font-style using an !important tag. This means that in order to override it we need to prioritise our !important using the identity ‘contentRight’ of the right column in which the twitter widget appears.

Lastly, in order to direct users clicking the twitter badge to ShowMeDo’s twitter site we use a little jQuert to change the ‘href’ attribute of the twitter link:

    $('.twtr-doc a').attr('href', 'http://twitter.com/ShowMeDo');

And we have the resulting, pretty satisfactory widget:
Showmedo's customized twitter widget

Related posts:

  1. ShowMeDo is on Twitter
  2. New Services Site for Professional Screencasts
  3. Site updates
You are subscribed to email updates from ShowMeDo Blogs the World
To stop receiving these emails, you may unsubscribe now.		 Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

--
You received this message because you are subscribed to the Google Groups "ShowMeDo" group.
To post to this group, send email to show...@googlegroups.com.
To unsubscribe from this group, send email to showmedo+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/showmedo?hl=en.

dai

unread,
May 14, 2010, 4:08:59 AM5/14/10
to ShowMeDo
sorry don't use facebook or twitter, I use identi.ca instead.

On May 14, 3:35 am, ShowMeDo Blogs the World <showm...@gmail.com>
wrote:
> ShowMeDo Blogs the World
>
> ///////////////////////////////////////////
> Site Relaunch - customizing that Twitter Widget
>
> Posted: 13 May 2010 08:47 AM PDThttp://blog.showmedo.com/showmedo-front-page/site-relaunch-customizin...
>
> With limited time to post any content to the Blog or Twitter micro-blog,  
> being able to reuse/advartise that content seems like a win-win. Twitter  
> helpfully provide a widget for just this purpose but, out of the box, its  
> not quite right for my purposes. But with a little javascript, jQuery and  
> CSS magic that can all be put right.
>
> First a little screenshot to show what the vanilla widget looks like, after  
> a bit of customization that you can perform on the Twitter site (youll find  
> the widgets hanging off the Goodies link at the bottom of your facebook  
> page:
>
> The widget shown is ok but:
>
> I dont like the header area, with those two Showmedos and a rather  
> redundant Showmedo logo (this is appearing on the Showmedo site).
>   Id also like to remove the padding to left and right of the tweets to  
> align the text with the rest of the column content.
> The font-used is lucida-grand but I would prefer to use Verdana, the  
> default font for my site.
> The twitter badge on the bottom left, which is probably most likely to be  
> clicked, takes users to the twitter home pagehttp://twitter.combut I  
> would like it to direct to my twitter pagehttp://twitter.com/ShowMeDo.
>
> With a few a lines of css and jQuery javascript these problems are easily  
> addressed.
>
> First we remove the header by finding its css class, twtr-hd, and using  
> jQuery to hide it. This is equivalent to setting its css display attribute  
> to none.
> $('.twtr-hd').hide();
>
> To change the padding and font-family just add some css to your style-file:
>
> div#contentRight .twtr-widget{
>      font-family:Verdana,Arial,Helvetica,"Trebuchet  
> MS",Trebuchet,sans-serif !important;
>
> }
>
> .twtr-widget .twtr-tweet-wrap {
>      padding:6px 0 !important;
>
> }
>
> Note the use of the !important flags to override existing settings and  
> escape the css cascade. Now twitter themselves, rather frustratingly, set  
> the widget font-style using an !important tag. This means that in order to  
> override it we need to prioritise our !important using the identity  
> contentRight of the right column in which the twitter widget appears.
>
> Lastly, in order to direct users clicking the twitter badge to ShowMeDos  
> twitter site we use a little jQuert to change the href attribute of the  
> twitter link:
>
>      $('.twtr-doc a').attr('href', 'http://twitter.com/ShowMeDo');
>
> And we have the resulting, pretty satisfactory widget:
>
> Related posts:ShowMeDo is on Twitter
> New Services Site for Professional Screencasts
> Site updates
>
> --
> You are subscribed to email updates from "ShowMeDo Blogs the World."
> To stop receiving these emails, you may unsubscribe now:  http://feedburner.google.com/fb/a/mailunsubscribe?k=mzd6eL3jR5fu0svJf...
>
> Email delivery powered by Google.

Gary Frederick

unread,
May 14, 2010, 5:14:11 AM5/14/10
to show...@googlegroups.com
I have accounts on each but mostly do not use them.

Gary

On Fri, May 14, 2010 at 3:08 AM, dai <dai...@gmail.com> wrote:
sorry don't use facebook or twitter, I use identi.ca instead.

On May 14, 3:35 am, ShowMeDo Blogs the World <showm...@gmail.com>
wrote:
> ShowMeDo Blogs the World
>
> ///////////////////////////////////////////
> Site Relaunch - customizing that Twitter Widget
>
> Posted: 13 May 2010 08:47 AM PDThttp://blog.showmedo.com/showmedo-front-page/site-relaunch-customizin...
>
> With limited time to post any content to the Blog or Twitter micro-blog,  
> being able to reuse/advartise that content seems like a win-win. Twitter
...
Reply all
Reply to author
Forward
0 new messages