Dialog: Customize HTML Output

<< Click to Display Table of Contents >>

Navigation:  Reference >

Dialog: Customize HTML Output

(via menu Tools > logging Start Communication Logging ... , then choose HTML file for web browsers (.htm) and click Customize HTML output)


This dialog allows you to change the appearance of the HTML log files, by modifying the HTML template code that Docklight uses when generating the HTML log file data.


You need some basic understanding of HTML documents and CSS style attributes. We recommend www.htmldog.com (English) or www.selfhtml.org (German) for a quick overview on these topics.


HTML Header Template

The HTML document header. Here you can change the font applied to the log file data, using the following CSS style attributes:


CSS Style Attribute

Description and Example


Defines one or several fonts (or: font categories) that the HTML browser should use to print a text. If the browser does not support the first font, it will try the second one, a.s.o. The last font usually defines a generic font category that every browser supports. Examples:

font-family:'Courier New', Courier, monospace

font-family:'Times New Roman', Times, serif

font-family:arial, helvetica, sans-serif


Specifies the font size. Both, absolute and relative sizes are possible. Examples for absolute font sizes:









Examples for relative font sizes (relative to the parent HTML element)





NOTE: Use the semicolon (";") as a separator between two different CSS style attributes, e.g.

font-family:sans-serif; font-size:small


NOTE: Docklight will insert additional <u> (underline), <i> (italic) and <b> (bold) HTML tags, if such formatting options are activated in the Display Settings. You do not have to use the font-style or font-weight attribute to create these effects.


HTML Footer Template

Adds additional footer text and closes the HTML document.


Data Element Template

For every new piece of log file information (channel 1 data, channel 2 data, or a comment text), a new <span>  tag with different text color is added to the HTML log file.  


The template code for the header, footer and data parts contains Docklight-specific wildcards which must not be deleted:





The background color, as selected in the Display Settings


Header text at the start of the log file


Footer text at the end of the log file


a chunk of the log file data: channel 1 data, channel 2 data, or a comment text


The text color to apply for %DATA%, as selected in the Display Settings


When generating a log file, Docklight replaces the wildcards with the current display settings and the actual communication data.