Wie ändere ich ein Layout mit CSS?

Mit InformerOnline kannst du das Layout deiner Rechnungen und Angebote ebenfalls anpassen, indem du die Option "Custom CSS" verwendest. Diese Option findest du unter Einstellungen -> Verkauf -> Layout Editor. Danach wählst du zwischen "Rechnung" und "Angebot". In beiden Fällen kannst du oben in der Leiste auf "Custom CSS" klicken.

Hinweis: Die Verwendung von benutzerdefiniertem CSS wird nur für Benutzer empfohlen, die Erfahrung im Umgang mit CSS haben. Außerdem kann die PDF-Datei von dem Beispiel abweichen, das bei der Erstellung des CSS angezeigt wurde.

Was ist CSS?

Mit CSS kannst du das Layout und Design einer Internetseite durch einen Code kreieren und verändern. Das bedeutet, dass du aus einem Stylesheet nicht nur die Farbe und Schriftart des Textes, sondern z.B. auch das Layout, die Gestaltung und die Präsentation deines Layouts bestimmen kannst. Weitere Informationen über CSS findest du unter w3schools.com.

HTML-Struktur des Layouts

Unten findest du die HTML-Struktur, die zum Aufbau des Layouts verwendet wird. Daraus kannst du ersehen, welche Details du über CSS anpassen kannst.

<div class="document"> 
   <div class="document-header"> 
      <div class="document-recipient"> 
         Sales BV<br> 
         Verkoopstraat 28<br> 
         3456 AJ Willemstad 
      </div> 
      <div class="document-logo"><img src="logo.jpg" class="logo"></div> 
      <div class="document-sender"> 
           Informer Software BV<br> 
           Laan van Zuid Hoorn 60<br> 
           2289 DE Rijswijk<br> 
           info@informer.nl<br> 
           BTW nr.: NL807182072B01<br> 
           KvK nr.: 27155153</div> 
   </div> 
   <div class="document-details"> 
      <div class="document-information"> 
         <h1 class="document-title">Factuur</h1> 
         <div class="document-information-details"> 
            <div class="document-number"> 
               <div class="label">Factuurnummer:</div> 
               <div class="value">20150010</div> 
            </div> 
            <div class="document-date"> 
               <div class="label">Factuurdatum:</div> 
               <div class="value">23-03-2015</div> 
            </div> 
            <div class="document-expiry-date"> 
               <div class="label">Vervaldatum:</div> 
               <div class="value">23-03-2015</div> 
            </div> 
            <div class="document-reference"> 
               <div class="label">Referentie:</div> 
               <div class="value">Geen referentie</div> 
            </div> 
        </div> 
     </div> 
     <div class="document-details-lines"> 
        <table> 
           <thead> 
              <tr> 
                 <td width="80"><span>Aantal</span></td> 
                 <td><span>Omschrijving</span></td> 
                 <td width="90" align="right"><span>Prijs</span></td> 
                 <td width="110" align="right"><span>Korting</span>(%)</td> 
                 <td width="90" align="right"><span>Totaal</span></td> 
                 <td width="80" align="right" class="tax"><span>BTW</span></td> 
              </tr> 
           </thead> 
           <tbody> 
              <tr> 
                 <td>1</td> 
                 <td>Factuur regel 1</td> 
                 <td align="right">50,00</td> 
                 <td align="right">0.00</td> 
                 <td align="right">50,00</td> 
                 <td align="right">21.00</td> 
              </tr> 
              <tr> 
                 <td>1</td> 
                 <td>Factuur regel 2</td> 
                 <td align="right">50,00</td> 
                 <td align="right">0.00</td> 
                 <td align="right">50,00</td> 
                 <td align="right">21.00</td> 
              </tr> 
           </tbody> 
        </table> 
        <div class="subtotals"> 
           <div class="subtotals-discount"> 
              <div class="title">Korting</div> 
              <div class="amount">€ 10,00</div> 
           </div> 
           
           <div class="subtotals-subtotal"> 
              <div class="title bold">Subtotaal</div> 
              <div class="amount">€ 10,00</div> 
           </div> 

           <div class="subtotals-vat"> 
              <div class="title">BTW over € 50,00</div> 
              <div class="amount">€ 3,00</div> 
              <div class="title">BTW over € 50,00</div> 
              <div class="amount">€ 10,05</div> 
           </div> 

           <div class="subtotals-total"> 
              <div class="title bold">Totaal</div> 
              <div class="amount bold">€ 113,00</div> 
           </div> 
        </div> 
        <div class="clear"></div> 
     </div>
   </div> 
   <div class="document-comment"> 
      <p>Factuur opmerking</p> 
   </div> 
   <div class="document-footer"> 
      <p>We verzoeken u vriendelijk het bovenstaande bedrag van € 2.662,10 voor 02-01-2013 te voldoen en op onze bankrekening onder vermelding van het factuurnummer 20130010.</p> 
   </div>
</div>

In der obigen HTML-Struktur siehst du die Klasse "Dokument", innerhalb dieser Klasse befindet sich das gesamte Layout.

Wenn du die Textfarbe des gesamten Layouts ändern möchtest, kannst du das folgende CSS-Layout verwenden.

.document { 
color: #999; 
}

Wenn du den Rabatt von einem Dokument löschen möchtest, kannst du das folgende CSS-Layout verwenden. 

.subtotals-discount { 
display: none; 
}

Wenn du einen Briefkopf mit einem Bild oder einer Information in ein Dokument einfügen möchtest, kannst du das folgende CSS-Layout verwenden um das Layout nach unten zu verschieben.

.document { 
padding-left: 100px; 
}