Linda and Vijay take a minute to evaluate the result of their work by generated a PDF on a test invoice. It looks pretty good so far! Linda checks the displayed information which seems to be complete. Before giving a test PDF to their invoice team for a final check, she would like to adapt the invoice to the Cloud Kick’s corporate identity.
Note: This article contains tips and tricks how to improve the appearence of the invoice or quotation PDF. Step by step explanations on how to access the Visualforce page or other procedures are part of the previous articles. Please check out the whole PDF template module for further information.
CSS Version
If you would like to improve the style of your template, please use CSS2. More recent CSS Versions are not supported by the Visualforce Code. In case you need to search for specific code, that is not mentioned in this article, you can start by having a look on this website : W3CSSVersion2.
Browser Extensions for color code picking
If you need a specific color code, e.g. to adapt the PDF to your corporate identity, we recommend to use a tool like ColorPick Eyedropper or ColorZilla. This tool allows you to pick the color of another website, like your company website.
Styles on text
Apex tags:
You can add styles to these apex tags: apex: outputText or apex: outputPanel.
Note: Since apex:outputField is supposed to overtake the style of a rich text field, you cannot apply styles on this tag.
Tables:
In addition you can add styles on text also into table elements, on any level.
Note: Styles on a higher level of the table overwrite the styles on a lower level, e.g. a style of a table row or styles applied on the whole overwrite the style of a table detail.
a) Colors on text
You can add this style to an apex: outputText or an apex: outputPanel.
style="color:RGB(80,79,124);"Example:
<apex:outputText value="{!sofactoapp__Factures_Client__c.sofactoapp__emetteur_facture__r.Name}" style="color:RGB(80,79,124);"/>If you cannot add for any reason the above mentioned extension, you can use this RGB Color Codes Chart.
b) Font size
In order to change the size of a font, you can add this style:
style="font-size:9px;"You can configure the font in px (Pixels) or in pt (Points). Please test the result, by opening a test PDF.
c) Number of decimals
For an amount:
<apex:outputText value=“{0, number, ###,###,###,###.00}“>
<apex:param value=“{!relatedTo.Amount__c}” />
</apex:outputText>For a percentage :
<apex:outputText value="{0, number, ###.00}%">
<apex:param value="{!relatedTo.Percentage__c}"/>
</apex:outputText>d) Other styles
Here you can find other text styles:
style="text-align:center;text-transform:uppercase;font-weight:bold"Text-align : left/ right/ center/ justify
Text-transform : uppercase/ lowercase/ capitalize
Font-weight : normal/ bold/ bolder/ lighter
e) Bullet points in front of a list
You can use this HTML code:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Note:
If you prefer another style, you can add those (disc/circle/square):
<ul style="list-style-type:disc">Styles on tables
a) Background colors
You can add this snippet for adding background colors
style="background:rgb(235,235,235)".
Here are the different possibilities:
<table style="background:rgb(235,235,235)"> | table | For coloring the whole table. |
<tr style="background:rgb(235,235,235)"> | tr = table row | For coloring a whole row. |
<th style="background:rgb(235,235,235)"> | th = table header | For coloring one cell of the table header. |
<td style="background:rgb(235,235,235)"> | td = table detail | For coloring one cell of the table body. |
Repeat in all <td> and the corresponding <th> of a column | For coloring a column of your table. |
Note: Styles on a higher level of the table overwrite the styles on a lower level, e.g. a style of a table row or styles applied on the whole overwrite the style of a table detail.
b) Table borders
You can use this snippet to change the style of table borders:
style="border:double"
Here are the different possibilities: none/hidden; dotted; dashed; double; solid.
Example:
<td style="border:double">
Reminder: Pay attention, on which level of the table you add the style (table/tr/th/td).
c) Fixed cell width
You can fix the cell width in relation to the other columns by using this snippet:
style="width:80%"
Example:
<td style="width:80%"> ... </td>
<td style="width:20%">... </td>If you want to give a fixed size to the cell, you can use pixel or points instead of the percentage:
style="width:30px"d) Condition on the number of lines of the main table
In order to count the invoice line items or the quotation line items, you have to initialize the variable rowNum before the <apex:repeat/>.
Here you can see the whole tag:
<apex:variable value="{!1}" var="rowNum"/>Before the end of the outputPanel </apex:outputPanel> and inside of the <apex:repeat/> you have to add the code that increments the variable:
<apex:variable var="rowNum" value="{!rowNum + 1}"/>Afterwards you can use this variable in a condition.
Exemple:
<apex:outputField value="{!sofactoapp__Factures_Client__c.Tampon__r.D_tail__c}" rendered="{!IF(rowNum<6,'','none')}" />Use case: This configuration can be useful, if you would like to display an element underneath the table, but you have to ensure that there is enough space. If the main table is too long, you element might not fit underneath, and you have to put it on the next page by using the condition on the number of the invoice/ quotation line items.
Change the CSS stylesheet
If you want to add other styles to the style sheet, that are maybe not considered by the packaged stylesheet, you can follow these steps:
Go to Setup > Custom Code > Static Resources
Click on INVOICE_STYLE
Click on View file
Copy the content of the style into any text editor
Add your CSS code
Save as .css
Create a new static resource and add the new file.
In you Visualforce page:
<!-- Styles -->
<apex:stylesheet value="{!URLFOR($Resource.INVOICE_STYLE)}" />You have to change the API name of the style sheet, by inserting the name that you gave to your static resource.
9. Save your Visualforce page.
Code Snippets
Here you can find some code snippets that you can adapt on your needs in a few clicks:
a) Conditions (rendered)
ISBLANK
In order to display a field according to the condition if this or another field is (not) filled out:
<apex:outputPanel rendered="{!NOT(ISBLANK(sofactoapp__Factures_Client__c.sofactoapp__Compte__r.BillingStreet))}">
...
</apex:outputPanel>
Note: Just add NOT if you want to check, that the filled is NOT blank.
ISNULL
Another option to check if a field is filled out:
<apex:outputField value='{!sofactoapp__Factures_Client__c.sofactoapp__Emetteur_facture__r.sofactoapp__TVA_intra__c}' rendered='{!not(ISNULL(sofactoapp__Factures_Client__c.sofactoapp__Emetteur_facture__c))}'/>
Test a boolean value
You can just use the boolean field in your condition, since it already gives back the value TRUE or FALSE. The field will be displayed if the condition is TRUE.
<apex:outputText value="{!sofactoapp__Factures_Client__c.sofactoapp__Reference__c}" rendered="{!sofactoapp__Factures_Client__c.sofactoapp__IsSent__c}"/>If you would like to display the field, if the boolean is FALSE, you have to use the prefix NOT(condition).
IF Statements
Here you can see, how you can apply an IF Statement to a condition :
<apex:outputPanel rendered="{!IF(sofactoapp__Factures_Client__c.sofactoapp__Montant_TVA_apres_remise__c !=0,’','none')}">Conditions in the CSS
You can apply conditions also within your style tags:
<span style="display:{!IF(NOT(ISNULL(sofactoapp__Offre__c.sofactoapp__Compte__r.National_ID_code__c)), '', 'none')}">
<br />
<apex:outputText value="{!$ObjectType.Account.Fields.National_ID_code__c.Label} :" rendered="{!NOT(ISNULL(sofactoapp__Offre__c.sofactoapp__Compte__r.National_ID_code__c))}
/>
<apex:outputField value="{!sofactoapp__Offre__c.sofactoapp__Compte__r.National_ID_code__c}" rendered="{!NOT(ISNULL(sofactoapp__Offre__c.sofactoapp__Compte__r.National_ID_code__c))}"
/>
</span>
Example of a condition: display the discount column in the main table
If you would like to display for example the Discount column only if there is actually a discount on the invoice/ quotation, you can use the check box Show Discount.
Use this condition in the style tag:
display:{!IF(sofactoapp__Factures_Client__c.sofactoapp__Afficher_remise__c, '', 'none')}">Example of the header of a Discount (%) column :
<th class="aligncenter" style="color:#464046;font-weight:normal;display:white-space:nowrap;display:{!IF(sofactoapp__Factures_Client__c.sofactoapp__Afficher_remise__c, '', 'none')}">
<b>{!$Label.Frisbii_Taux_Remise}</b>
</th>Example of the of a Discount (%) column :
<td class="alignright" style="white-space:nowrap;display:{!IF(sofactoapp__Factures_Client__c.sofactoapp__Afficher_remise__c, '', 'none')}">
<apex:outputField value="{!ligne.sofactoapp__Taux_de_remise_facture__c}" />
</td>b) Display an image saved in the static ressources
You can use this code to display an image that you saved in the static ressources:
<apex:image url="{!$Resource.testImage}" width="100" style="float:right"/>