---
title: "Header and footer"
slug: "modèle-doffre-en-tête-et-pied-de-page"
updated: 2025-11-17T14:08:40Z
published: 2026-01-07T10:04:05Z
canonical: "help.frisbii.com/modèle-doffre-en-tête-et-pied-de-page"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.frisbii.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Header and footer

Now that Linda knows how to set up a custom Quotation template, she wants to understand her Quotation template. She starts reading the Visualforce page she just got from GitHub. At some point, she asks Vijay, their Salesforce developer, to explain the code.

![visualforceimage.png](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/e2441538-b4e5-447b-bbc9-912cc2b36ad9?sv=2026-02-06&spr=https&st=2026-10-28T01%3A36%3A11Z&se=2026-10-28T02%3A36%3A11Z&sr=c&sp=r&sig=4JLC8wgTv4%2FfYZypje6sRIUp3B9vfwYKsonslpG8okw%3D)

## Header - StandardController

```xml
 <apex:page standardController="sofactoapp__Offre__c" extensions="sofactoapp.OffreProcessingControllerExtension"
renderAs="pdf"
showHeader="false"
sidebar="false"
language="{!sofactoapp__Offre__c.sofactoapp__Langue__c}">
```

<editor360-custom-block data-preprocessing="true" data-sanitizationtags="b"><p><u><b>Important: </b></u>it is a good idea to copy code between an invoice template and a Quotation template, as there are some parts like the addresses that are the same (or almost).</p></editor360-custom-block>

1. Think about changing the controller:

```xml
<apex:outputText value="{!sofactoapp__Offre__c.sofactoapp__Compte__r.BillingStreet}" />
```

```xml
<apex:outputText value="{!sofactoapp__Factures_Client__c.sofactoapp__Compte__r.BillingStreet}" />
```

1. The relationship fields do not necessarily have the same name:

```xml
<apex:outputText value="{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.Name}"/>
```

```xml
<apex:outputText value="{!sofactoapp__Factures_Client__c.sofactoapp__emetteur_facture__r.Name}"/>
```

Both fields retrieve the name of the Corporate Name.

## Header - Language

The header of the Quotation page also contains by default the snippet that translates the template:

`language="{!sofactoapp__Offre__c.sofactoapp__Langue__c}" &nbsp;`

Linda can see that the language is selected from the Quotation. She can also select the language from:

1. the corporate name

`{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Langue__c}`

1. the accounting data

`{!sofactoapp__Offre__c.sofactoapp__Donnee_Comptable__r.sofactoapp__Langue__c}`

Reminder: In general, only the parts for which there are translations in Salesforce will be translated.

This includes:

- Labels for Frisbii object fields (FR / EN)
- [Custom labels](https://help.salesforce.com/articleView?id=cl_about.htm&amp;type=5) set up by you, if you have set up a translation.

What is not included:

- Hardcoded text in the Visualforce page
- Untranslated custom labels
- Data entered into Frisbii / Salesforce by the user

## Footer

The footer is divided into four columns:

![](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/image-TM1PT8FR.png?sv=2026-02-06&spr=https&st=2026-10-28T01%3A36%3A11Z&se=2026-10-28T02%3A36%3A11Z&sr=c&sp=r&sig=4JLC8wgTv4%2FfYZypje6sRIUp3B9vfwYKsonslpG8okw%3D) The information is to be filled in on your Corporate Name.

### Your company details

In the first column you will find :

- The name of the company
- The street
- Postal code
- City
- Country

This is how it looks in the code:

```xml
<!--Coordonnées de votre entreprise/ Your company's adress--> 
<td style="width:30%">  
<apex:outputPanel>  
<apex:outputtext value="{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.Name}" style="text-transform:uppercase;color:#696969;font-size:10px"/>
<apex:outputtext value="{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Rue__c}"/>
<apex:outputtext value="{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Code_postal__c}"/>
<apex:outputtext value="{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Ville__c}"/>
<apex:outputtext value="{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Pays__c}"/>
</apex:outputPanel></td>
```

### Contact of your company

The second column contains the contact information of the Company:

- Phone number
- Fax number
- Email address
- Website

This is how it looks in the code:

```xml
<!--Contact de votre entreprise/ Your companies contact infos--> 

<td class="borderOn" style="border-left:0.2px solid black;border-right:0.2px solid black;border-top:hidden;border-bottom:hidden;width:30%"> 
<apex:outputPanel> 
<apex:outputtext value="T : {!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__T_l_phone__c}" rendered="{!NOT(ISBLANK(sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__T_l_phone__c))}"/><br/>
<apex:outputtext value="F : {!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__T_l_copie__c}" rendered="{!NOT(ISBLANK(sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__T_l_copie__c))}"/><br/>
<apex:outputtext value="{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Email__c}"><br/>
<apex:outputtext value="{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__website__c}"/>
</apex:outputpanel>
</td>
```

### Legal notice

Here is the information in the third column:

- Legal form
- Share capital
- City RCS (french corporate name)
- SIREN (french corporate name)
- APE code (french corporate name)
- Intra-community VAT (european corporate name)

This is how it looks in the code:

```xml
<!--Mentions légales/ Legal notice--> 

<td class="borderOn" style="border-left:hidden;border-right:0.2px solid black;border-top:hidden;border-bottom:hidden;width:30%"> 
<apex:outputPanel> 
<apex:outputtext value="{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Forme_juridique__c}{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Capital_social__c}{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.<b>sofactoapp__Ville_RCS__c}"><br/>
<apex:outputtext value="{!$ObjectType.sofactoapp__Raison_Sociale__c.Fields.sofactoapp__SIREN__c.Label} : {!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__SIREN__c}"/><br/>
<apex:outputtext value="{!$ObjectType.sofactoapp__Raison_Sociale__c.Fields.sofactoapp__APE__c.Label} : {!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__APE__c}"/> <br/>
<apex:outputtext value="{!$ObjectType.sofactoapp__Raison_Sociale__c.Fields.sofactoapp__TVA_intra__c.Label} : {!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__TVA_intra__c}"/><br/>
</apex:outputPanel>
</td>
```

### Page number

Let's look at the fourth column in more detail where we display the page:

```xml
<td style="width:10%" class="alignright">
<apex:outputText value="{!$Label.Sofacto_Page}"/>&nbsp;
<span class="pagenumber" />/ <span class="pagecount" />
</td>
```

We can use the pagenumber and pagecount classes, as both are defined in the stylesheet :

```xml
<!-- Styles -->
<apex:stylesheet value="{!URLFOR($Resource.QUOTATION_STYLE')}" />
```

Here is how this CSS code is specified in the stylesheet:

```xml
.pagenumber:before {content: counter(page);}
.pagecount:before {content: counter(pages);}
```

<editor360-custom-block data-preprocessing="true" data-sanitizationtags="b"><p><br>Linda is surprised because the Visualforce page starts with the footer. "It's the world upside down" she thinks. Vijay explains to her that the display is managed by the <span style="font-family:Courier New,Courier,monospace;"><b>styleClass="footer_center small".</b></span></p></editor360-custom-block>

Even though the code for this part is at the top of the Visualforce page, the information specified in the **apex:outputPanel** tag ensures that the footer appears at the bottom of the Quotation page.

<editor360-custom-block data-preprocessing="true" data-sanitizationtags="apex:outputpanel"><p><span style="font-family:Courier New,Courier,monospace;"><apex:outputpanel id="panelHeaderFooter"></apex:outputpanel><b="">styleClass="footer_center small" layout="block"&gt;</b=""></span></p></editor360-custom-block>