Styling PDF file exports
GravityExport gives you full control over the look and feel of PDF file exports. Before the PDF is rendered, an HTML table is constructed:
<table border="0" cellpadding="0" cellspacing="0" id="sheet0" class="sheet0">
<thead>
<tr class="row0">
<th class="column0">Form Field 1</th>
<th class="column1">Form Field 2</th>
<th class="column2">Form Field 3</th>
</tr>
</thead>
<tbody>
<tr class="row1">
<td class="column0">Entry 1 - Field 1 Value</td>
<td class="column1">Entry 1 - Field 2 Value</td>
<td class="column2">Entry 1 - Field 3 Value</td>
</tr>
<tr class="row2">
<td class="column0">Entry 2 - Field 1 Value</td>
<td class="column1">Entry 2 - Field 2 Value</td>
<td class="column2">Entry 2 - Field 3 Value</td>
</tr>
<tr class="row3">
<td class="column0">Entry 3 - Field 1 Value</td>
<td class="column1">Entry 3 - Field 2 Value</td>
<td class="column2">Entry 3 - Field 3 Value</td>
</tr>
</tbody>
</table>
Using the barebones stylesheet that's included with GravityExport, the end result will look as follows:
To customize header columns and rows, you need to create your own CSS file with custom styles that target HTML table element selectors/classes. For example, your custom_stylesheet.css
may look as follows:
table.sheet0 { font-size: 14px; font-weight: bolder; table-layout: fixed; width: 60%; } table.sheet0 th, table.sheet0 td { text-align: left; border: none; padding: 5px 0 5px 0; } table.sheet0 tr { background-color: white; } table.sheet0 tr:nth-child(odd) { background-color: #F3F3F3; } table.sheet0 th { font-size: 15px; font-weight: bold; color: white; background-color: #2D4154; }
For GravityExport to apply these styles, you need to use a custom filter to specify where that file is located:
add_filter( 'gravitykit/gravityexport/pdf/styles', function ( $styles ) {
$styles[] = '/path/to/your/custom_stylesheet.css';
return $styles;
} );
This will apply styles to PDF exports from all forms. If you want to target a single form, suffix the filter with the form's ID: 'gravitykit/gravityexport/pdf/styles_100'
. If you wish to override the base styles completely, change the above code sample to read $styles = '/path/to/your/custom_stylesheet.css';
Once done, your PDF will look as follows: