First, if ya don't know what status.cafe is, it's a site where you can have well. a little status to put on your site with just a simple widget. Heres the link.
When you log in to ur account and make a status, you should see a link reading "status widget", click that and you'll see the html for the status. Put that wherever on your page. There's also CSS included, so paste that in your css file/style tag too.
The CSS provided is just basic stuff, but how do you make something more interesting, you may ask... like the thought bubble on my homepage? Well let me tell you...
First I made the image of the bubble (and a little character), then I make a div. I set the div's width and height to be the same as the image I made, then set that image as the background. Be sure to make sure the div has relative positioning too. Inside the div, I'll paste the status cafe widget html code.
Le code:
Now obviously I want to move the status itself so it is inside of the speech bubble, and I'll have my username be below it.
In your css file or style tag, add position:absolute to both #statuscafe-username and #statuscafe-content. This will allow us to position it anywhere inside of the parent div with our background image. For the content, I'm going to give it a width and height that matches the speech bubble and add overflow-y: auto, which will add a scrollbar incase the status is too long and doesn't fit the speech bubble.
Now in the css, I'm going to use "top" and "right" to position the status to sit inside of the speech bubble.