In this article we'll go over more in-depth tutorials to further your invoice customization using CSS coding.

If you need to review the basics of CSS coding, please refer here. (hyper link article for CSS Basics)

If at any point, you'd like assistance with CSS for invoice customization please reach out to our support team here.

Sometimes you may want custom phrasing on your invoice. This will show how to hide the existing name and replace with the desired phrasing.

1) First navigate to an existing invoice. Highlight the section you'd like to adjust. Right click and select "Inspect"

Your screen should then look something like this, with the highlighted element already selected.

2) Click the plus symbol to make adjustments to the desired element. Enter the elements.

visibility: hidden

position: relative

Your invoice should then look like this.

3) Now we can create an element of the desired verbiage.

Click the plus sign again to add a new element.

We then put a colon next to the item and type "After" (no spaces) selected element:after

Then add the elements;

visibility: visible

position: absolute

top: 0

left: 0

Content: "Your desired verbiage"

Your screen should then look something like this.

4) We then need to take all the elements we've created and enter them into our CSS box for our invoice template.

*Note: This is where it would come in handy to have another tab open with your invoice template already in edit mode.

Copy all of the elements you created. From the header to the end bracket "}"

Paste elements into the Custom CSS box. Click "Save"

5) Now you can refresh your invoice and the changes will show.

If desired, you also have the ability to re-arrange the order of the tables within your invoice.

By default the order is Flat Fees, Time Entries, Expenses

1) First copy and paste the following code for moving the table items. This will be necessary regardless of the order you choose.

.col-md-12 {

display: flex;

flex-direction: column;

}

2) Choose the order you would like the table to appear. Copy and paste the corresponding code into the Custom CSS box.

Time Entries, Expenses, Flat Flees

.table-header:nth-of-type(1), .table-responsive:nth-of-type(1) {

order: 3;

}

Flat Flees, Expenses, Time Entries

.table-header:nth-of-type(2), .table-responsive:nth-of-type(2) {

order: 2;

}

3) Click "Save" and then you can refresh your invoice and it will reflect the changes.

Sometimes you may want a certain element of the invoice to have a different font size. With these steps you can adjust a certain element, instead of the whole invoice.

If you do wish to change the font size of the whole invoice, please see here.

1) First navigate to an existing invoice. Highlight the section you'd like to adjust. Right click and select "Inspect"

2) Click the plus symbol to make adjustments to the desired element. Enter the elements.

font size: 16pt (the number is the size of font you want)

3) Then copy the entire element from the header to the end bracket "}"

4) Paste the coding into the Custom CSS box when in edit mode of the invoice template.

Note: If you have other CSS coding in here, it does not matter the order in which the coding is entered into the box.

5) Click "Save" and then you can refresh your invoice and it will reflect the changes.

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) First navigate to an existing invoice. Highlight the section you'd like to adjust. Right click and select "Inspect"

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

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

4) 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 test should now reflect the desired font family.

When downloading invoices to PDF some font families may translate and some may not. This is due to the PDF Creator Tool that PracticePanther uses.

The supported list of fonts is fonts that will translate to PDF.

font-family: 'arial';

font-family: 'times new roman';

font-family: 'sans-serif';

font-family: 'wingdings';

font-family: 'Open Sans';

font-family: 'Montserrat';

font-family: 'Poppins';

font-family: "Footlight MT Light';

*This list is subject to change. If you come across a font that does translate, please feel free to reach out to us so that we can update this list.*

font-family: "engravers mt";

font-family: "Good Times";

*This list is subject to change. If you come across a font that don't translate, please feel free to reach out to us so that we can update this list.*

Your firm might have custom colors for the logo and you'd like to reflect that within your invoice as well, you can do that!

1) First navigate to an existing invoice. Highlight the section you'd like to adjust. Right click and select "Inspect"

2) Click the plus symbol to make adjustments to the desired element. Enter the elements.

color: #xxxxx

The numbers/letters after the pound symbols should be your custom color coding i.e. #8D1E06

3) Then copy the entire element from the header to the end bracket "}"

4) Paste the coding into the Custom CSS box when in edit mode of the invoice template.

Note: If you have other CSS coding in here, it does not matter the order in which the coding is entered into the box.

5) Click "Save" and then you can refresh your invoice and it will reflect the changes.

By default, your logo image is aligned to the left hand column of your invoice. However if you want to move that image to the center or right hand side of your invoice, we can do that too.

Simply copy and paste this CSS coding into the Custom CSS box of your invoice template.

Centered

img.tenantLogo {

display: block;

margin-left: auto;

margin-right: auto;

}

Right Alignment
img.tenantLogo {

display: block;

margin-left: auto;

}

Click "Save" and then you can refresh your invoice and it will reflect the changes.