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; }
In order 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 completely override the base styles, change the above code sample to read $styles = '/path/to/your/custom_stylesheet.css';
Once done, your PDF will look as follows: