I've created a pdf using barryvdh/laravel-dompdf and now I'm trying to style it. I've been sort of successfully on most of it, but I can't get my rows to be different colour. What I would like to happen is that with every odd row it needs to be a certain colour. I'm also having a problem with getting my font to work as well and I'm not understanding why.
Here is my pdf
<html style="margin: 0; padding: 0;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{{ $order->invoice_number }}</title>
<style>
body{
font-family: Arial;
}
.invoice_table .table {
display: table;
width: 100%;
}
.invoice_table .table .thead {
display: table-header-group;
}
.invoice_table .table .tr {
display: table-row;
}
.invoice_table .table .thead .tr .th {
display: table-cell;
}
.invoice_table .table .thead .th {
padding: 13px 0 12px;
}
.invoice_table .table .tbody {
display: table-row-group;
}
/* CODE TO MAKE THE ROWS A DIFFERENT COLOUR */
.invoice_table .table .tbody .tr:nth-child(odd){
background-color: #4C8BF5;
color: #fff;
}
.invoice_table .table .tr .td {
display: table-cell;
}
.invoice_table .table .tbody .td {
padding: 20px 0;
}
</style>
</head>
<body style="margin: 0; padding: 0;">
<div class="invoice_table" style="width: 700px; margin: 30px auto;">
<div class="table" style="border: 1px solid #000;">
<div class="thead" style="border: 1px solid #000;">
<div class="tr" style="border: 1px solid #000;">
<div class="th"></div>
<div class="th" style="border: 1px solid #000;">Description</div>
<div class="th" style="text-align: center; border: 1px solid #000;">Qty</div>
<div class="th" style="text-align: center; border: 1px solid #000;">Unit Price</div>
<div class="th" style="text-align: center; border: 1px solid #000;">Total Price</div>
</div>
</div>
<div class="tbody">
@foreach($order_item->items as $item)
<div class="tr">
<div class="td"></div>
<div class="td" style="border: 1px solid #000;">
{{ $item['item']['title'] }}
</div>
<div class="td" style="text-align: center; border: 1px solid #000;">
{{ $item['qty'] }}
</div>
<div class="td" style="text-align: center; border: 1px solid #000;">
R {{ $item['item']['price'] }}
</div>
<div class="td" style="text-align: center; border: 1px solid #000;">
R {{ $item['price'] }}
</div>
</div>
@endforeach
<div class="tr">
<div class="td" rowspan="3" colspan="3" style="padding: 50px 0 5px 0; border: 1px solid #000;"></div>
<div class="td" style="text-align: right; padding: 50px 0 5px 0; border: 1px solid #000;">
SUBTOTAL:
</div>
<div class="td" style="text-align: center; padding: 50px 0 5px 0; border: 1px solid #000;">
R {{ $order_item->totalPrice }}
</div>
</div>
@if(!empty($order->delivery_fee))
<div class="tr">
<div class="td" style="text-align: right; padding: 0 0 5px 0; border: 1px solid #000;">
DELIVERY FEE:
</div>
<div class="td" style="text-align: center; padding: 0 0 5px 0; border: 1px solid #000;">
R {{ $order->delivery_fee }}
</div>
</div>
@endif
<div class="tr">
<div class="td" style="text-align: right; padding: 0; border: 1px solid #000;">
TOTAL:
</div>
<div class="td" style="text-align: center; padding: 0; border: 1px solid #000;">
R {{ $order->order_price }}
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It is based on this package, so I would suggest reading their documentation. https://github.com/dompdf/dompdf
Regarding the alternating row color, I would suspect that it does not work with :nth-child. Instead try adding a class name to every odd row and give that class a different color
.invoice_table .table .tbody .tr.odd {
background-color: #4C8BF5;
color: #fff;
}
@RESIN - I'm not sure how I would be able to add a class name to every odd row when I'm looping through my items
Why are you not just using a table?
Use the loop variable to determine odd and even rows.
I think @resin is right, I don't think you can use nth-child on a class itself
I've changed it to a table, but I'm still having a problem with changing the font.
Did you read the provided link?
Snippet:
PDF documents internally support the following fonts: Helvetica, Times-Roman, Courier, Zapf-Dingbats, & Symbol. These fonts only support Windows ANSI encoding. In order for a PDF to display characters that are not available in Windows ANSI, you must supply an external font. Dompdf will embed any referenced font in the PDF so long as it has been pre-loaded or is accessible to dompdf and reference in CSS @font-face rules. See the font overview for more information on how to use fonts.
More info here: https://github.com/dompdf/dompdf/wiki/About-Fonts-and-Character-Encoding
Please or to participate in this conversation.