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 risikere 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 i blankettens XML
CSS'en indsættes i en xh:style knude i toppen af XML'en som illustreret nedenfor
Herfra kan du gå i gang med at indsætte alt det CSS du har lyst til. Du kan læse mere om syntaksen og brugen af CSS her https://www.w3schools.com/css/
For at stylingen kun påføres PDF'en, så skal CSS'en placeres inde i et @page område som illustreret nedenfor
@page {
* {
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
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;
}
|
Tips og tricks
!important: Selvom brugen af "!important" inden for CSS-styling normalt betragtes som bad practise, så 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
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 "*/"