Udskriv Hent som pdf

Tilpasning af layouts med CSS-styling

Teknisk guide

Opdateret den 28. oktober 2025

Denne guide beskriver hvordan man med CSS kan opsætte layout for en faktura eller andre typer dokumenter til kunder. Det kan f.eks. være ændring af skrifttyper, tekstformuleringer, farver m.m. Det er muligt at styre om ændringer sker på et layout i henhold til typen og sprog. Brug af CSS forudsætter teknisk viden om HTML og CSS.

Guiden beskriver følgende områder:

Generelt om CSS
Opsætning af CSS i regnskab
Dokumenttyper
Sprog
Elementklasser
Konkrete eksempler
HTML-kilder for dokumenter

Generelt om CSS

Vi har valgt at give adgang til opsætning af dokumenter rettet mod kunder ved hjælp af CSS styling. Du kan læse mere om CSS og hvordan det generelt bruges her:

W3Schools CSS Tutorial

Opsætning af CSS i regnskab

Du kan opsætte CSS i forbindelse med visning af en kladde af en faktura. Du trykker her knappen Indstillinger for layout:

På siden VIS / SEND for en fakturakladde trykkes knappen Indstillinger for layout

Her indsætter du din CSS i feltet her:

Herefter er den indsatte kode for CSS-styling aktiveret og gælder for nye kladder for og bogføringer af dokumenter.

Dokumenttyper

CSS-styling kan målrettes følgende dokumenttyper:

Dokumenttype	CSS selector
Faktura	.invoice
Kreditnota	.credit-note
Rykker 1-3	.reminder

Eksempel:

<style>
  .credit-note { color: red; } /* farver alt tekst i en kreditnota rød */
</style>

Sprog

CSS-styling kan målrettes følgende sprog:

Sprog	CSS selector
Dansk	:lang(da)
Engelsk	:lang(en)
Svensk	:lang(sv)
Norsk	:lang(no)
Tysk	:lang(de)
Spansk	:lang(es)
Italiensk	:lang(it)
Fransk	:lang(fr)

Eksempel:

<style>
  /* farver alt tekst i dokumenter med fransk og engelsk sprog grønt */
  :lang(fr), :lang(en) { color: green; }
</style>

Elementklasser

Vi har sat vores egne relevante klasser ind på HTML-elementer i dokumenterne. Her er en oversigt over de klasser, som kan målrettes:

Beskrivelse	CSS selector
Firmalogo	.logo
Alle faste tekster (labels)	.lab
Alle værdier	.val
Alle beløb	.amount
Alle datoer	.date
Alle tekster	.text
Alle adresseblokke	.address
Modtagerblok	.recipient
Afsenderblok	.sender
CVR-nummer / endepunkt	.company-registration-number
Navn på kontaktperson	.contact-name
Telefon	.telephone
Navn	.party-name
Blok for postadresse	.postal-address
Vej og husnummer	.street-name
Stednavn	.street-name-additional
Postnummer og by	.postal-zone-city
Land	.country
Dokumenttype	.document-type
Blok med dokumentinfo	.info
Kundenummer	.customer-no
Købers ordrenummer / rekvisition	.order-reference-id
Dokumentnummer	.voucher-number
Dokumentdato	.issue-date
Betalingsdato	.payment-due-date
Bankens navn	.bank-account-name
Bank registrerings- og kontonummer	.bank-account-number
Blok med linjer	.invoice-lines
Blok for overskifter for linjer	.lines-head
Kolonne for varenummer	.item-id
Kolonne for beskrivelse	.item-name
Kolonne for antal	.quantity
Kolonne for stykpris	.price
Kolonne for linjepris	.amount
Blok for totaler	.totals
Subtotal	.subtotal
Linje med total	.total-line
Total	.total
Linje med moms	.tax-line
Momsprocent	.percent
Momsgrundlag	.taxable-amount
Momsbeløb	.tax-amount
Valutabetegnelse	.currency
Note til modtager	.note
Fælles indbetalingskort (FIK) 71, 73 og 75	.fik
Giro	.giro
Blok for MobilePay	.mobile-pay

Eksempel:

<style>
  .amount { font-style: italic } /* lav alle beløb kursiv */
</style>

Konkrete eksempler

Centrering af firmalogo i toppen af siden:

<style>
  .logo { text-align: center; }
  .logo img { display: inline-block; float: none; }
</style>

Lav firmalogo i toppen af siden 50% større:

<style>
  .logo img { max-height: 150px; } /* 150 % af 100px = 150px */
</style>

Benyt en Google font:

<style>
  @import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One&display=swap');
  body { font-family: "Julius Sans One","Helvetica Neue","Open Sans",sans-serif; }
</style>

Gå til oversigt over Google fonte

Lav tekst i dokument større generelt:

<style>
  body { font-size: 130%; }
</style>

Fjern dansk bankkonto og MobilePay fra udenlandske sprog:

<style>
  .bank-account-name, .bank-account-number, .mobile-pay { display: none }
  :lang(da) {
    .bank-account-name, .bank-account-number, .mobile-pay { display: block }
  }
</style>

Skift label for "Tlf:" til "Mobil:" på dokumenter med dansk sprog:

<style>
  :lang(da) {
    .lab.telephone::after { content: 'Mobil:'; }
  }
</style>

Fjern kolonnen med Varenr fra linjer:

<style>
  .lines .item-id { font-size: 0; width: 0px; padding: 0; margin: 0; border: 0px; }
</style>

HTML-kilde for dokument

Her er et eksempel på en HTML-kilde for et faktura dokument. Her fremgår strukturen i dokumenterne, med henblik på yderligere tilpasning af CSS selectors og styling:

<html lang="da">
<head includebootstrap="no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Document</title>
</head>
<body class="invoice">
<table>
    <tbody>
    <tr class="addresses">
        <td class="address recipient">
            <div class="text val party-name">FAKTURASERVICE A/S</div>
            <div class="postal-address">
                <div>
                    <span class="text val street-name">Gunnar Clausens Vej 24B, 1. tv</span>
                </div>
                <div/>
                <div/>
                <div>
                    <span class="text val postal-zone-city">8260 Viby J</span>
                </div>
                <div/>
                <div/>
            </div>
            <br>
            <span class="lab company-registration-number"/>
            <span class="text val company-registration-number">DK29633932</span>
        </td>
        <td class="address sender">
            <div class="text val party-name">ONLINEREGNSKAB A/S</div>
            <div class="postal-address">
                <div>
                    <span class="text val street-name">Gunnar Clausens Vej 24B, 1. tv</span>
                </div>
                <div>
                    <span class="text val street-name-additional">A</span>
                </div>
                <div/>
                <div>
                    <span class="text val postal-zone-city">8260 Viby J</span>
                </div>
                <div/>
                <div/>
            </div>
            <br>
            <span class="lab company-registration-number"/>
            <span class="text val company-registration-number">DK29633932</span>
            <br>
            <span class="lab telephone"/>
            <span class="text val telephone">70 23 56 68</span>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div class="headline">
                <span class="lab document-type"/>
            </div>
        </td>
    </tr>
    <tr class="info">
        <td>
            <div>
                <span class="lab customer-no"/>
                <span class="text val customer-no">1234</span>
            </div>
            <div>
                <span class="lab order-reference-id"/>
                <span class="text val order-reference-id">4786</span>
            </div>
        </td>
        <td>
            <div>
                <span class="lab voucher-number"/>
                <span class="text val voucher-number">14</span>
            </div>
            <div>
                <span class="lab issue-date"/>
                <span class="date val issue-date">27.10.2025</span>
            </div>
            <div>
                <span class="lab payment-due-date"/>
                <span class="date val payment-due-date">10.11.2025</span>
            </div>
            <div>
                <div class="text val bank-account-name">Demobank</div>
                <span class="text val bank-account-number">0000-0000000000</span>
            </div>
        </td>
    </tr>
    </tbody>
</table>
<div class="invoice-lines">
    <table class="lines">
        <thead>
        <tr class="heading lines-head">
            <th class="text-left th item-id"/>
            <th class="text-left th item-name"/>
            <th class="text-right th quantity"/>
            <th class="text-right th price"/>
            <th class="text-right th amount"/>
        </tr>
        </thead>
        <tbody>
        <tr class="line">
            <td class="text-left text td item-id">1</td>
            <td class="text-left text td item-name">Stol</td>
            <td class="text-right text td quantity">4 stk</td>
            <td class="text-right amount td price">350,00</td>
            <td class="text-right amount td amount">1.400,00</td>
        </tr>
        </tbody>
        <tfoot class="totals">
        <tr>
            <td colspan="4" class="lab subtotal"/>
            <td colspan="2" class="amount val subtotal">1.400,00</td>
        </tr>
        <tr class="tax-line">
            <td colspan="4" class="lab tax">
                <span class="lab category"/>
                <span class="text sub-val percent">25</span>
                <span class="lab percent-of"/>
                <span class="amount sub-val taxable-amount">1.400,00:</span>
            </td>
            <td class="amount val tax-amount">350,00</td>
        </tr>
        <tr class="total-line">
            <td colspan="4">
                <span class="lab total"/>
                <span class="text sub-val currency">DKK:</span>
            </td>
            <td class="amount val total">1.750,00</td>
        </tr>
        </tfoot>
    </table>
</div>
<div class="text val note">Tak for handelen!</div>
</body>
</html>

Standard CSS for dokumenter:

<style>
    body                                    { font-family: "Helvetica Neue","Open Sans",sans-serif; color: #333; font-size: 12px; line-height: 1.4; padding: 2px; margin: 0 }
    table                                   { width: 100%; border-collapse: collapse; }
    td, th                                  { vertical-align: top; text-align: left; }
    td.amount, th.amount, td.price, th.price, td.quantity, th.quantity, td.address.sender, .totals td, .headline, .info td:last-child
                                            { text-align: right; }
    div:has(.bank-account-name), div:has(.iban), div:has(.fik)
                                            { margin-top: 10px; }
    .headline                               { margin-top: 30px; font-weight: 500; font-size: 32px; }
    .postal-address                         { margin-bottom: 10px; }
    .lines                                  { margin-top: 30px; margin-bottom: 30px; }
    .total-line                             { font-weight: bold; font-size: 16px; }
    .lines td, .lines th                    { padding: 7px;}
    .lines th                               { background-color: #eee; }
    .logo img                               { max-height: 100px; float: right; margin-bottom: 20px; }
    .lab                                    { padding-right: 4px; }
    .headline .lab                          { padding-right: 0px; }
    @media print                            { @page { size: 210mm 297mm; } tfoot { display: table-row-group; } }

    .invoice .headline .lab.document-type::after { content: 'Invoice'}
    .credit-note .headline .lab.document-type::after { content: 'Credit note'}
    .reminder .headline .lab.document-type::after { content: 'Reminder '}
    .application-response .headline .lab.document-type::after { content: 'Application response'}
    .headline .lab.copy-indicator::after { content: ' - Copy'}

    .lab.company-registration-number::after { content: 'VAT No:'; }
    .lab.fik::after { content: 'Danish FIK:'; }
    .lab.giro::after { content: 'Danish GIRO:'; }
    .lab.voucher-number::after { content: 'No:'; }
    .lab.customer-no::after { content: 'Customer no:'; }
    .lab.contact-name::after { content: 'Contact:'; }
    .lab.telephone::after { content: 'Tel:'; }
    .lab.postbox::after { content: 'Postbox:'; }
    .lab.department::after { content: 'Department:'; }
    .lab.order-reference-id::after { content: 'Buyer order ref.id.:'; }
    .lab.sales-order-id::after { content: 'Seller order ref.id.:'; }
    .lab.issue-date::after { content: 'Date:'; }
    .lab.payment-due-date::after { content: 'Due date:'; }
    .lab.iban::after { content: 'IBAN:'; }
    .lab.swift::after { content: 'SWIFT:'; }
    .lab.subtotal::after { content: 'Subtotal:'; }
    .tax .lab.category::after { content: 'VAT,'; }
    .tax .lab.percent-of::after { content: '% of'; }
    .total-line .lab.total::after { content: 'Total'; }

    .reminder .lab.not-reg-pay::after { content: 'No payment has been registered for the invoice with number:'; }
    .reminder .lab.pay-now::after { content: 'The amount including fee is therefore requested to be paid immediately using the payment information below.'; }
    .reminder .lab.fee-is-calc::after { content: 'A reminder fee has been calculated for this reminder letter. This fee is included in the amount below for payment.'; }

    .th.item-id::after { content: 'Article no'; }
    .th.item-date::after { content: 'Date'; }
    .th.item-name::after { content: 'Description'; }
    .th.quantity::after { content: 'Quantity'; }
    .th.price::after { content: 'Unit price'; }
    .th.amount::after { content: 'Amount'; }

    :lang(da) {
        .invoice .headline .lab.document-type::after { content: 'Faktura'}
        .credit-note .headline .lab.document-type::after { content: 'Kreditnota'}
        .reminder .headline .lab.document-type::after { content: 'Rykker '}
        .application-response .headline .lab.document-type::after { content: 'Applikationsmeddelse'}
        .headline .lab.copy-indicator::after { content: ' - Kopi'}

        .lab.company-registration-number::after { content: 'CVR:'; }
        .lab.fik::after { content: 'Indbetalingskort (FIK):'; }
        .lab.giro::after { content: 'Indbetalingskort (GIRO):'; }
        .lab.voucher-number::after { content: 'Nr:';}
        .lab.customer-no::after { content: 'Kundenr:'; }
        .lab.contact-name::after { content: 'Deres ref:'; }
        .lab.telephone::after { content: 'Tlf:'; }
        .lab.postbox::after { content: 'Postboks:'; }
        .lab.department::after { content: 'Afdeling:'; }
        .lab.order-reference-id::after { content: 'Købers ordrenr:'; }
        .lab.sales-order-id::after { content: 'Sælgers ordrenr:'; }
        .lab.issue-date::after { content: 'Dato:'; }
        .lab.payment-due-date::after { content: 'Forfald:'; }
        .lab.iban::after { content: 'IBAN:'; }
        .lab.swift::after { content: 'SWIFT:'; }
        .lab.subtotal::after { content: 'Subtotal:'; }
        .tax .lab.category::after { content: 'Moms,'; }
        .tax .lab.percent-of::after { content: '% af'; }
        .total-line .lab.total::after { content: 'Total'; }

        .reminder .lab.not-reg-pay::after { content: 'Der er ikke registreret betaling for faktura med nummer:'; }
        .reminder .lab.pay-now::after { content: 'Beløbet inklusive gebyr bedes derfor indbetalt omgående ved brug af nedenstående betalingsoplysninger.'; }
        .reminder .lab.fee-is-calc::after { content: 'Der er beregnet et rykkergebyr for denne rykkerskrivelse. Dette gebyr er indregnet i nedenstående beløb til betaling.'; }

        .th.item-id::after { content: 'Varenr'; }
        .th.item-date::after { content: 'Dato'; }
        .th.item-name::after { content: 'Beskrivelse'; }
        .th.quantity::after { content: 'Antal'; }
        .th.price::after { content: 'Pris'; }
        .th.amount::after { content: 'Beløb'; }
    }
</style>

Vi er klar til at hjælpe

Nye kunder skal have en god start hos os og vi sidder derfor klar til at hjælpe på mail og telefon i kundeservice. Så tøv endelig ikke med at kontakte os og benytte os af vores viden og erfaringer.

Navn	Domæne	Type	Udløb	Bekrivelse
cookieAccept	.onlineregnskab.dk/	Første part	365 dage	Anvendes til at huske tiltigere valg af cookiesamtykke på siden.
plyr	onlineregnskab.dk/	Første part	Aldrig	Denne cookie bruges af Plyr-videoafspilleren til at gemme information om lydstyrke og hastighed, så afspilleren husker dette ved efterfølgende afspilning af videoer på siden.
cache-sprite-plyr	onlineregnskab.dk/	Første part	Aldrig	Denne cookie bruges af Plyr-videoafspilleren til at cache ikoner og grafiske elementer, så afspilleren kan indlæses hurtigere ved efterfølgende besøg.

Navn	Domæne	Type	Udløb	Beskrivelse
_ga_*	.onlineregnskab.dk/	Første part	1 år 1 måned 4 dage	Google Analytics sætter denne cookie for at gemme og tælle sidevisninger.
_ga	.onlineregnskab.dk/	Første part	1 år 1 måned 4 dage	_ga-cookien, installeret af Google Analytics, beregner besøgs-, sessions- og kampagnedata og holder også styr på brugen af webstedet til analyseformål. Cookien gemmer oplysninger anonymt og tildeler et tilfældigt genereret nummer for at genkende unikke besøgende.
_gcl_au	.onlineregnskab.dk/	Første part	3 måneder	Google Tag Manager sætter denne cookie for at teste effektiviteten af annoncering på websteder, der bruger deres tjenester.
_gcl_ls	onlineregnskab.dk/	Første part	Aldrig	Denne lokale lagringsnøgle bruges af Google Ads til at gemme klikdata (GCLID) for at måle og optimere annoncekonverteringer. Data gemmes lokalt i browseren og udløber ikke automatisk.
ref	onlineregnskab.dk/	Første part	Session	Intern reference til brug for oprettelse af nyt regnskab.

Onlineregnskab

Kontakt

Info

Teknisk guide

Tilpasning af layouts
med CSS-styling

Tilpasning af layouts med CSS-styling

Teknisk guide

Generelt om CSS

Opsætning af CSS i regnskab

Dokumenttyper

Sprog

Elementklasser

Konkrete eksempler

HTML-kilde for dokument

Vi er klar til at hjælpe

Teknisk guide

Tilpasning af layoutsmed CSS-styling

Tilpasning af layouts med CSS-styling

Teknisk guide

Generelt om CSS

Opsætning af CSS i regnskab

Dokumenttyper

Sprog

Elementklasser

Konkrete eksempler

HTML-kilde for dokument

Vi er klar til at hjælpe

Denne side benytter cookies

Nødvendige cookies:

Statistiske cookies:

Om cookies

Udgiver

Log ind

Glemt adgangskode?

Skift adgangskode

Ny bruger

Den leverede ydelse

Betaling

Betaling pr. faktura

Betaling med automatisk træk på kort

Prøveperiode

Kundens pligter

Immaterielle Rettigheder

Ansvarsbegrænsning

Force Majeure

Backup

Begrænsninger for brug

Opsigelse

Opbevaring og udlevering af data

Ændring af forretningsbetingelser og priser

Privatlivspolitik

Indsamling af oplysninger

Brug af personoplysninger

Deling af personoplysninger

Datasikkerhed

Dine rettigheder

Opdateringer til denne politik

Tilpasning af layouts
med CSS-styling