Log colorization

How to enable colorization and how to customize with different colors, colorize certain programs or apps, and more.


Standard Colors

Papertrail can automatically colorize the system and program name links in the Web log viewer, like this:


Enable it in your Profile.

To colorize text within log messages, generate messages containing ANSI escape codes. Papertrail will colorize them as shown in More colorful logging with ANSI color codes. Papertrail colorizes normal foreground colors, which are ANSI 30 to 37 (see this table for a visual example). Codes in either direction (ex: behaviors, lighter variants) are not supported and may not render properly. Papertrail honors ANSI color codes regardless of user-specific colorization preferences.

With colorized logs, the event viewer looks like this:


If you need to filter colorized logs, check out the example regex.

You can also customize almost any aspect of the log viewer. Read on for how to colorize a specific program, a specific system, change text size, or use completely custom colors and options.

Command-Line Client

Colorization for the papertrail command-line app is part of the papertrail-cli README.

Customize colors


Our goal is always to expose the right level of customization and in the correct form, and not just create options for the sake of creating options. A more complex product, or even a more sophisticated one, is not always a better one.

With colorization, there’s a slippery slope between a bit of color to add contrast and enhance readability, and an end-to-end custom theme markup. Those aren’t likely to let you do more with your logs, especially compared to other ways which that time (ours and yours) could be invested.

However, you might have different design taste than we do, have a specific vision in mind, or just want to tinker. If you already use a browser extension to customize site design or behavior, the customization examples below offer some ideas. And if you create CSS that others might use, or you have comments or requests, please tell us more.


Colorize certain programs or systems

Make the program mysqld orange:

#event_list li[data-program="mysqld"] .program a { color: #cb4b16; }

Make any system names containing db red:

#event_list li[data-system*="db"] .system a { color: red; }

Note the *= instead of = to match substrings within the system name, rather than = for exact match. These are standard CSS attribute selectors. Any selector can be used.

Instead of changing the color of the system name, here’s how to make the entire message text red on dark red (for messages from systems containing db):

#event_list li[data-system*="db"] span.message { color: red; background-color: darkred; }

Colorized based on message contents

The same technique can be applied to the data-message attribute instead of the data-system attribute. This will colorize any messages containing “OMG” dark red.

#event_list li[data-message*="OMG"] span.message { color: red; background-color: darkred; }

Colorized based on severity

Highlight messages based on their severity using the data-severity attribute:

#event_list li[data-severity="Warning"] .message { color: LightSalmon; }
#event_list li[data-severity="Error"] .message { color: Red; }
#event_list li[data-severity="Info"] .message { color: White; }
#event_list li[data-severity="Debug"] .message { color: Cyan; }

Change text size

Reduce the log viewer display size with:

#event_list li { font-size: 10px; }

Reduce the search box size with:

#ftr #search input.text { font-size: 12px; }

Override all colors

The log message has 4 CSS elements: timestamp, system name, program name, and message text. Override any or all of them.

Here’s an example that overrides all 4 message elements for a distinctly The Matrix look:

#event_list li time { color: darkgreen; }
#event_list li .system a { color: #3a6b49; }
#event_list li .program a { color: #8ba786; }
#event_list li .message { color: green; }

which will look like:


Or a very bright theme:

#event_list li time { color: #cdee46; }
#event_list li .system a { color: #26d51c; }
#event_list li .program a { color: #f143cc; }
#event_list li .message { color: #3064f7; }


We don’t change these tags often, so they are reliable for use in your CSS. Most Stylish changes take effect when you press the “Save” button in its CSS editor screen.

If you create a CSS that others might use, or you have comments or requests, please tell us more via support@papertrailapp.com.

Sample markup

This is an example message that the CSS below is operating on. The CSS above matches the data-program or data-system attributes of li. It then modifies the time tag or span tags inside (based on their CSS classes).

<li data-program="sshd" data-system="www23">
  <time datetime="2011-08-26T21:59:09-07:00">Aug 26 21:59:09</time>
  <span class="system"><a href="">www23</a></span>
  <span class="program"><a href="">sshd</a>:</span>
  <span class="message">Some message</span>

Viewer customizations

Hide leftmost timestamps

If all senders include their own timestamps in each log message, Papertrail’s timestamps can be hidden using the viewer option Hide Time:

How to hide the time

which contracts the timestamp to a dot on the left side of the screen. Hover over the dot to display the time in a tooltip:

Viewer with hidden time


Thanks to Sam Stokes, Rapportive, Luke Carpenter, and Ghostworks for major contributions to this. Y’all rock.