Printable pdf does not apply custom CSS

[lasalesi]

We have a print template that is mainly html. It embeds an html table with alternate row colors so that it becomes more readable.

<table  style="width: 100%;">
 <tbody class="alternate-row-colors">
 <tr>
 (...)

It has a custom script in the print template, that contains

.alternate-row-colors tr:nth-child(odd) {
    /* background-color: #F5F5F5; */
    background-color: #FF0000;
}

(red only to see it better). In the preview mode, this works perfectly. However, when clicking the PDF function, the generated pdf does not have the custom format. It was also noted when looking at the output html (from frappe/frappe/utils/pdf.py) that the custom CSS code is not written to the html stream that goes into wkhtmltopdf.

Is there a trick to apply custom CSS to the pdf output?

The system is ERPNext: v8.8.3 (master) Frappe Framework: v8.7.7 (master).

[netchampfaris]

Use the Custom CSS field of your Print Format

[lasalesi]

@netchampfaris: thanks, I have done exactly that and it does not apply.

See screenshots

This is the preview:

And as pdf:

[netchampfaris]

Try adding !important

background-color: #FF0000 !important;

[lasalesi]

Thanks, that worked! (Using !important)

[Not_a_countant]

Would be great if you posted the final screen shot. Thanks

[lasalesi]

Hi @Deepak_Pai,

sure. We used this HTML

<!-- positions -->
<p><br /><strong>Rechnungspositionen</strong></p>
 <table  style="width: 100%;">
 <tbody class="alternate-row-colors">
 <tr>
    <th style="width: 5%; ">Pos</th>
    <th style="width: 18%; ">Artikel-Nr.</th>
    <th style="width: 30%; ">Beschreibung<th>
    <th style="width: 10%; ">Einheit</th>
    <th style="width: 13%; ">Preis</th>
    <th style="width: 9%; ">Menge</th>
    <th style="width: 15%; ">Betrag</th>
 </tr>
 {% for n in doc.items %}
 <tr style="border-bottom: 1px solid black; ">
    <td>{{ loop.index }}</td>
    <td>{{ n.item_code }}</td>
    <td>{{ n.item_name}} {% if n.picked_up == 0 %}*{% endif %}
     {% set c = n.color or '' %}
     {% if c != '' %}
     <br />Abtönung: {{ n.color }}
     {% endif %}
    </td>
    <td><!-- format shift correction --></td>
    <td>
     {% set u = frappe.get_doc("Item", n.item_code) %}
     {{ u.net_weight or 'n/a' }} {{ u.weight_uom or '' }}
    </td>
    <td>CHF {{ "{:,.2f}".format(n.price_list_rate) }}</td>
    <td>{{ n.qty }}</td>
    <td>CHF {{ "{:,.2f}".format(n.amount) }}</td>
 </tr>
 {% endfor %}
 </tbody>
 </table> 

With this custom CSS

.alternate-row-colors tr:nth-child(odd) {
    background-color: #F5F5F5 !important;
}

The preview then looks something like this

And the pdf looks alike