Creating style sheets for Roll20 Log Parser 2 output files is fairly simple, as long as one is familiar with how to style webpages in CSS. If you need help with that, the W3 Schools Reference is a great resource.
Here’s all the tags and classes that are used in the HTML documents, and some advice for how to use them.
| body | This tag is the body of the page as a whole. Used for generalized formatting. | You can use this to set background color, and any other default formatting for the page. |
| img | The only img tags on the page should be the avatar images attached to the messages. I can’t guarantee this, since it’s possible Roll20 could put one into a message body, but I also can’t find any way to cause that. Let me know if you find one! | Use this to format the avatar images. Roll20 saves your avatar images at original size and aspect ratio, so you’ll need to do something here to normalize their size! Setting the height property to a constant value is the best way I’ve found of keeping everything looking uniform. |
| div.message | All messages, regardless of type, are contained in divs with class message. | This should be used for formatting that should be applied to all messages, including emote message and desc messages. For example, if you want a dividing line between all messages, putting a border property in this class is a good way to do that. |
| div.avatar | This div contains the img tag for an avatar image. In messages that have an avatar attached, this div will be the first thing inside the message div. | I suggest using this tag/class combination for laying out the avatar image’s position on the page, and use the img tag for styling the image itself. |
| div.normal | The normal class is attached to messages that were spoken without using the /me or /desc commands. | Use this class identifier for formatting specific to normal messages. Emotes and Desc messages will be unaffected by this formatting. |
| div.emote | The emote class is attached to messages that were spoken using the /me command. | Use this class identifier for any emote message-specific formatting (centering, bolding, orange background etc.) |
| div.desc | The desc class is attached to messages that were spoken by the GM using the /desc command. | Use this class identifier for any desc message-specific formatting (centering, bolding, etc.) |
| div.spacer | These divs are not added by the Roll20 parser, but Roll20’s log system sprinkles them liberally throughout message contents. As the name suggests, these are div tags with no content, used only as spacers for laying out stuff on the page. | I strongly suggest just disabling these with display: none unless you really know what you’re doing with them. |
| span.speaker | These spans are at the front of the message divs’ content, after the avatar (if any). They just contain the name of the character who spoke the message, followed by a colon. | There’s not a lot to do here except format the name text. |
| span.inlinerollresult | This is the span class used by Roll20 for displaying inline roll results. | Use this to apply formatting that is universal to all rolls, regardless of outcome. |
| span.fullcrit | This class is applied to inlinerollresult spans when the result is the highest possible roll. | Setting a 2px solid green border around it will emulate the look of Roll20’s Critical Success rolls. |
| span.fullfail | This class is applied to inlinerollresult spans when the result is the lowest possible roll. | Setting a 2px solid red border around it will emulate the look of Roll20’s Critical Fail rolls. |
| div.navigation | This div is the box at the bottom of the page containing navigation links. | You probably don’t need to do anything to this, but if you want to, go wild. |
A Note on CSS Class Overriding
You may notice that some of these classes may apply at the same time to a given item; for example, if you have a desc message, both the message and desc classes will apply to the div tag. What happens if, say, you set div.desc to have background-color: red and div.message to have background-color: blue? The answer is that whichever declaration comes later in the CSS document will override the earlier ones. Therefore, I suggest that you add items to your CSS file in the order that they are presented here; I’ve laid them out from most general to most specific, which will ensure that everything overrides each other correctly. Alternatively, you can chain class names together (e.g. div.message.desc) to achieve much the same effect.
A Note on Inline HTML and CSS
If you use custom scripts with your Roll20 game, they may cause Roll20 messages to contain extra HTML and CSS styling code. Because the Roll20 Log Parser 2 pulls out the full HTML content of messages, this should usually be preserved as-is. If there is inline CSS, you won’t be able to style these HTML features using a custom CSS file, because the inline CSS will override anything you put into the file (I guess you could mark the CSS file items as !important, but I haven’t tested this). However, if the HTML content refers to externally linked CSS files, it’s possible the styling may be absent. In that case, you should be able to style them with your custom CSS document, although the specifics of how to do so are dependent on the custom script in question.
A Note on Roll Formatting
Inline rolls (done through [[formula]]) can be handled through the CSS fields in the table above. However, discrete rolls (those done through the /r command) are formatted totally differently, and they way they are formatted is wild. I can’t figure out what all of these divs are doing, so I just whipped out a CSS inspector and brute-force copied their formatting for the default stylesheet. Since I don’t know how it works, I couldn’t include it in the table. But here’s the relevant part of the default stylesheet, which you can drop at the bottom of your custom .css file to handle that formatting:
div.formula {
display: inline;
padding: 4px;
background: white;
border-radius: 3px;
border: 1px solid #D1D1D1;
font-size: 1.1em;
line-height: 2.0em;
word-wrap: break-word;
}
div.formattedformula {
display: block;
float: left;
padding: 0 4px 0 4px;
margin: 5px 0 5px 0;
}
div.clear {
clear: both;
}
div.dicegrouping {
display: inline;
}
div.diceroll {
display: inline-block;
font-size: 1.2em;
}
div.dicon {
display: inline-block;
min-width: 30px;
text-align: center;
position: relative;
}
div.didroll {
text-shadow: -1px -1px 1px #FFF,1px -1px 1px #FFF,-1px 1px 1px #FFF,1px 1px 1px #FFF;
z-index: 2;
position: relative;
color: black;
height: auto;
min-height: 29px;
margin-top: -3px;
top: 0;
text-align: center;
}
div.backing {
position: absolute;
top: -2px;
left: 0;
width: 100%;
text-align: center;
font-size: 30px;
color: #8FB1D9;
text-shadow: 0 0 3px #8FB1D9;
opacity: .75;
pointer-events: none;
z-index: 1;
}
div.rolled {
cursor: move;
font-weight: bold;
color: black;
font-size: 1.4em;
display: inline;
padding: 4px;
background: white;
border-radius: 3px;
border: 1px solid #D1D1D1;
font-size: 1.1em;
line-height: 2.0em;
word-wrap: break-word;
}
div.critfail {
color: #730505;
font-weight: bold;
}
div.critsuccess {
color: green;
font-weight: bold;
}