...
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
| Code Block |
|---|
@page |
|---|
| @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;
}
} |
|
...
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
| Code Block |
|---|
|
@page {
size: A4;
margin: 2.5cm;
} |
Skjul header, footer og padding
| Code Block |
|---|
| /* 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
| Code Block |
|---|
| .xforms-label {
font-weight: 700;
} |
|
Skriftstørrelse på diverse tekster
| Code Block |
|---|
| /* 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
| Code Block |
|---|
| .fr-grid {
margin: 0;
padding: 0;
}
.fr-grid-tr .xforms-control {
padding-bottom: 28px;
} |
|
Skjult ikke-valgte radio buttons og tjekbokse
| Code Block |
|---|
| .xforms-deselected {
display: none !important;
} |
|
Links (til sort farve og fjernet understregning - kan bruges uafhængigt)
| Code Block |
|---|
| .orbeon a[href]:link,
.orbeon a[href]:visited {
color: #000000 !important;
text-decoration: none !important;
} |
|
...
!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 "*/"