wiki:Development/Styles/DefaultHTMLFormat

TracNav(Development)? This is part of the Development Documentation Project, please help document Colloquy if you know anything that would be relevant here for other users to know about.

The default HTML format of a chat transcript

This page documents the default HTML format of the chat transcripts, generated by the default.xsl XSLT file. If you create a style using default.xsl, the resulting HTML files look like the example on this page. As a consequence, you can use the example file on this page to test your CSS file with. Here's the body of an example chat transcript (with indentation to be more readable and comments for an explanation of the elements):

<body>
  <!-- A div with class "event" represents an event, such
       as a member who joined or left a room. -->
  <div class="event">
    <!-- The timestamp of an event or envelope gets in a
         span with class "timestamp", together with 
         separator characters. -->
    <span class="timestamp hidden">[</span>
    <span class="timestamp">1:26pm</span>
    <span class="timestamp hidden">] </span>
    <!-- The textual explanation of the event comes 
         directly after the timestamp spans in the div.
         The member gets represented in an a element. -->
    <a href="member:nonex" class="member">nonex</a> joined
the chat room.
  </div>
  <!-- A div element with class "envelope" represents an
       envelope for a message. The "action" class says 
       that the message is an action. -->
  <div id="QOP04YY0SU" class="envelope action">
    <span class="timestamp hidden">[</span>
    <span class="timestamp">1:28pm</span>
    <span class="timestamp hidden">] </span>
    <!-- The dot becomes before the action to distinguish
         it textually from normal messages. The message
         itself is represented in a span element with 
         class "message". If the member represents
         yourself, it gets the extra class "self". -->
    <span class="hidden">• </span><a href="member:timothy"
class="member self">timothy</a><span
class="hidden">&nbsp;</span><span class="message">waves to
<a href="member:nonex" class="member">nonex</a></span>
  </div>
  <!-- If you get highlighted, the envelope gets the class
       "highlight". -->
  <div id="PB3AYY0SU" class="envelope highlight">
    <span class="timestamp hidden">[</span>
    <span class="timestamp">1:28pm</span>
    <span class="timestamp hidden">] </span>
    <!-- The member saying the message is represented in 
         an a element, followed by a semicolon and space in
         a span element. -->
    <a href="member:nonex" class="member">nonex</a><span
class="hidden">: </span>
    <!-- Your highlight word or nickname is represented in 
         a span element with class "highlight". -->
    <span class="message">hello <span class="highlight"><a
href="member:timothy" class="member">timothy</a></span>,
what is going on in here?</span>
  </div>
  <!-- A normal message. -->
  <div id="OPR89PY0SU" class="envelope">
    <span class="timestamp hidden">[</span>
    <span class="timestamp">1:28pm</span>
    <span class="timestamp hidden">] </span>
    <a href="member:timothy" class="member
self">timothy</a><span class="hidden">: </span>
    <!-- An emoticon is represented in a samp element in 
         a span with class "emoticon" and the name of the
         emoticon (e.g. "smile"). -->
    <span class="message">not a whole lot <span
class="emoticon smile"><samp>:)</samp></span></span>
  </div>
  <div id="FBAXHIY0SU" class="envelope">
    <span class="timestamp hidden">[</span>
    <span class="timestamp">1:28pm</span>
    <span class="timestamp hidden">] </span>
    <a href="member:timothy" class="member
self">timothy</a><span class="hidden">: </span>
    <span class="message">just surfing the internet.</span>
  </div>
  <div id="THIW3Y0SU" class="envelope">
    <span class="timestamp hidden">[</span>
    <span class="timestamp">1:28pm</span>
    <span class="timestamp hidden">] </span>
    <a href="member:timothy" class="member
self">timothy</a><span class="hidden">: </span>
    <!-- Urls automatically get represented in an a 
         element. -->
    <span class="message">seen <a
href="http://www.apple.com">http://www.apple.com</a>
today?</span>
  </div>
  <div id="M6NN5LX0SU" class="envelope">
    <span class="timestamp hidden">[</span>
    <span class="timestamp">1:50pm</span>
    <span class="timestamp hidden">] </span>
    <a href="member:nonex" class="member">nonex</a><span
class="hidden">: </span>
    <span class="message">no, I haven't had a chance</span>
  </div>
  <div id="NVTVDAW0SU" class="envelope highlight">
    <span class="timestamp hidden">[</span>
    <span class="timestamp">1:50pm</span>
    <span class="timestamp hidden">] </span>
    <a href="member:nonex" class="member">nonex</a><span
class="hidden">: </span>
    <span class="message"><span class="highlight"><a
href="member:timothy" class="member">timothy</a></span>:
cool new things!</span>
  </div>
  <div class="event">
    <span class="timestamp hidden">[</span>
    <span class="timestamp">1:50pm</span>
    <span class="timestamp hidden">] </span>
    <!-- Another event: you promoted nonex to operator. -->
    <a href="member:nonex" class="member">nonex</a> was
promoted to operator by you.
  </div>
  <div id="M7BDDMV0SU" class="envelope">
    <span class="timestamp hidden">[</span>
    <span class="timestamp">1:51pm</span>
    <span class="timestamp hidden">] </span>
    <a href="member:timothy" class="member
self">timothy</a><span class="hidden">: </span>
    <!-- Another emoticon: "wink". -->
    <span class="message">there you go <span 
class="emoticon wink"><samp>;)</samp></span> 
<b>enjoy!</b></span>
  </div>
</body>
Last modified 11 years ago Last modified on Aug 23, 2006 11:22:57 AM