I was bored, so I played around with this for a while. I’m starting to think its not possible or a couple reasons.
- It appears that we can’t use border-radius in the print templates.
- It doesn’t seem that we can apply background images to divs or table cells.
I put this HTML/CSS together really quick to test. You only get square boxes. I also noticed the inline Divs don’t work but that’s not a big deal (could use a table). You could always do something like it with boxes, just doesn’t appear you can do circles/radius.
<div style="width: 100%; height: 10px;"> </div>
<div style="text-align:center; width:225px;">
<div style="text-align:center; border: 1px black solid; height:50px;width:50px;border-radius:25px; display:inline-block; line-height: 1em;">
<span style="font-size:8px">2020</span><br />
<span style="font-size:14px">21:49</span><br />
<span style="font-size:8px">Dec 24</span><br />
</div>
<div style="text-align:center; border: 1px black solid; height:50px;width:50px;border-radius:25px; display:inline-block; line-height: 1em;">
<span style="font-size:8px">Table</span><br />
<span style="font-size:14px">59</span><br />
<span style="font-size:8px">'ico'</span><br />
</div>
<div style="text-align:center; border: 1px black solid; height:50px;width:50px;border-radius:25px; display:inline-block; line-height: 1em;">
<span style="font-size:8px">Pax</span><br />
<span style="font-size:14px">3</span><br />
<span style="font-size:8px">'ico'</span><br />
</div>
<div style="text-align:center; border: 1px black solid; height:50px;width:50px;border-radius:25px; display:inline-block; line-height: 1em;">
<span style="font-size:8px">Server</span><br />
<span style="font-size:14px">Joe R</span><br />
<span style="font-size:8px">'ico'</span><br />
</div>
</div>
<div style="width: 100%; height: 10px;"> </div>
<div style="Text-Align: Center; background: white; color: black; border: 1px black solid; border-radius:5px; width: 225px; font-family:'Helvetica'; font-size:12px; font-weight:normal;line-height: 1.6em;">Guest</div>
<div style="border-bottom: 1px black solid; text-align: left; width: 225px; font-family:'Helvetica'; font-size:12px; font-weight:normal; line-height: 1.6em;">
<table width="100%">
<tr>
<td style="font-family:'Helvetica'; font-size:12px;">285 Chicken Burger Special</td>
<td style="font-family:'Helvetica'; font-size:12px; text-align:right;">[] 1x</td>
</tr>
</table>
</div>
<div style="width: 100%; height: 10px;"> </div>
<div style="Text-Align: Center; background: white; color: black; border: 1px black dashed; border-radius:5px; width: 225px; font-family:'Helvetica'; font-size:12px; font-weight:normal;line-height: 1.6em;">'ico' WIFI E4B178</div>