Pour que vous puissiez créer facilement votre modèle, nous vous proposons de séparer votre code en 4 parties :

• La partie Style : Ici, vous insérez uniquement votre code CSS
• La partie Header : Cette partie correspond à l’entête de votre document
• La partie Body : Ici correspond au corps du document.
• La partie Footer : C’est le pied de page de votre document.

Afin de vous aider dans la création de votre modèle, voici l’ exemple d’un modèle existant sur Bill&Go.

Code dans le bloc  Style

/* reset */

*
{
    border: 0;
    box-sizing: content-box;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    list-style: none;
    margin: 0;
    padding: 0;
    text-decoration: none;
    vertical-align: top;
}

/* content editable */

*[contenteditable] { border-radius: 0.25em; min-width: 1em; outline: 0; }



/* heading */

h1 { font: bold 100% sans-serif; letter-spacing: 0.5em; text-align: center; text-transform: uppercase; }

/* table */

table { font-size: 75%; table-layout: fixed; width: 100%; }
table { border-collapse: separate; border-spacing: 2px; }
th, td { border-width: 1px; padding: 0.5em; position: relative; text-align: left; }
th, td { border-radius: 0.25em; border-style: solid; }
th { background: #EEE; border-color: #BBB; }
td { border-color: #DDD; }

/* page */

html { font: 16px/1 'Open Sans', sans-serif; overflow: auto; padding: 0.5in; }
html { background: #999; cursor: default; }

body { box-sizing: border-box; height: 11in; margin: 0 auto; overflow: hidden; padding: 0.5in; width: 8.5in; }
body { background: #FFF; border-radius: 1px; box-shadow: 0 0 1in -0.25in rgba(0, 0, 0, 0.5); }

/* header */

.header { margin: 0 0 3em; display: block}
.header:after { clear: both; content: ""; display: table; }

.header h1 { background: #000; border-radius: 0.25em; color: #FFF; margin: 0 0 1em; padding: 0.5em 0; }
.header .address { float: left; font-size: 75%; font-style: normal; line-height: 1.25; margin: 0 1em 1em 0;}
.header  p { margin: 0 0 0.25em; }
.header span, .header img { display: block; float: right; }
.header span { margin: 0 0 1em 1em; max-height: 25%; max-width: 60%; position: relative; }
.header img { max-height: 100%; max-width: 100%; }
.header input { cursor: pointer; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; }

/* article */

article, article .address, table.meta, table.inventory { margin: 0 0 3em;}
article:after { clear: both; content: ""; display: table; }
article h1 { clip: rect(0 0 0 0); position: absolute; }

article .address {  font-size: 125%; font-weight: bold;
}


.noborder, .noborder td {
    border: none!important
}

/* table meta & balance */

table.meta, table.balance { float: right; width: 36%; }
table.meta:after, table.balance:after { clear: both; content: ""; display: table; }

/* table meta */

table.meta th { width: 40%; }
table.meta td { width: 60%; }

/* table items */



table.inventory { clear: both; width: 100%; }
table.inventory th { font-weight: bold; text-align: center; }

table.inventory td:nth-child(1) { width: 26%; }
table.inventory td:nth-child(2) { width: 38%; }
table.inventory td:nth-child(3) { text-align: right; width: 12%; }
table.inventory td:nth-child(4) { text-align: right; width: 12%; }
table.inventory td:nth-child(5) { text-align: right; width: 12%; }

/* table balance */

table.balance th, table.balance td { width: 50%; }
table.balance td { text-align: right; }

table.balance {
    margin-left: 300pt;
    width: 100%;
}


/* aside */

aside h1 { border: none; border-width: 0 0 1px; margin: 0 0 1em; }
aside h1 { border-color: #999; border-bottom-style: solid; }

Code dans le bloc Header

<div class="header" >
    <h1>{{ docType }}</h1>

     <br>
     <table class="noborder">
     <tr>
     <td>

      <div class="address" style="float:right">
        <p>{{ selfCompanyName }}</p>
        <p>{{ selfCompanyAdress }} {{ selfCompanyZipCode }} {{ selfCompanyCity }}, {{ selfCompanyCountry }}</p>
        <p> {{ selfCompanyEmail }} - {{ selfCompanyTel }}</p>
        </td>
        <td style="text-align:right">
       <span ><img alt="" src="{{ selfCompanyLogo }}" width="120px" style="text-align:right"></span>
      </td>
    </div>
     <td>
     </tr>
     </table>

</div>

Code dans le bloc Body

<article>
    <br>
    <br>
    <table class="noborder">
        <tr>
            <td>
                <p class="address"><strong>{{ clientName }}<br>{{ clientAddress }}
                    <br/> {{ clientZipCode }} {{ clientCity }} <br/> {{ clientCountry }}
            </strong>
                </p>
            </td>
            <td class="meta" style="text-align: right">
                <p>{{ docType }}  : {{ docNumber }}</p>
               <p>Date : {{ sentDate }}</p>

            </td>
        </tr>
    </table>

    <br>
    <br>
    <table class="inventory">
        <thead>
        <tr>
            <th><span >Nom</span></th>
            <th><span >Description</span></th>
            <th><span >Prix unitaire</span></th>
            <th><span >Quantity</span></th>
            <th><span >Total</span></th>
        </tr>
        </thead>
        <tbody>
        {% for one in lines %}

            <tr>
                <td><span >{{ one.getName()  }}</span></td>
                <td>{{ one.getDescription() }}</td>
                <td class="cost"><span data-prefix="">€</span><span > {{ one.getPrice()  }}</span></td>
                <td align="center">{{ one.getQuantity() }}</td>
                <td class="cost" colspan="2"><span data-prefix="">€</span><span> {{ one.getQuantity() * one.getPrice() }}</span></td>
            </tr>

        {% endfor %}
    </table>
    <table class="balance">
        <tbody><tr>
            <th><span>Total hors taxes</span></th>
            <td><span data-prefix="">€</span><span> {{ totalHT }}</span></td>
        </tr>
        <tr>
            <th><span >Taxes ({{ tax }})</span></th>
            <td><span data-prefix="">€</span><span> {{ taxtotal }}</span></td>
        </tr>
        <tr>
            <th><span>Total toutes taxes comprises</span></th>
            <td><span data-prefix="">€</span><span> {{ totalHT + taxtotal }}</span></td>
        </tr>
        </tbody></table>
</article>
<aside>
    <h1><span >Informations</span></h1>
    <div >
        {% if document.isEstimate()  %}
            {% if user.getBanque() is not null and user.getIban() is not  null and user.getBic() is not  null %}
                <div style="text-align: left"><strong>Coordonnées bancaires : </strong><br> NOM BANQUE : {{ user.getBanque() }} <br> IBAN : {{ user.getIban() }}<br>BIC : {{ user.getBic() }}</div><br />
            {% endif %}
        {% endif %}
    </div>

</aside>

Code dans le bloc Footer

<p style="text-align:center">Page {PAGENO} of {nb}</p>

Si vous avez des difficultés a créer votre modèle, n’hésitez pas à nous contacter par le formulaire de contact

Accéder au formulaire de contact