Adium: Chatting With Style

Published 18 years, 4 months past

Tim Bray, that dashing man-about-town, recently sang the praises of Adium, a multi-service chat client for OS X.  I’d tried it a while back, and been only marginally impressed.  At the time, its presentational inflexibility was too annoying for me to take it seriously.  Okay, yes: it was a damn sight better than Messenger for OS X, which is the only reason I even kept it on my hard drive.  But I hardly ever log onto MSN any more, as everyone I know is on AIM.  So I’d stuck with iChat AV.

Still, Tim’s word is always gold (or at least high-grade palladium) with me, and he said the magic words (“highly skinnable”), so I downloaded the latest copy and poked around for a bit.

Boy howdy!  Adium has definitely come a long, long way since last I visited.  You can change the appearance of your chat sessions (with “message themes”), the dock icons, the contact list, and much more.  Since none of the default message themes really did it for me, I went looking for others.  There are quite a few available at the Adium Xtras site, but none of them were really what I wanted either.  In iChat, I cranked the graphic frippery down to zero so that the chat sessions were as compact as possible, but I still had the text look nice.  If I could recreate that in Adium, it would make the migration much, much simpler.

So I dug into the package contents of a promising message theme… and found out that themes are based on nothing more than XHTML and CSS.

Seriously.  The entirety of an Adium chat window is an XHTML document that’s being dynamically updated via DOM scripting—all of it pumped through WebKit, of course.  In creating a message theme, you define what markup will be used, and write CSS to style it.  You can even define variants on your theme by writing additional style sheets.

So with some quick hacking, I not only radically improved the markup generated during a chat (the markup I saw in the packages I downloaded was, um, sub-optimal), but I basically replicated my old iChat theme with some simple CSS.  And then I created some variants that slightly modify it in various ways, mostly to prove that I could.

I’m now wondering if I could write and attach JavaScript that would make chat sessions even more interactive, more robust.  (Update: Phil says yes.)  Click on a line to copy the whole line to the clipboard, say, or dynamically change the in-session presentation by hitting a button.  Adium may block that kind of thing, but if not, then it’s a chat client extensible beyond anything I’ve so far imagined.

And given how much I love to tinker with my software, that’s like waving a bulging suitcase of money in front of a senator.

Granted, there are some things I’d like to change.  For example, the markup you define in a theme is not used in saving the chat log.  In a log, you just get some basic markup with a case of classitis and very, very poor semantics.  It would be a lot cooler if you could define the log markup (or the log just used the markup you generate during a chat session) and the CSS to present it.

A chat log is also something that, it seems to me, cries out for a microformat.  The markup I’m using for my theme is also a first effort in that direction, recycling some other microformats’ concepts (I stole a bit from hCalendar and am planning to graft in some hCard as well) and setting up some basics.  If I can take this far enough, I might consider pushing to upgrade the markup Adium generates in its logs.  They’re dropping a lot of information on the floor when they write out the logs, and I think that’s a shame.

But then, I can make the effort to fix that and actually have a chance of it paying dividends.  The joys of open source, you know?

I’ll still use iChat AV for videoconferences, which are an essential tool for family cohesiveness when I’m on the road, as well as to keep close to my father down in Florida.  For text, though—which accounts for at least 90% of my instant messaging activity—Adium is my new chat buddy.

Comments (40)

  1. Hello Eric, Just for the info, the code of Adium is based on the Gaim libraries. So it is more a Gaim-like for MacOSX rather than a Trillian-like ;-)

  2. Indeed you can attach javascripts to your message styles. I’m not sure of the implementation details, but there are styles out there that include messages fading in, accelerated scrolling and scrolling upon new messages. The Renkoo theme is a recent popular one that might help out.

  3. Hi,

    I too love Adium.

    How about sharing your themes?

    Thanks

    David

  4. “A chat log is also something that, it seems to me, cries out for a microformat”

    Ha! You’re obsessed! ;o)

  5. I would like to use your theme if you feel it is complete enough to release. I haven’t been able to find one that is as minimal as I would like and still prepends the sender’s name on every line. I also haven’t had the time to write a theme myself. Yours looks just about like what I would write (minus the lighter text).

    Also, they have a nice ticket system for bug reports and feature requests. You might want to create a ticket for the logs.

  6. I thought I’d let you know that Adium will be switching to a XML based log format with it’s upcoming 1.0 release.

  7. The theme isn’t quite ready for release, but when it is, I’ll certainly be happy to make it available.

    rollercoaster375: that’s interesting—probably overkill, in my opinion, but if it has all the needed information it would at least be easy to transform. Do you have a pointer to information about the structure of the log format?

  8. I personally use Proteus. It, like Adium, is based on libgaim, and also uses WebKit for message themes (the first beta of Proteus 4 came out before Adium had message themes).

  9. Pingback ::

    Brewed Fresh Daily » Eric’s Archived Thoughts: Adium: Chatting With Style » Opinions, news and events from Cleveland, Ohio

    […] ic’s Archived Thoughts: Adium: Chatting With Style by George

    Chat program for OSX.

    Filed under: Tech @ 11: […]

  10. This is cool. Does anyone know of a chat client for Windows that does XHTML+CSS skinning?

  11. As you requested: http://trac.adiumx.com/wiki/XMLLogFormat

    The ticket to track when this is completed: http://trac.adiumx.com/ticket/38

  12. I’ve been loving Adium for a while. I had a suspicion they formatted the chats via CSS, but I’d never looked into it. What fun!

    One day, via hChat, biography writers will give the world remarkable insight into the character of one E. Meyer.

  13. I like adium a lot (I was a GAIM user on Linux and Windows before switching to Mac at home), but I wish file transfers actually worked. Everytime I want to get or send a file I have to switch to iChat.

  14. Ahh I love Adium. It makes IM on Windows feel so poor (although beta 1 of Gaim 2.0 isn’t bad at all).

    Mike Pond: You can do HTML+CSS theming on Windows using Miranda when combined with a plugin called IEView. Unfortunately this is using the IE6 engine so there’s limits on what you can achieve. Furthermore, everything else about Miranda is, well it’s not in good shape (takes ages to get a nice environment set up, the plugin based functionality results in a terrifying number of preferences and zero UI consistancy).

  15. What does your conversation markup look like? I use an orderered list with <cite> and <q> tags in mine, but I”m about timestamps and how to handle some presentational bits like the double colon that follows names (which I put in the markup itself because I want the unstyled thing to look natural, if not pretty). I guess this would be an opportunity to wet my toes with the microformat process, which I”ve always watched from afar because I had no immediate interest in the formats discussed so far.

    One effect I tried to achieve but haven”t succeeded at so far is to align all lines of <q> content to the start of the first one when there is a linebreak within a single list item or the content gets wrapped, instead of flowing under the <cite> as they normally do. (Maybe display: table-cell would get me this? But last I checked it wasnȉt all that well supported…)

  16. In which I meant to say, of course, that I”m unsure about timestamps and how to handle some presentational bits.

  17. That’s a very interesting find.

    Adium is fantastic. The only thing I miss in it is support for Skype IM. Add that and I would only need a single IM application.

  18. Mike: Although meant as IRC only, Chatzilla (the IRC-client bundled with SeaMonkey and available for Firefox) does all its theming with HTML and CSS as well. And can be made into a a general IM-client through a service like Bitlbee.

  19. Hi, I’m one of the developers of Adium (and a big fan of CSS/Edge), so it’s great to see people excited about it :)

    About the message logs: we’re in the middle of redesigning our logging format for 1.0, and the current design is based on XML. If you’d like to get involved, *please* do, we’re lacking in DOM/CSS/XML experts, and input is always welcome. Most of the talking goes on in our irc channel (#adium on chat.freenode.net), but we also have a development mailing list and a forum.

  20. I’m an Adium lover too. Thanks for pointing out the fact that the message styles are so easily created. I had never even thought to look into it! I was always more excited about the applescript support :). Thanks, DJ

  21. Aristotle: I’m using an ordered list myself. The timestamps I’m handling with abbr elements, as in hCalendar, and filling the ISO timestamp into the title attribute. Here’s the markup fragment for an incoming message.


    <li class="incoming">
    <abbr class="dtstamp" title="%time{%Y-%m-%dT%H:%M:%SZ%z}%">%time%</abbr>
    <cite class="vcard"><img src="%userIconPath%" alt="" title="%senderScreenName%" width="20" height="20" />%sender%</cite>
    <blockquote>%message%</blockquote>
    </li>
    <span id="insert"></span>

    I’m not sure there’s any real benefit to using blockquote instead of q— it’s something I’ll have to ponder a bit. Also, the vcard class is kind of a placeholder for the eventual addition of hCard information.

    (Why bother when all this stuff will get dumped when the log is written? Um, did I mention I like to tinker? Also because it’s the best way for me to focus on writing what I’ll call, for lack of anything more original, hChat.)

    For a “next” message, the class is modified to incoming next. For outgoing messages, of course, changing incoming to outgoing. For contextual messages, I just tack on a context class name.

  22. Aristotle (part two): as for display: table-cell, it is indeed not widely supported—but it is supported in Webkit, so it’s an option for Adium. I did a quick test for the markup I shared in my previous comment:


    ol {display: table;}
    li {display: table-row;}
    ol li > * {display: table-cell; border: 1px dotted;}

    And lo, a presentational table was born of non-table markup.

    The only problem in my quick test was with status messages, which in my theme don’t have a cite element and so threw off the table’s balance (by having two cells in the row instead of the usual three). I could fix that by adding <cite>system</cite>, or something along those lines, if I were going to entable the chat theme, and that would fix the presentational problem.

    This does make me wonder if, from a purely structural and semantic point of view, status messages should have a citation or not. I can see arguments either way. Hmmm…

  23. Ah, <abbr>, of course. I”d even read about its use for timestamps, in Tantek”s log.

    The question of <q> vs <blockquote> depends on the content and default presentation. <blockquote> requires block-level elements – you can”t put text or inline elements directly into it –, and without styling, it renders on a new line. That”s why I picked <q> (which of course conversely means all linebreaks must be <br/>s and there must not be <p> or other block-level elements).

    As for the microformat name, how about hConversation? :-)

    For a “next” message, the class is modified to incoming next. For outgoing messages, of course, changing incoming to outgoing. For contextual messages, I just tack on a context class name.

    I”m not sure what you mean here, I”m afraid. Are you referring to the <span> in your template? (That”s invalid HTML, btw…)

    As for the styling: turning the entire list into a table makes all citations equally wide. It”s certainly an option where supported (and tastes will vary widely, of course), but I didn”t want that. I wanted each citation to be just as wide as it needs to be to contain the name, and to make extra lines in multiline chatter line up with the end of the citation. Let me try if I can do some ASCII art by way of non-breaking spaces here…

    John: blah blah blah blah
          blah blah blah blah
          blah blah blah
    Hieronymus: blah blah blah
                blah blah
    John: blah blah blah blah
          blah blah

    That”s the effect I wanted to get, with markup that looks like this:

    <li>
    <span><cite>John</cite>:</span>
    <q>blah blah blah blah blah blah blah blah blah blah blah</q>
    </li>

  24. Aristotle: You make a good case for q, given the inherent constraints of the medium. I worry a bit about more capable future clients, ones that might allow whole paragraphs and lists and such to be exchanged. In such a case, the use of blockquote would become more compelling. For the moment, though, q serves the purpose admirably.

    Are you referring to the <span> in your template? (That”s invalid HTML, btw…)

    Yes, but it’s necessary for Adium to have it, or else there’s no place for the next message to be inserted, which kind of breaks the whole idea of a chat. I didn’t get too upset about it because we’re talking about a dynamically constructed document whose source will never actually see the light of day—it isn’t logged with that markup and once the chat window is closed, the document is destroyed. I’m not clear on whether Adium requires an actual span or not, or if only the ID is needed. In any case, there certainly wouldn’t be such a thing in hChat/hConversation.

    I wanted each citation to be just as wide as it needs to be to contain the name, and to make extra lines in multiline chatter line up with the end of the citation.

    Ah. In that case, given your markup, I think you’re out of luck. With an extra div wrapped around the contents of the list item, you could do what you’re after using the table-related display values (effectively making every list item its own table).

  25. Colloquy is another styling-aware IRC-Client. Output is in XML, rendering ist done with CSS on xslt-generated HTML.

  26. Eric:

    I worry a bit about more capable future clients, ones that might allow whole paragraphs and lists and such to be exchanged.

    Good point; having such stuff would be very cool, in fact. I suppose it only requires that clients drop in a <p> for now in order to use <blockquote> across the board. Handling unstyled presentation gracefully is difficult though… hrm. I guess the hypothetical hConversation should just allow both elements? Smarter software could then pick one depending on circumstances.

    In any case, there certainly wouldn”t be such a thing in hChat/hConversation.

    Okay.

    With an extra div wrapped around the contents of the list item, you could do what you”re after

    Actually, just setting display:table-cell on the <span> and <q> and white-space:nowrap on the <span> is enough. Per CSS, the browser will create an anonymous table within the <li> to hold the items, which gets me the desired effect.

    I”m coming at this from a “publishable markup” angle though, so I was trying to think of a way to avoid display:table-cell, since support for it is still spotty. I guess there isn”t. Oh well; I”ll live.

  27. It took a bit to find the files to edit, so I thought it might be helpful for other less savvy users to post the method for getting to the files.

    Go to the Applications folder then ctrl-click on Adium.app and choose “Show Package Contents”

    Contents > Resources > Message Styles

    Duplicate an existing message style then ctrl-click on that new style and choose “Show Package Contents”

    Contents > Resources

    Now you are in the directory with the files to edit.

    Hope this speeds you on your way to perfectly styled chatting.

  28. Trackback ::

    90% Crud

    OS X? Adium.

    On OS X? Using iChat? Time to switch to Adium. I tried Adium maybe a couple years ago and was underwhelmed, so when I started hearing people talk about it I figured that it wasn’t anything worth checking out. Eventually…

  29. I’m finding XHTML, CSS and JS are everywhere these days. From XULRunner (Mozilla/XUL for your desktop app) to Adium’s CSS formatting, which I stumbled on a month or two ago myself, while looking at different ways to present logs. And imagine using RubyOnRails locally for your HTML/CSS/JS output? Now that’s powerful.

    They got it wrong in 1999. It’s not about your desktop on the web. It’s about the web, on your desktop. Literally ;)

    Anyway, I’m so excited about the micro-format idea for logs. And while chats and conversations could be used for it, I think making it more generic for “logging” is even more useful. Especially for gaming logs, which I’ve been puzzling over to display semantically, but haven’t yet found that “perfect” solution.

    The problem is displaying so much information about what’s going on in-game, along with highlighting what people say. Either way, hChat would fit in here nicely, but expanding it a bit to handle more generic “actions”, like /me in IRC or killing someone in a game is important too. Or what were you thinking of doing for status changes?

    Now I’m imagining an application that parses hLogs and compares what people are doing at the same time … using CSS vertical bar charts for a calendar-style display?

    Hmmm, fun posibilities here.

  30. Unsanity has an application to manage logs of adium and ichat : http://www.unsanity.com/ctm

  31. Here is the obligatory reference guide for those having difficulty finding it: http://trac.adiumx.com/wiki/CreatingMessageStyles.

  32. with a microformat you are of course missing a trick if you don’t call it hIM ;)

  33. Hmm, I was just thinking later that night, what if you could create an hCal of your chat logs, with integrated hCards? So you’ve your hIM nested in some hCal, with hCard-attributes for who’s talking? Or um, something? :) It’d be interesting to view my chat logs through a calendar interface …

  34. Pingback ::

    alexking.org: Blog > Around the web

    […] The Fishbowl: Wikipedia vs Britannica. Apples vs Oranges. ongoing – Adium is the Future Eric’s Archived Thoughts: Adium: Chatting With Style […]

  35. Eric, you’re a true master of CSS! I’d love to say a ‘well done’ to you. Adium is nowadays excellent, why don’t you help the devs?

  36. hey was good i read a little bit of wat u wrote n i wanna let u kno dat dats all cool wat u tryin to show people but i wanna c how cold u chat so hit me up in my email i guess n give me ur aol screen name ok hope to talk to ya iight

  37. Hello

    I am having difficulty understanding the predeliction towards Adium.
    In my opinion, its just brouhaha as

    1] you still cannot do voice chat.
    So although i have added my Google talk account, I am just able to use it as a regular IM. no voice chat at all.

    2] ability to go stealth mode (like in yahoo) for particular contacts.

    Barring these two, what can i say.

    I would really really love to hear comments. Eric..please.

    thank you

  38. Pingback ::

    JavaScript beyond the browser - The Web Standards Project

    […] It’s always interesting to see Web Standards used in a setting outside the browser. Did you know, for instance, that the chat client Adium can be skinned using CSS? […]

  39. Pingback ::

    Webkrauts » JavaScript jenseits des Browsers

    […] Es ist immer wieder interessant zu beobachten, wenn Webstandards in einer Umgebung außerhalb des Browsers verwendet werden. Wussten Sie zum Beispiel, dass das Aussehen des Chat-Programms Adium (für Mac OS X, Anm. des Übersetzers) mit CSS angepasst werden kann? […]

  40. You said in comment 7 (that’s Mon 19 Dec 2005):
    > The theme isn”t quite ready for release, but when it is, I”ll certainly be happy to make it available.

    Are they ready now?

Add Your Thoughts

Meyerweb dot com reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand.

HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>

if you’re satisfied with it.

Comment Preview