CSS Declaration Examples and Filters available using WPPizza – Pdf Invoices

Using your own font (this must be a truetype font – see also “Know Issues” below)

To use your own font, follow the guide below:

• Go to “WPPizza -> Settings-> PDF Invoices”
• Make sure the template selected is of “Format: HTML” (additional CSS declarations will be ignored for “Plaintext” Templates)
• The font url used in your CSS must be the ABSOLUTE PATH to your font.ttf
• If necessary, ensure you ask for permission to utilise the font (if using a commercial font for example)
• Set “Global – PDF Font [Html]” to “– Custom Font –“
• Enter your font declaration – as outlined in the below CSS example – and preview the PDF output
• If your font selected is not being used, make sure you clear the font cache by clicking on the “Clear Font Cache” button (especially and every time you change the path to the font you want to use)
• If you are happy with the display/output of the PDF, Save your settings

	/* 
	 CSS example:
	 using an invented myfont.ttf / myfont-bold.ttf / myfont-italic.ttf /myfont-italicbold.ttf  
	 for the relevant font-weights. 
	 If there is only a myfont.ttf (and no distinct bold/italc etc .ttf) use that instead for all src urls
	*/
	/* src:url must be an ABSOLUTE path to a TRUETYPE font */ 
	@font-face{
		font-family: "MyFont"; 
		font-style: normal; 
		font-weight: normal; 
		src: url("[absolute/server/path/to]/myfont.ttf") format("truetype");
	}
	@font-face{
		font-family: "MyFont"; 
		font-style: normal; 
		font-weight: bold; 
		src: url("[absolute/server/path/to]/myfont-bold.ttf") format("truetype");
	}
	@font-face{
		font-family: "MyFont"; 
		font-style: italic; 
		font-weight: normal; 
		src: url("[absolute/server/path/to]/myfont-italic.ttf") format("truetype");
	}
	@font-face{
		font-family: "MyFont"; 
		font-style: italic; 
		font-weight: bold; 
		src: url("[absolute/server/path/to]/myfont-italicbold.ttf") format("truetype");
	}
	
	/*
	 overriding previous font faces for all elements 
	 (!important might not always be necessary here, but wont do much harm) 
	*/
	html,body,table,tbody,tr,td,th,span,div{
		font-family:'MyFont' !important;
	}

Known issues using fonts:

• Not all fonts will support all character sets / languages. Many fonts simply do not have character support for Asian/Non-Western languages or provide support for the default icons in the WPPizza – Add Ingredients” extension for half/half, quarters (If used). Therefore, if you see a ‘?’ or some square boxes in your pdf output instead of the appropriate character, you will have to use a different font I’m afraid (or use the inbuilt ones into the plugin if that is an option)

Adding additional CSS

Note: Any additional CSS entered in the textbox will only be applied to “Format:HTML” templates.

• Many, but not all, possible CSS that would normally be valid for html documents will be understood by the dompdf library in use. KEEP IT SIMPLE (and use valid css)
• For security reasons, any images you use in your CSS MUST reside on the same domain.
• To view the html elements from which the PDF will be generated, use the preview button next to the CSS textarea and your browsers element inspector to find the element you wish to target
• For font-sizes in particular, I recommend you use relative sizes like ‘%’ instead of pixels
• In some cases you might have to add ‘!important’ to your css
• If you wish, you can also enter these declarations directly into the css are for the print template you are using. However, they would then also apply if you choose to use this template for other purposes (though this could be prevented from prefixing every declaration with body#wppizza_pdfinv which is only applied when generating these PDFs)

/* Example - adding a background image to your header - left aligned */
#header{
	background-image:url('http[s]://www.yourdomain.com/[my/server/path]/myimage.png');
	background-repeat: no-repeat;
	background-position: left;
}
//Note: "background-size" is not supported, make sure you size your image according to your requirements. Images must reside on the same domain.

/* Examples - changing margins */
	body{margin:0 !important}//zero margin
	body{margin:2cm 1cm !important}//top,bottom 2cm | left,right 1cm

/* Example - making fontsizes bigger/smaller/bold of a particular element */
	#overview #order_id td {font-size:50%}//making order id (if enabled) smaller
	#summary #total td {font-weight:bold}//bolding the "total" in the summary
/* 
	etc etc , you get the idea. if necessary, you might have to add !important in some cases, depending on what your particular scenario
*/
	
/* 
	Targeting the footer (which is not visible in the css previews but will be rendered in the PDFs)
	you will most likely need an !important here to override the default of 
	color:#666666; text-align:center; font-size:80% 
	
	the "position" is dynamic depending on paper margins but is by default similar to
	position: fixed; bottom: 0.75cm; left: 0.75cm; right: 0.75cm;
	if you want to override it
*/
	footer{color:red !important}

/* Example - background image for refunded orders - images must be on the same domain */
	body.payment-refunded{
		background-image:url('http[s]://www.yourdomain.com/[my/server/path]/refunded.png');
		background-repeat: no-repeat;
		background-position: center;
	}

/* Example - background image prepaid or delivered status - image must be on the same domain */
	body.payment-prepaid,body.order_status-delivered{
		background-image:url('http[s]://www.yourdomain.com/[my/server/path]/paid.png');
		background-repeat: no-repeat;
		background-position: center;
	}

/* 
	other statuses that might be available depending on your specific settings (this follows the status set for each order in the order history):
	
	body.payment-on_delivery{}
	body.order_status-new{}
	body.order_status-acknowledged{}
	body.order_status-on_hold{}
	body.order_status-processed{}
	body.order_status-custom_1{}
	body.order_status-custom_2{}
	body.order_status-custom_3{}
	body.order_status-custom_4{}
*/

//Note: "background-size" is not supported, make sure you size your image according to your requirements. Images must reside on the same domain.

Enabling other inbuilt PDF formats using filter: ‘wppizza_pdfinv_format’

Additional formats are available by using the filter as follows:

@param: array
@return: array

add_filter('wppizza_pdfinv_format', 'myprefix_pdfinv_format');
function myprefix_pdfinv_format($format){
	/* adding A5 */
	$format['A5'] = array(
		'label' => 'A5', //label
		'page_margin' => array(0.5, 0.5), //top, left margin (in cm)
		'font_size' => array(7, 7) //font size - in pt (plaintext, html). the inbuilt A4/letter/legal format use 8pt, if omitted will default to dompdfs default of 12pt
	);

return $format;
}

full list of formats available with suggested margins/font sizes you could use in the function above

	// A Format
	$format['A3'] = array('label' => 'A3', 'page_margin' => array(0.5, 0.5), 'font_size' => array(10, 10));
// 	$format['A4'] = array('label' => 'A4', 'page_margin' => array(0.5, 0.5), 'font_size' => array(8, 8));/* inbuilt into plugin */
	$format['A5'] = array('label' => 'A5', 'page_margin' => array(0.5, 0.5), 'font_size' => array(7, 7));
	$format['A6'] = array('label' => 'A6', 'page_margin' => array(0.5, 0.5), 'font_size' => array(6, 6),);
	$format['A7'] = array('label' => 'A7', 'page_margin' => array(0.5, 0.5), 'font_size' => array(4.5, 4.5),);
	$format['A8'] = array('label' => 'A8', 'page_margin' => array(0.5, 0.5), 'font_size' => array(3, 3),);
	$format['A9'] = array('label' => 'A9', 'page_margin' => array(0.5, 0.5), 'font_size' => array(2, 2),);
	$format['A10'] = array('label' => 'A10', 'page_margin' => array(0.5, 0.5), 'font_size' => array(1.5, 1.5),);

	// B Format
	$format['B3'] = array('label' => 'B3', 'page_margin' => array(0.5, 0.5), 'font_size' => array(10, 10));
	$format['B4'] = array('label' => 'B4', 'page_margin' => array(0.5, 0.5), 'font_size' => array(8, 8));
	$format['B5'] = array('label' => 'B5', 'page_margin' => array(0.5, 0.5), 'font_size' => array(7, 7),);
	$format['B6'] = array('label' => 'B6', 'page_margin' => array(0.5, 0.5), 'font_size' => array(6.5, 6.5),);
	$format['B7'] = array('label' => 'B7', 'page_margin' => array(0.5, 0.5), 'font_size' => array(4.5, 4.5),);
	$format['B8'] = array('label' => 'B8', 'page_margin' => array(0.5, 0.5), 'font_size' => array(3, 3),);
	$format['B9'] = array('label' => 'B9', 'page_margin' => array(0.5, 0.5), 'font_size' => array(2, 2),);
	$format['B10'] = array('label' => 'B10','page_margin' => array(0.5, 0.5), 'font_size' => array(1.5, 1.5),);

	// C Format
	$format['C3'] = array('label' => 'C3', 'page_margin' => array(0.5, 0.5), 'font_size' => array(10, 10));
	$format['C4'] = array('label' => 'C4', 'page_margin' => array(0.5, 0.5), 'font_size' => array(8, 8));
	$format['C5'] = array('label' => 'C5', 'page_margin' => array(0.5, 0.5), 'font_size' => array(7, 7),);
	$format['C6'] = array('label' => 'C6', 'page_margin' => array(0.5, 0.5), 'font_size' => array(6.5, 6.5),);
	$format['C7'] = array('label' => 'C7', 'page_margin' => array(0.5, 0.5), 'font_size' => array(4.5, 4.5),);
	$format['C8'] = array('label' => 'C8', 'page_margin' => array(0.5, 0.5), 'font_size' => array(3, 3),);
	$format['C9'] = array('label' => 'C9', 'page_margin' => array(0.5, 0.5), 'font_size' => array(2, 2),);
	$format['C10'] = array('label' => 'C10', 'page_margin' => array(0.5, 0.5), 'font_size' => array(1.5, 1.5),);

	// Misc Standards
//	$format['letter'] = array('label' => 'Letter', 'page_margin' => array(0.5, 0.5), 'font_size' => array(8, 8));/* inbuilt into plugin */
//	$format['legal'] = array('label' => 'Legal', 'page_margin' => array(0.5, 0.5), 'font_size' => array(8, 8));/* inbuilt into plugin */
	$format['ledger'] = array('label' => 'Ledger', 'page_margin' => array(0.5, 0.5), 'font_size' => array(10, 10));
	$format['tabloid'] = array('label' => 'Tabloid', 'page_margin' => array(0.5, 0.5), 'font_size' => array(10, 10));
	$format['executive'] = array('label' => 'Executive', 'page_margin' => array(0.5, 0.5), 'font_size' => array(10.5, 10.5));
	$format['folio'] = array('label' => 'Folio');

	// Misc Fixed Sizes
	$format['8.5x11'] = array('label' => '8.5x11', 'page_margin' => array(0.5, 0.5),);
	$format['8.5x14'] = array('label' => '8.5x14', 'page_margin' => array(0.5, 0.5),);
	$format['11x17'] = array('label' => '11x17', 'page_margin' => array(0.5, 0.5),);

Adding custom formats using filter: ‘wppizza_pdfinv_custom_format’

If you wish to add your own custom format use the filter like so :

@param: array
@return: array

add_filter('wppizza_pdfinv_custom_format', 'myprefix_pdfinv_format_custom');
function myprefix_pdfinv_format_custom($format){
	$format['80mm_160mm'] = array(//use A-Za-z0-9 (whithout spaces) for the key
		'label' => 'My Format (80mmx160mm)',//set the label
		'paper_size' => array(0, 0, 226, 552),//in points (example here equates to 80mm x 160mm)
		'page_margin' => array(0.25, 0.25),//page_margin in cm (top, left)
		'orientation' => 'portrait',//portrait or landscape
		'font_size' => array(5, 5),//fontsizes - in points - for plaintext,html. omit for default of 12pt (necessity depends on paper size set )
	);

return $format;
}