Can you make screenshots before and after the changes? I don't see why the code should be changed. I believe the Twitter widget works fine.

It works fine, you are correct. It is just that the Mystique earlier version displayed it a bit nicer.

I am aware that the newer mystique's JavaScript has been updated, that is left intact, it is just basically div tags not JavaScript, but the changes is located within the JavaScript, however, persons who wish to may also style it from external css.

The screenshot has been styled with additional external css, so it will display a bit different than the screenshot, but it does display the changes (circled in red).

http://www.midnightstudios.co.za/downloads/twitter.png

For interest sake I also included the code I made to the widget as seen in the screenshot in:

_skin.class.php

I also moved Javascript in the widget to an external file in the Skin folder, I created the directory:

Skin_folder/w_js

This is where the skin writes the code to, this is just because I prefer cleaner code in my html. I have done this with all Javascript for my skin and plugins, this way I have clean html and no js conflicts.

	function display_twitter_widget( $limit = '#' )
	{global $skins_url;
		if( (!$user = $this->get_setting('twitter_user')) || $this->get_setting('display_my_tweets') == 0 ) return;
		if( $limit == '#' ) $limit = $this->get_setting('display_my_tweets');
		
		echo '<li class="block">
		<div class="block-twitter-wrap">
			  <div class="block-twitter">
				<h3 class="title"><span>'.$this->T_('My latest tweets').'</span></h3>
				<div class="block-div"></div>
				<div class="block-div-arrow"></div>
				<div class="clearfix">
				  <div class="avatar"></div>
				  <div class="info"></div>
				</div>';
				
				$twitter_s_code = '
				/* <![CDATA[ */
				jQuery(document).ready(function () {
				  jQuery(".twitter-content").getTwitter({
					username: "'.$user.'",
					count: '.$limit.',
					loading_text: "'.$this->T_('Loading tweets...').'"
				  });

				  jQuery.jTwitter("'.$user.'", function (userdata) {
					jQuery(".block-twitter div.avatar").prepend("<a href=\"http://www.twitter.com/'.$user.'\"><img src=\"" + userdata.profile_image_url + "\" /><\/a>");
					jQuery(".block-twitter div.info").prepend("<a href=\"http://www.twitter.com/'.$user.'\">" + userdata.name + "<\/a><br /><span class=\"followers\">" + userdata.followers_count + " followers<span>");
				  });
				});
				/* ]]> */';
$twitter_s = dirname(__FILE__).'/w_js/twitter_s.js';
if (!file_exists($twitter_s)) {$fh = fopen($twitter_s, 'w+');} 
$fh = fopen($twitter_s, 'w') or die("can't open file");
$stringData = $twitter_s_code;
fwrite($fh, $stringData);
fclose($fh);
				echo '<script type="text/javascript" src="'.$skins_url.'Skin_folder/w_js/twitter_s.js"></script>';
				echo '<div class="twitter-content clearfix"></div>
				<a class="followMe" href="http://www.twitter.com/'.$user.'"><span>'.$this->T_('Follow me on Twitter!').'</span></a>
				
				</div>
				</div>
              </li>';
		
		return;
	}	

Note: correctly name the skin directory:(Skin_folder)

echo '<script type="text/javascript" src="'.$skins_url.'Skin_folder/w_js/twitter_s.js">

here is the css for the widget:(Skin_folder/styles.css)

/* twitter */
.block-twitter {
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.tweet_list {
}

.tweet_first {
}
.twitter-content {
	padding-top: 15px;
}
.twitter-content ul.tweet_list li.tweet_even {
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: #000;
	border: 1px solid #000;
	padding: 1px;
	background-image: url(#666);
	overflow: hidden;
	color: #666;
}
.twitter-content ul.tweet_list li.tweet_odd {
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: #333;
	border: 1px solid #333;
	padding: 1px;
	overflow: hidden;
	color: #CCC;
}

.block-twitter ul li.tweet_even span.entry a{
	background:transparent url(images/icons.png) no-repeat 6px -146px;
	padding-left:24px;
	display:block;
	text-indent: -9999px;
}

.block-twitter ul li.tweet_odd span.entry a{
	background:transparent url(images/icons.png) no-repeat 6px -146px;
	padding-left:24px;
	display:block;
	text-indent: -9999px;
}

.block-twitter ul li.tweet_even span.entry a.date{
	background-repeat: no-repeat;
	background-position: -9999px;
	text-indent: 1px;
}

.block-twitter ul li.tweet_odd span.entry a.date{
	background-repeat: no-repeat;
	background-position: -9999px ;
	text-indent: 1px;
}

.block-twitter ul li.tweet_even span.entry{background:transparent url(images/icons.png) no-repeat 6px -440px;padding-left:24px;display:block;}

.block-twitter ul li.tweet_odd span.entry{background:transparent url(images/icons.png) no-repeat 6px -440px;padding-left:24px;display:block;}

.block-twitter-wrap {
	background-image: url(images/twitter-bottom.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-bottom: 90px;
}

.block-twitter ul, .block-twitter ul li{padding:0;margin:0;list-style-type:none;}

.block-twitter ul{
	padding-top:.2em;
}

.block-twitter ul li,.block-twitter ul li:hover{background:transparent;margin-bottom:.2em;padding-bottom:.2em;}



.block-twitter div.avatar{float:left;display:block;margin-left:10px;}

.block-twitter div.info{float:left;display:block;padding:2px 0 0 10px;line-height:175%;font-weight:bold;}

.block-twitter div.info .followers{font-size:125%;}

.block-twitter a.date{color:#bbb;text-decoration:none;font-style:italic;font-size:85%;display:block;}

.block-twitter a.date:hover{color:#ed1e24;}

.block-twitter .links{padding-right:1em;}

.block-twitter a.followMe{position:absolute;background:transparent url(images/twitter.png) no-repeat center top;width:45px;height:57px;display:block;top:-14px;right:20px;z-index:4;}

.block-twitter a.followMe span{display:none;}

.block-twitter h3.title span{padding-right:60px;}

.block-twitter .loading{background:transparent url(images/loader-white.gif) no-repeat 6px 6px;padding:6px 10px 6px 28px;float:left;}

I have changed links displayed(css), it displays an icon instead of text.

here is the icons:(Skin_folder/images)

http://www.midnightstudios.co.za/downloads/icons.png
http://www.midnightstudios.co.za/downloads/twitter-bottom.png

Please note: I am running my site on a local test server, once I am going to upload it I may clean my public folder which may result in these links/image links to become absolute.

Now I actually like twitter icon with the date "on hover" more than default variant. This is just a matter of taste. Anyone can change the format or style it different. I don't think that adding these changes to release is necessary.

Thanks anyway, it's nice to see someone improving the skin.

the same thing is happening to me.

Can you send me the .js file please. The link doesn't work anymore!

Twitter has discontinued its unauthenticated v1.0 API, so this widget has stopped working as of 2013-06-11.

Twitter wants your only option for on-page widgets to be their own Embedded Timelines, but there are workarounds which involve installing server-side code to support this widget.

Here is the work around:
https://github.com/StanScates/Tweet.js-Mod

Here is a workaround...

http://tweet.johnpscott.co.uk/