Wednesday 19 December 2012

How to make Joomla Tweet Display Back Module into a Speech Bubble

After  solving this problem Easy Twitter Status no longer works on Joomla 1.5 websites
I wanted to change the look so that the tweet showed in a speech bubble like this .

Check the Escape Surfboards Surf Report site to see it live.

Here's what I did .  Don't forget if your doing this kind of work then using Firebug is a awesome tool.

>  drew a line around the box that contains the tweet.  Adding a rounded corner effect too.

-moz-border-radius: 15px;
border-radius: 15px;

border: 1px solid #333;



>  make a image that will go at the top to make it look like speech.

I put this image in the folder modules/mod_tweetdisplayback/media/images





>  in the Tweet Display Back Template that your changing you need to add the following < div > to appear above the Tweet Box .



For me this was on line 79 of modules/mod_tweetdisplayback/tmpl/default.php  (take out the spaces from the HTML !)

     < div class="TDB-tweet-speech-img">< img src="/speech.gif" border="0"></ div>





>  lastly you need to position that and change the position of the box below so it all looks right.


.TDB-tweet-speech-img  {
display: block;
position: absolute;
margin-left: 25px;
}

.TDB-tweet-container {
float: left;
margin-top: 19px;
}

table.tweetouter {
    margin-bottom: -15px !important;
 
}

   





No comments: