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 des Textes, sondern z.B. auch das Layout, die Gestaltung und die Präsentation deines Layouts bestimmen kannst. Unten findest du die HTML-Struktur unseres Layouts damit du weißt was du am Layout verändern kannst. 

Hinweis: Nur beim Standardlayout ist die volle Flexibilität möglich. Bei den Vorlagen von Informer sind viele Elemente fixiert und können nicht einfach angepasst werden. Gewisse Elemente sind allerdings auch bei den Vorlagen anpassbar. Dies gilt es bei Wunsch zu testen.

Einige oft benötigte CSS codes um dein Layout anzupassen:

Wenn du die Textfarbe des gesamten Layouts ändern möchtest, kannst du den folgenden CSS-code 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 das Lieferdatum entfernen möchtest, kannst du den folgenden CSS-Code verwenden. 

#template-document-delivery-date { display:none !important; }

Wenn du das Layout etwas nach rechts verschieben möchtest um dein layout besser einem Briefpapier anzupassen, dann kannst du folgenden CSS-Code verwenden.

.document { 
padding-left: 100px; 
}

Elemente wie z.B. Rechnungsnummer, Rechnungsdatum, Fälligkeitsdatum, Referenz nach rechts verschieben.

.document-information-details .custom-fontsize { padding-left: 420px; }

Wenn du ein eigenes Briefpapier verwendest und deine Firmen-Infos nicht mehr im Rechnungskopf benötigst, kannst du deine Firmen-Infos mit folgendem CSS-Code entfernen:

.document-sender { display:none;}

Wenn du von Template 4 und 8 das Feld "Firmenbuch Nr:" im Rechnungsfuß entfernen möchtest, dann kannst du folgenden CSS-Code wählen.

.footer-address .coc-number { display:none; }

Wenn du ein Element wie zum Beispiel "Rechnung" verbergen möchtest, dann wähle folgenden CSS-Code:

.document-title { display:none; }

Wenn die "Rechnungsnummer" verbergen möchtest, dann wähle folgenden CSS-Code:

.document-number { display:none;}

Wenn das "Fälligkeitsdatum" verbergen möchtest, dann wähle folgenden CSS-Code:

.document-expiry-date { display:none;}

Wenn die "Referenz" verbergen möchtest, dann wähle folgenden CSS-Code:

.document-reference { display:none;}

Wenn du die Zwischensumme und/oder den Mwst. Prozentsatz verbergen möchtest da du eventuell keine MwSt. in Rechnung stellst:

.subtotals-vat { display:none; }
.subtotals-subtotal { display:none; }

Wenn du den Zeilanabstand vergrößern möchtest, wähle folgenden CSS-Code:

.document-information-details { line-height: 40px; }

Wenn du den Breite der Kunden Kontaktdaten/Adresszeile verkleinern möchtest, wähle folgenden CSS-Code:

.customer-info-area { width: 200px; }

Wenn du den Abstand zur Fußzeile vergrößern möchtest, dann wähle folgenden CSS-Code:

.document-footer { margin-top: 50px; }

Wenn du den Abstand zwischen den einzelnen Rechnungspositionen/Rechnungszeilen vergrößern möchtest, dann wähle folgenden CSS-Code:

tbody td {
padding: 15px 7px;
}

Wenn du den Abstand zwischen "Rechnung" zu den darunterliegenden Informationen vergrößern möchtest, dann wähle folgenden CSS-Code:

.document-title { padding-bottom: 50px; }

Wenn du die Textfarbe ändern willst, dann wähle z.B. folgenden CSS-Code (In diesem Beispiel wird die Überschrift "Rechnung" gesetzt:

.document-title { color: blue }

Wenn du die Farbe der Begriffe Rechnungsnummer, Fälligkeitsdatum, Referenz, usw. ändern möchtest, dann wäre es z.B. folgender Code:

.document-information-details .field-label { color: blue }

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"> 
         Muster GmbH<br> 
         Musterstraße 1<br> 
         1010 Wien 
      </div> 
      <div class="document-logo"><img src="logo.jpg" class="logo"></div> 
      <div class="document-sender"> 
           Informer Online Buchhaltung GmbH<br> 
           Praterstraße 1<br> 
           1020 Wien<br> 
           info@informer.eu<br> 
           UID Nr.: ATU72726179<br> 
           Firmenbuch Nr.: FN 479891 Y</div> 
   </div> 
   <div class="document-details"> 
      <div class="document-information"> 
         <h1 class="document-title">Rechnung</h1> 
         <div class="document-information-details"> 
            <div class="document-number"> 
               <div class="label">Rechnungsnummer:</div> 
               <div class="value">20210010</div> 
            </div> 
            <div class="document-date"> 
               <div class="label">Rechnungsdatum:</div> 
               <div class="value">23-03-2021</div> 
            </div> 
            <div class="document-expiry-date"> 
               <div class="label">Fälligkeitsdatum:</div> 
               <div class="value">23-04-2021</div> 
            </div> 
            <div class="document-reference"> 
               <div class="label">Referenz:</div> 
               <div class="value">Keine Referenz</div> 
            </div> 
        </div> 
     </div> 
     <div class="document-details-lines"> 
        <table> 
           <thead> 
              <tr> 
                 <td width="80"><span>Anzahl</span></td> 
                 <td><span>Beschreibung</span></td> 
                 <td width="90" align="right"><span>Preis</span></td> 
                 <td width="110" align="right"><span>Rabatt</span>(%)</td> 
                 <td width="90" align="right"><span>Gesamtbetrag</span></td> 
                 <td width="80" align="right" class="tax"><span>MwSt.</span></td> 
              </tr> 
           </thead> 
           <tbody> 
              <tr> 
                 <td>1</td> 
                 <td>Rechnungszeile 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>Rechnungszeile 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">Rabatt</div> 
              <div class="amount">€ 10,00</div> 
           </div> 
           
           <div class="subtotals-subtotal"> 
              <div class="title bold">Zwischensumme</div> 
              <div class="amount">€ 10,00</div> 
           </div> 

           <div class="subtotals-vat"> 
              <div class="title">MwSt. von € 50,00</div> 
              <div class="amount">€ 3,00</div> 
              <div class="title">MwSt. von € 50,00</div> 
              <div class="amount">€ 10,05</div> 
           </div> 

           <div class="subtotals-total"> 
              <div class="title bold">Gesamtbetrag</div> 
              <div class="amount bold">€ 113,00</div> 
           </div> 
        </div> 
        <div class="clear"></div> 
     </div>
   </div> 
   <div class="document-comment"> 
      <p>Bemerkung</p> 
   </div> 
   <div class="document-footer"> 
      <p>Wir bitten Sie höflichst, den obenstehenden Betrag von € 121,00 vor 02.01.2021 auf unser Bankkonto unter Angabe der Rechnungsnummer 2020-0022 zu überweisen.</p> 
   </div>
</div>