TikiRobot! » iChat http://www.tikirobot.net/wp Mai Tais and Blinky Lights, Ahoy! Wed, 01 Feb 2012 22:14:15 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Announcing ChatBubble! http://www.tikirobot.net/wp/2008/01/29/announcing-chatbubble/ http://www.tikirobot.net/wp/2008/01/29/announcing-chatbubble/#comments Tue, 29 Jan 2008 08:57:04 +0000 rajbot http://www.tikirobot.net/wp/2008/01/29/announcing-chatbubble/
I’ve finally made it easy to post good-looking iChat transcripts to the blog! We use CSS to style DIVs to look like iChat speech balloons.

Cool! Where I can get the CSS?

All the code is checked into SourceForge. You can browse it here.

But how does it work?

A brief description is here. Scott Schiller came up with the Even More Rounded Corners technique that we use. There is a CSS file to include and a python script that turns transcripts into html that you can paste into a blog post. We need more documentation, CSS cleanup, cross-bowswer support, and more speech balloon colors, if you feel like contributing patches.

Doesn’t WordPress completely bork the formatting in Safari by adding unmatched </p> tags?

Yup! WordPress is crap! You can use the wp-unformatted plugin to disable autop() on posts that contain ChatBubbles.

]]> http://www.tikirobot.net/wp/2008/01/29/announcing-chatbubble/feed/ 5 How To Style a DIV to look like an iChat speech balloon using CSS http://www.tikirobot.net/wp/2007/12/17/how-to-style-a-div-to-look-like-an-ichat-speech-balloon-using-css/ http://www.tikirobot.net/wp/2007/12/17/how-to-style-a-div-to-look-like-an-ichat-speech-balloon-using-css/#comments Mon, 17 Dec 2007 11:07:44 +0000 rajbot http://www.tikirobot.net/wp/2007/12/17/how-to-style-a-div-to-look-like-an-ichat-speech-balloon-using-css/ This technique works in standards compliant browsers, such as FireFox 3 and Safari 3. You can make it work in non-standards compliant browsers if you want to, but it requires some tweaking.

These instructions are simplified. When posting a chat transcript, you will want to have speech balloons originating from the left alternating with balloons alternating on the right. In this example, we will only discuss the case of the balloons originating from the right. We will generalize ‘CBmsgR’ and ‘CBmsgL’ as just ‘CBmsg’.

1. Start with a container div with its css display property set to ‘table’. We will set the css class of this div to be CBmsg.

2. Add two table-cells to the CBmsg div. The CBmsg will contain a CBtxt and a CBicon. This will create the following layout:

The CSS for this will look like this:

<style type="text/css">
 
div.CBmsg {
                  display: table; 
            margin-bottom: 0.5em;
                    float: right;
               text-align: right;
           }
 
div.CBtxt {
                  display: table-cell;  
                 position: relative;
                   margin: 0px auto;
                min-width: 8em;
                max-width: 760px;
                  z-index: 1;
              margin-left: 12px;
           }
 
div.CBicon {
                  display: table-cell; 
           vertical-align: bottom;
             padding-left: 10px;
            }
</style>

And the HTML will look this this:

<div class="CBmsg">
  <div class="CBtxt">txt</div>
  <div class="CBicon">icon</div>
</div>

3. Add the user’s chat icon. It looks like this:

This is what the CSS looks like. The padding property is only necessary if your blog template sets padding for all images, like ours does.

div.CBicon > img {
		  padding: 0px;
		    width: 32px;
		   height: 32px;
		}

And this is the HTML:

  <div class="CBicon"><img src="IconRajbot.jpg"></div>

4. OK, now comes the complicated part. We use the Even More Rounded Corners technique to draw a bubble. We use a 800×1600 png that looks like an empty iChat bubble. Here is what it looks like:

We copy the ‘content’, ‘t’, and ‘b’ CSS classes from Even More Rounded Corners verbatim:

.CBtxt .CBcontent,
.CBtxt .CBt,
.CBtxt .CBb,
.CBtxt .CBb div {
 background:transparent url(BubbleBlueR800x1600.png) no-repeat top right;
}
 
.CBtxt .CBcontent {
 position:relative;
 zoom:1;
 _overflow-y:hidden;
 padding:0px 12px 0px 0px;
}
 
.CBtxt .CBt {
 /* top+left vertical slice */
 position:absolute;
 left:0px;
 top:0px;
 width:12px; /* top slice width */
 margin-left:-12px;
 height:100%;
 _height:1600px; /* arbitrary long height, IE 6 */
 background-position:top left;
}
 
.CBtxt .CBb {
 /* bottom */
 position:relative;
 width:100%;
}
 
.CBtxt .CBb,
.CBtxt .CBb div {
 height:10px; /* height of bottom cap/shade */
 font-size:1px;
}
 
.CBtxt .CBb {
 background-position:bottom right;
}
 
.CBtxt .CBb div {
 position:relative;
 width:12px; /* bottom corner width */
 margin-left:-12px;
 background-position:bottom left;
}
[/pre]
 
And the HTML now looks like this:
<pre lang="html">
<div class="CBmsg">
  <div class="CBtxt">
    <div class="CBcontent">
      <div class="CBt"></div>
      txt
    </div>
    <div class="CBb"><div></div></div>
  </div>
  <div class="CBicon"><img src="IconRajbot.jpg"></div>
</div>
]]> http://www.tikirobot.net/wp/2007/12/17/how-to-style-a-div-to-look-like-an-ichat-speech-balloon-using-css/feed/ 2