Nærværende dokument beskriver de overordnede muligheder for, hvordan man som blanketdesigner har mulighed for at tilføre custom styling til PDF-udgaverne af sine blanketter, samt giver en række eksempler på konkrete style-muligheder

Bemærk: Custom styling på blanketniveau er ikke supporteret af Blanketmotorteamet og nye versioner af Blanketmotoren og Orbeon kan risikerer at ødelægge designet

Sådan gør du

Det er i Orbeon muligt at indføre custom styling på de enkelte blanketter ved at indsætte styling directe direkte i blankettens XML

...

CSS'en indsættes i en xh:style knude i toppen af XML'en som illustreret nedenfor

...

For at stylingen kun påføres PDF'en, så skal CSS'en placeres inde i et @page et @media print område som illustreret nedenfor

@media print {
	* {
		font-family: "IBMPlexSans", "system", sans-serif !important;
	}
    .orbeon .xforms-output-output:empty {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }
    .navbar-inner .container img {
        display: block !important;
    }
}

Konkrete eksempler

Nedenfor ses en række konkrete eksempler lavet hos Erhvervsstyrelsen ifm. projektet med at lave ansøgningsskemaer til Covid-19 hjælpepakkerne.

Eksemplerne blev oprindeligt lavet i hast og den oprindelige mening bag de enkelte selectors kan derfor potentielt være gået tabt og bør primært bruges som inspiration

Generelt sidelayout

@page {
    size: A4;
    margin: 2.5cm;
}

Skjul header, footer og padding

/* Skjul footeren */
@bottom-center {
	content: '' !important;
    display: none !important;
}
@top-center {
    content: '' !important;
    display: none !important;
}
@top-center {
    border: none !important;
}
@top-right {
    border: none !important;
}
@bottom-center {
    border: none !important;
}
@bottom-right {
    border: none !important;
}
@bottom-left {
    border: none !important;
}

padding-top: 0;
padding-bottom: 0;

Gør labels fede

.xforms-label {
	font-weight: 700;
}

Skriftstørrelse på diverse tekster

/* Større skriftstørrelse på blankettitel */
.orbeon #xforms-form:not([target*="fb-test-iframe"]):not([action*="/blanketdesigner/orbeon/fr/orbeon/builder/"]) .fr-header-title div {
	font-size: 25px !important;
    margin-bottom: 10px !important;
    overflow: visible !important;
    font-weight: 700;
}
/* Control værdier */
.orbeon .xforms-field,
.orbeon .xforms-output.xforms-output-appearance-minimal output[role=textbox],
.orbeon .xforms-output.xforms-static output {
	font-size: 14px;
	border: none;
}
/* Brødtekst */
.orbeon .fr-grid .xforms-static.xforms-readonly.xforms-textarea pre,
.orbeon .fr-grid .xforms-static.xforms-readonly.xforms-output.xforms-mediatype-text-html {
	font-size: 14px;
}
/* Default (labels) */
.orbeon {
	font-size: 15px;
}
.fr-section-title .xforms-output-output {
	font-weight: 700;

	
h1 .xforms-output-output {

	font-weight: bold;
}

Mere spacing mellem grids i PDF

.fr-grid {
	margin: 0;
	padding: 0;
}
.fr-grid-tr .xforms-control {
	padding-bottom: 28px;
}

Skjult ikke-valgte radio buttons og tjekbokse

.xforms-deselected {
	 display: none !important;
}

Links (til sort farve og fjernet understregning - kan bruges uafhængigt)

.orbeon a[href]:link,
.orbeon a[href]:visited {
    color: #000000 !important;
    text-decoration: none !important;
}

Tips og tricks

1. !important: Selvom brugen af "!important" inden for CSS-styling normalt betragtes som bad practise,

...

1. kan det i et helt konkret tilfælde som her med styling af en PDF være et effektivt redskab til at få ting igennem uden at skulle lave alt for kringlede CSS-selectors

2. Kommentarer: Brug kommentarer for de enkelte dele af din CSS for at huske, hvad formålet med de enkelte dele er. Kommentarer er tekst placeret mellem et "/*" og et "*/"