Please note that the features presented within this article is available on all of our subscription plans. To learn more about our plans, please click here.

PracticePanther offers a variety of options to customize your invoice easily in your invoice settings. However, if you're in need of more specific customization, you may have to turn to customization with CSS code. 

Since editing with CSS code offers unlimited possibilities (depending on how proficient you are in CSS), this article will cover the 3 most popular customization requests. For more advanced customization, we recommend that you contact your IT person, or our support team. Please note that the instructions below require the use of Google Chrome. 

1) Open an invoice, right-click on the element you're looking to hide, and click on "Inspect". 

2) Hover over the code in the inspector, until the desired element is highlighted. 

3) When you find the line of code that highlights the desired element, double click on the class name, and copy it. 

4) Paste the class name in the CSS customization field (in your invoice settings). and add a "." (dot) before the class name. 

5) Paste the following code after the class name: {visibility:hidden;}

6) Hit "Save" at the bottom of the page, and refresh your invoice. The text should now be hidden. 

​

If you're looking to change the font size of all the text on your invoice, most of the code is already available in the CSS editor in PracticePanther (see body, h1, h2, h3, h4, h5, h6). 

All you have to do, is paste "font-size: 14px;" between the brackets (replace the number with the desired font size). It should look like this: 

To change the font size of a specific element on your invoice, follow the steps below: 

1) Open an invoice, right-click on the element you're looking to hide, and click on "Inspect". 

2) Hover over the code in the inspector, until the desired element is highlighted. 

3) When you find the line of code that highlights the desired element, double click on the class name, and copy it. 

4) Paste the class name in the CSS customization field (in your invoice settings). and add a "." (dot) before the class name. 

5) Paste the following code after the class name: "{font-size:19px;}" Make sure to replace the number with the desired font size.

6) Hit "Save" at the bottom of the page, and refresh your invoice. The text should now be hidden. 

If you're looking to change the font of all the text on your invoice, most of the code is already available in the CSS editor in PracticePanther (see body, h1, h2, h3, h4, h5, h6). 

All you have to do, is paste "font-family: Calibri;" between the brackets.

Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman".

To change the text style of a specific element on your invoice, follow the steps below: 

1) Open an invoice, right-click on the element of which you're changing the font, and click on "Inspect". 

2) Hover over the code in the inspector, until the desired element is highlighted. 

3) When you find the line of code that highlights the desired element, double click on the class name, and copy it. 

4) Paste the class name in the CSS customization field (in your invoice settings). and add a "." (dot) before the class name. 

5) Paste the following code after the class name: "{font-family: "Times New Roman";}", and replace the font style with the desired one. 

For example: If you're looking to use the Calibri font it should look like this:
{font-family: Calibri;}.

Note: If the name of a font family is more than one word, it must be in quotation marks, like this: {font-family: "Times New Roman";}.

5) Hit "Save" at the bottom of the page, and refresh your invoice. The text should now be hidden. 

If you would like to completely refresh the CSS code, copy and paste the following in the CSS field:

body, h1, h2, h3, h4, h5, h6{}

.table{}

.table thead th{}

.summary{}

.summary p{}

​
​Enjoy!

​Want to learn more about modifying the CSS within your invoices? Click here to find out more!