Feldstudie.net .::. Twitterblase aka. Twiggern .::. CSS, Twigger, Twitter

« Volle Mausunterstützung unter VMware 6 Auswertung August »

Sep 01 2008

Profilbild von Torsten Feld
Torsten Feld

Twitterblase aka. Twiggern

Veröffentlicht um 13:14 in Blog / Website

Vor kurzem habe ich Olivers Beitrag über das 'Twiggern', also das Twittern im Blog', gelesen und seine Umsetzung finde ich sehr gelungen. Die Sprechblasen, welche den letzten Tweet preisgeben fügen sich sehr gut in den Hintergrund ein und dominieren nicht das Gesamtbild. Aus diesem Grunde habe ich mich entschlossen, dies nun auch für meine Seite so zu gestalten.

Mittels des Plugins 'Twitter Tools' kann der letzte Tweet in bestimmten Abständen abgerufen und irgendwo auf der Seite platziert werden. Diesen gilt es dann nur noch ansprechend zu gestalten.

Leider kam ich mit dem CSS von Oliver nicht allzu weit, da ich meine Sprechblase rechts von meinem Logo platzieren wollte. Nach einiger Hilfe von Oliver selbst, mlogger und Ambros kam ich dennoch gestern Abend zu einer zufriedenstellenden Lösung. Außerdem habe ich noch so lange 'herumgetweakt' bis das Ergebnis auch im IE vernünftig aussah. Zu Beginn war es leider so, dass ein horizontaler Spalt zwischen dem oberen Teil der Blase und dem unteren Teil war.

Hier nun mal mein Code. Vielleicht kann ihn ja noch jemand gebrauchen

PHP:

<div id="headercontainer">
	<div id="logo"> <img alt="Feldstudie.net Logo" src="http://www.feldstudie.net/img/feldstudie-logo.jpg"> </div>		
 
	<div id="twitter-status">
	    <p>
	        <?php aktt_latest_tweet(); ?><br>
	    </p>
	    <div id="twitter-status-bottom"></div>
	</div>
</div>

CSS:

#headercontainer
{
	width: 900px;
	margin: 0 auto;
}
 
#twitter-status {
	padding: 20px 0 0px;
}
 
#twitter-status-bottom {
	background:transparent url(/img/status-bottom.jpg) no-repeat scroll 0pt 100%;
	height:14px;
	width:451px;
	padding-top: 0px;
	margin: -2px 0px 0px 330px;
	padding:0px 20px 0 50px;
}
 
#twitter-status p {
	background:transparent url(/img/status-top.jpg) no-repeat scroll 0pt 0pt;
	font-size:1.1em;
	line-height:1.5em;
	margin-top:15px;
	margin-bottom:0px;
	min-height:30px;
	overflow:hidden;
	padding: 10px 20px 0px 30px;
	text-shadow:1px 1px 3px #FFF;
	width:401px;
	color: #FFF;
}
 
#twitter-status a
{
	color: #9BDEEF;
}