Skip to Content

Wijzigen voor document Huisstijl

Laatst gewijzigd door Jeeves de Butler op 07-10-2026 01:56
Van versie 5.1
gewijzigd door Jeeves de Butler
op 05-10-2026 01:21
Opmerking bij wijziging: Er is geen opmerking bij deze versie
Naar versie 22.1
gewijzigd door Jeeves de Butler
op 05-10-2026 07:36
Opmerking bij wijziging: Er is geen opmerking bij deze versie

Samenvatting

Details

Paginaeigenschappen
Inhoud
... ... @@ -1,4 +1,4 @@
1 -Huisstijl van de Wardenburg Kennisbank. Het object //StyleSheetExtension// op deze pagina wordt op elke pagina geladen.
1 +Huisstijl van de Wardenburg Kennisbank. Het object //StyleSheetExtension// op deze pagina (de opmaak) en het object //JavaScriptExtension// (kaartenraster voor tegeltabellen, alleen presentatie) worden op elke pagina geladen.
2 2  
3 3  Kleuren en lettertypen staan in het kleurthema [[Wardenburg>>doc:FlamingoThemes.Wardenburg]]. Zie het [[register van eigen aanpassingen>>doc:Wardenburg.Code.WebHome]].
4 4  
XWiki.StyleSheetExtension[0]
Code
... ... @@ -109,10 +109,11 @@
109 109  
110 110  /* ---------- Infovak rechts (wbrechts) ---------- */
111 111  
112 +/* Groeit mee met de inhoudskolom: op een laptop als voorheen, op brede schermen ruimer voor de afbeelding */
112 112  .floatinginfobox.wbrechts {
113 - width: 30%;
114 - min-width: 260px;
115 - max-width: 340px;
114 + width: 26%;
115 + min-width: 280px;
116 + max-width: 460px;
116 116   margin: 0 0 16px 28px;
117 117   padding: 14px;
118 118   border: 1px solid #e8eaed;
... ... @@ -128,9 +128,10 @@
128 128   text-align: center;
129 129   margin-bottom: 12px;
130 130  }
132 +/* Nooit groter dan het origineel, zodat logo's klein en scherp blijven */
131 131  .wbrb img {
132 132   max-width: 100%;
133 - max-height: 150px;
135 + max-height: 280px;
134 134   width: auto;
135 135   height: auto;
136 136   border-radius: 10px;
... ... @@ -249,6 +249,11 @@
249 249   color: #80868b;
250 250   font-variant-numeric: tabular-nums;
251 251  }
254 +/* Koppen die zelf al genummerd zijn ("2.1 Mogelijkheden"): het script zet deze class, dan geen tweede nummer */
255 +#xwikicontent ul.wikitoc.wb-toc-eigen-nummers li > .wikilink::before,
256 +#xwikicontent ul.wikitoc.wb-toc-eigen-nummers ul li > .wikilink::before {
257 + content: none;
258 +}
252 252  #xwikicontent ul.wikitoc > li:not(.nodirectchild),
253 253  #xwikicontent ul.wikitoc > li.nodirectchild > ul > li {
254 254   margin-top: 10px;
... ... @@ -660,7 +660,7 @@
660 660   min-width: 0;
661 661   margin: 0 0 20px;
662 662   display: grid;
663 - grid-template-columns: 150px minmax(0, 1fr);
670 + grid-template-columns: 220px minmax(0, 1fr);
664 664   column-gap: 18px;
665 665   align-items: start;
666 666   }
... ... @@ -669,7 +669,7 @@
669 669   margin: 0;
670 670   }
671 671   .floatinginfobox.wbrechts > .wbrb img {
672 - max-height: 120px;
679 + max-height: 170px;
673 673   }
674 674   .floatinginfobox.wbrechts > *:not(.wbrb) {
675 675   grid-column: 2;
... ... @@ -686,6 +686,219 @@
686 686   }
687 687  }
688 688  
696 +/* ---------- Paginakop: titel en knoppen naast elkaar ---------- */
697 +
698 +@media (min-width: 992px) {
699 + #mainContentArea > .document-header {
700 + display: flex;
701 + align-items: flex-start;
702 + gap: 16px;
703 + }
704 + #mainContentArea > .document-header::before,
705 + #mainContentArea > .document-header::after {
706 + content: none;
707 + }
708 + #mainContentArea > .document-header > .document-info {
709 + flex: 1 1 auto;
710 + width: auto;
711 + min-width: 0;
712 + }
713 + #mainContentArea > .document-header > .document-menu {
714 + flex: 0 0 auto;
715 + width: auto;
716 + }
717 + #mainContentArea > .document-header #contentmenu {
718 + float: none;
719 + display: flex;
720 + flex-wrap: nowrap;
721 + }
722 +}
723 +
724 +/* ---------- Tegels (vgmtabel) als kaarten ---------- */
725 +
726 +/* Het script huisstijl.js zet een tegeltabel om in een kaartenraster en verbergt de tabel. */
727 +#xwikicontent table.vgmtabel.wb-vervangen {
728 + display: none !important;
729 +}
730 +.wb-kaarten {
731 + display: grid;
732 + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
733 + gap: 18px;
734 + margin: 14px 0 30px;
735 + clear: none;
736 +}
737 +#body #xwikicontent a.wb-kaart,
738 +.wb-kaart {
739 + display: flex;
740 + flex-direction: column;
741 + overflow: hidden;
742 + border: 1px solid #e8eaed;
743 + border-radius: 12px;
744 + background: #ffffff;
745 + color: #202124;
746 + text-decoration: none;
747 + transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
748 +}
749 +#body #xwikicontent a.wb-kaart:hover,
750 +#body #xwikicontent a.wb-kaart:focus {
751 + border-color: #ffb447;
752 + box-shadow: 0 4px 14px rgba(31, 35, 40, .10);
753 + transform: translateY(-2px);
754 + color: #202124;
755 +}
756 +.wb-kaart-beeld {
757 + display: block;
758 + position: relative;
759 + aspect-ratio: 16 / 10;
760 + overflow: hidden;
761 + background: #f1f3f4;
762 +}
763 +.wb-kaart-beeld img {
764 + display: block;
765 + width: 100% !important;
766 + height: 100% !important;
767 + max-width: none;
768 + object-fit: cover;
769 + transition: transform .25s ease;
770 +}
771 +.wb-kaart:hover .wb-kaart-beeld img {
772 + transform: scale(1.03);
773 +}
774 +/* Geen of verdwenen afbeelding: het script zet er een boekpictogram in (geen backslash-codes in deze CSS:
775 + de CSS-verkleiner van XWiki breekt die, en dan valt de rest van het bestand weg). */
776 +.wb-kaart-icoon {
777 + position: absolute;
778 + top: 50%;
779 + left: 50%;
780 + transform: translate(-50%, -50%);
781 + font-size: 34px;
782 + color: #b86e00;
783 + opacity: .5;
784 +}
785 +.wb-kaart-titel {
786 + padding: 10px 14px 12px;
787 + font-size: 15px;
788 + font-weight: 500;
789 + line-height: 1.35;
790 +}
791 +/* Grote schermen: grote kaarten, foto's in hun oorspronkelijke 3:2-verhouding */
792 +@media (min-width: 1200px) {
793 + .wb-kaarten {
794 + grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
795 + gap: 26px;
796 + }
797 + .wb-kaart-beeld {
798 + aspect-ratio: 3 / 2;
799 + }
800 + .wb-kaart-titel {
801 + padding: 14px 18px 16px;
802 + font-size: 17px;
803 + }
804 +}
805 +@media (min-width: 1800px) {
806 + .wb-kaarten {
807 + grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
808 + }
809 +}
810 +
811 +/* Zonder script: de tabel past in elk geval binnen het scherm */
812 +#xwikicontent table.vgmtabel {
813 + width: 100% !important;
814 + max-width: 100%;
815 + table-layout: fixed;
816 +}
817 +#xwikicontent table.vgmtabel th,
818 +#xwikicontent table.vgmtabel td {
819 + width: auto !important;
820 + position: static !important;
821 + top: auto !important;
822 + padding: 6px;
823 +}
824 +#xwikicontent table.vgmtabel img {
825 + width: 100% !important;
826 + height: auto !important;
827 + aspect-ratio: 16 / 10;
828 + object-fit: cover;
829 + border-radius: 10px;
830 +}
831 +
832 +/* ---------- Handboeken: geplakte Word-opmaak volgt de huisstijl ---------- */
833 +
834 +html[data-xwiki-space^="Main.Handboeken"] #xwikicontent [style*="font-family"] {
835 + font-family: inherit !important;
836 +}
837 +html[data-xwiki-space^="Main.Handboeken"] #xwikicontent [style*="font-size"] {
838 + font-size: inherit !important;
839 +}
840 +html[data-xwiki-space^="Main.Handboeken"] #xwikicontent [style*="line-height"] {
841 + line-height: inherit !important;
842 +}
843 +html[data-xwiki-space^="Main.Handboeken"] #xwikicontent table:not(.vgmtabel) {
844 + font-size: 14px;
845 +}
846 +html[data-xwiki-space^="Main.Handboeken"] #xwikicontent table [style*="text-indent"] {
847 + text-indent: 0 !important;
848 +}
849 +
850 +/* ---------- Overzicht van onderliggende pagina's (startpagina van een onderdeel) ---------- */
851 +
852 +.wb-overzicht {
853 + list-style: none;
854 + display: grid;
855 + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
856 + gap: 10px;
857 + margin: 14px 0 28px;
858 + padding: 0;
859 +}
860 +.wb-overzicht li {
861 + margin: 0;
862 +}
863 +#body #xwikicontent .wb-overzicht a {
864 + display: flex;
865 + align-items: center;
866 + gap: 12px;
867 + height: 100%;
868 + padding: 12px 14px;
869 + border: 1px solid #e8eaed;
870 + border-radius: 10px;
871 + background: #ffffff;
872 + color: #202124;
873 + text-decoration: none;
874 + transition: border-color .15s ease, box-shadow .15s ease;
875 +}
876 +#body #xwikicontent .wb-overzicht a:hover,
877 +#body #xwikicontent .wb-overzicht a:focus {
878 + border-color: #ffb447;
879 + box-shadow: 0 2px 10px rgba(31, 35, 40, .08);
880 +}
881 +.wb-overzicht-icoon {
882 + flex: none;
883 + width: 36px;
884 + height: 36px;
885 + display: flex;
886 + align-items: center;
887 + justify-content: center;
888 + border-radius: 50%;
889 + background: #ffefd5;
890 + color: #b86e00;
891 + font-size: 16px;
892 + text-align: center;
893 +}
894 +.wb-overzicht strong {
895 + display: block;
896 + font-weight: 500;
897 + line-height: 1.3;
898 +}
899 +.wb-overzicht small {
900 + display: block;
901 + margin-top: 2px;
902 + font-size: 13px;
903 + color: #5f6368;
904 +}
905 +.wb-overzicht-leeg {
906 + color: #5f6368;
907 +}
908 +
689 689  /* ---------- Telefoon ---------- */
690 690  
691 691  @media (max-width: 767px) {
... ... @@ -697,7 +697,7 @@
697 697   margin: 0 0 16px;
698 698   }
699 699   .wbrb img {
700 - max-height: 110px;
920 + max-height: 200px;
701 701   }
702 702   #xwikicontent table:not(.wbinfotab table) {
703 703   display: block;
... ... @@ -713,6 +713,14 @@
713 713   #contentmenu .btn-label {
714 714   display: none;
715 715   }
936 + .wb-kaarten {
937 + grid-template-columns: repeat(2, minmax(0, 1fr));
938 + gap: 10px;
939 + }
940 + .wb-kaart-titel {
941 + padding: 8px 10px 10px;
942 + font-size: 13.5px;
943 + }
716 716   #xwikicontent #actionBox ul {
717 717   flex-wrap: nowrap;
718 718   overflow-x: auto;
... ... @@ -724,3 +724,35 @@
724 724   }
725 725  }
726 726  
955 +/* Overzichtstabellen (livetable): woorden heel laten, lange adressen afkappen met ...; bij aanwijzen het volledige adres */
956 +#xwikicontent table.xwiki-livetable {
957 + font-size: 14px;
958 +}
959 +#xwikicontent .xwiki-livetable-display-header th,
960 +#xwikicontent .xwiki-livetable-display-body td {
961 + padding: 6px 7px;
962 +}
963 +#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td {
964 + word-break: normal;
965 + overflow-wrap: break-word;
966 + hyphens: manual;
967 +}
968 +#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td.URL,
969 +#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td.DOWNLOADURL {
970 + max-width: 140px;
971 + white-space: nowrap;
972 + overflow: hidden;
973 + text-overflow: ellipsis;
974 +}
975 +#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td.URL:hover,
976 +#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td.DOWNLOADURL:hover {
977 + white-space: normal;
978 + overflow-wrap: anywhere;
979 +}
980 +/* Een brede overzichtstabel blijft binnen de pagina en schuift zo nodig opzij */
981 +#xwikicontent table.xwiki-livetable {
982 + display: block;
983 + max-width: 100%;
984 + overflow-x: auto;
985 +}
986 +
XWiki.JavaScriptExtension[0]
cache
... ... @@ -1,0 +1,1 @@
1 +long
code
... ... @@ -1,0 +1,195 @@
1 +/* Wardenburg Kennisbank; presentatie van tegeltabellen (class "vgmtabel").
2 + Een tegeltabel is een rij met titels (kopcellen) met daaronder een rij met afbeeldingen die naar een pagina linken.
3 + Dit script toont dezelfde titels, afbeeldingen en links als een rustig kaartenraster. De pagina zelf verandert niet:
4 + de tabel blijft in de pagina staan en wordt alleen verborgen. Werkt alleen in de leesweergave. */
5 +(function () {
6 + 'use strict';
7 +
8 + function cellen(rij) {
9 + return rij ? Array.prototype.slice.call(rij.cells) : [];
10 + }
11 +
12 + function isKopRij(rij) {
13 + var c = cellen(rij);
14 + return c.length > 0 && c.every(function (cel) { return cel.tagName === 'TH'; });
15 + }
16 +
17 + function kaartenUitTabel(tabel) {
18 + var rijen = Array.prototype.slice.call(tabel.rows);
19 + var kaarten = [];
20 + for (var i = 0; i < rijen.length; i++) {
21 + var kop = rijen[i];
22 + if (!isKopRij(kop)) {
23 + continue;
24 + }
25 + var beeldRij = rijen[i + 1] && !isKopRij(rijen[i + 1]) ? rijen[i + 1] : null;
26 + var beeldCellen = cellen(beeldRij);
27 + cellen(kop).forEach(function (th, j) {
28 + var td = beeldCellen[j] || null;
29 + var titel = (th.textContent || '').replace(/\s+/g, ' ').trim();
30 + var img = (td && td.querySelector('img')) || th.querySelector('img');
31 + var link = (td && td.querySelector('a[href]')) || th.querySelector('a[href]');
32 + if (!titel && !img) {
33 + return;
34 + }
35 + kaarten.push({ titel: titel || (img && img.getAttribute('alt')) || '', img: img, link: link });
36 + });
37 + if (beeldRij) {
38 + i++;
39 + }
40 + }
41 + return kaarten;
42 + }
43 +
44 + // Adres van de oorspronkelijke afbeelding: zonder de width- en height-parameters waarmee XWiki verkleint.
45 + function origineel(src) {
46 + try {
47 + var url = new URL(src, window.location.href);
48 + url.searchParams.delete('width');
49 + url.searchParams.delete('height');
50 + return url.toString();
51 + } catch (e) {
52 + return src;
53 + }
54 + }
55 +
56 + function zetIcoon(beeld) {
57 + beeld.classList.add('wb-kaart-geenbeeld');
58 + var icoon = document.createElement('span');
59 + icoon.className = 'fa fa-book wb-kaart-icoon';
60 + icoon.setAttribute('aria-hidden', 'true');
61 + beeld.appendChild(icoon);
62 + }
63 +
64 + function maakKaart(k) {
65 + var kaart = document.createElement(k.link ? 'a' : 'div');
66 + kaart.className = 'wb-kaart';
67 + if (k.link) {
68 + kaart.setAttribute('href', k.link.getAttribute('href'));
69 + if (k.link.getAttribute('target')) {
70 + kaart.setAttribute('target', k.link.getAttribute('target'));
71 + kaart.setAttribute('rel', 'noopener');
72 + }
73 + }
74 + var beeld = document.createElement('span');
75 + beeld.className = 'wb-kaart-beeld';
76 + if (k.img) {
77 + var img = document.createElement('img');
78 + // Het origineel laden in plaats van de door XWiki verkleinde versie (?width=…&height=…), zodat grote kaarten scherp zijn.
79 + img.src = origineel(k.img.currentSrc || k.img.src);
80 + img.alt = '';
81 + img.loading = 'lazy';
82 + img.decoding = 'async';
83 + var geenBeeld = function () {
84 + img.remove();
85 + zetIcoon(beeld);
86 + };
87 + img.addEventListener('error', geenBeeld);
88 + // Sommige externe sites geven bij een verdwenen afbeelding een leeg plaatje in plaats van een fout.
89 + img.addEventListener('load', function () {
90 + if (!img.naturalWidth || img.naturalWidth < 4) {
91 + geenBeeld();
92 + }
93 + });
94 + beeld.appendChild(img);
95 + } else {
96 + zetIcoon(beeld);
97 + }
98 + var titel = document.createElement('span');
99 + titel.className = 'wb-kaart-titel';
100 + titel.textContent = k.titel;
101 + kaart.appendChild(beeld);
102 + kaart.appendChild(titel);
103 + return kaart;
104 + }
105 +
106 + function verwerk(tabel) {
107 + if (tabel.classList.contains('wb-vervangen')) {
108 + return;
109 + }
110 + var kaarten = kaartenUitTabel(tabel);
111 + if (!kaarten.length) {
112 + return;
113 + }
114 + var raster = document.createElement('div');
115 + raster.className = 'wb-kaarten';
116 + kaarten.forEach(function (k) { raster.appendChild(maakKaart(k)); });
117 + tabel.parentNode.insertBefore(raster, tabel.nextSibling);
118 + tabel.classList.add('wb-vervangen');
119 + }
120 +
121 + function start() {
122 + var actie = (window.XWiki && window.XWiki.contextaction) || 'view';
123 + if (actie !== 'view') {
124 + return;
125 + }
126 + var tabellen = document.querySelectorAll('#xwikicontent table.vgmtabel');
127 + Array.prototype.forEach.call(tabellen, function (tabel) {
128 + try { verwerk(tabel); } catch (e) { /* bij een fout blijft de tabel gewoon zichtbaar */ }
129 + });
130 + Array.prototype.forEach.call(document.querySelectorAll('#xwikicontent ul.wikitoc'), eigenNummering);
131 + Array.prototype.forEach.call(document.querySelectorAll('#xwikicontent .wbrb img'), scherpInfovak);
132 + }
133 +
134 + // Infovak: het origineel tonen in plaats van de kleine XWiki-verkleining, zodat de afbeelding op een breed scherm scherp blijft.
135 + // Bij een fout terug naar de verkleining. Het oude adres blijft bewaard voor herstel().
136 + function scherpInfovak(img) {
137 + var src = img.getAttribute('src') || '';
138 + if (img.hasAttribute('data-wb-src') || !/[?&](width|height)=/.test(src)) {
139 + return;
140 + }
141 + var groot = origineel(src);
142 + if (groot === src) {
143 + return;
144 + }
145 + img.setAttribute('data-wb-src', src);
146 + img.addEventListener('error', function terug() {
147 + img.removeEventListener('error', terug);
148 + img.setAttribute('src', src);
149 + });
150 + img.removeAttribute('srcset');
151 + img.setAttribute('src', groot);
152 + }
153 +
154 + // Inhoudsopgave: staan de nummers al in de koppen ("2.1 Mogelijkheden"), dan geen tweede nummering ervoor.
155 + // Beslist per inhoudsopgave, zodat die in zijn geheel genummerd of ongenummerd is.
156 + function eigenNummering(toc) {
157 + var links = toc.querySelectorAll('a');
158 + if (!links.length) {
159 + return;
160 + }
161 + var genummerd = 0;
162 + Array.prototype.forEach.call(links, function (a) {
163 + if (/^\s*\d+(\.\d+)*\.?\s/.test(a.textContent || '')) {
164 + genummerd++;
165 + }
166 + });
167 + if (genummerd / links.length >= 0.6) {
168 + toc.classList.add('wb-toc-eigen-nummers');
169 + }
170 + }
171 +
172 + // Bij wijzigen op de pagina zelf: eerst de oorspronkelijke tabel terug, zodat de editor nooit de kaarten ziet.
173 + function herstel() {
174 + Array.prototype.forEach.call(document.querySelectorAll('#xwikicontent .wb-kaarten'), function (r) { r.remove(); });
175 + Array.prototype.forEach.call(document.querySelectorAll('#xwikicontent table.wb-vervangen'), function (t) { t.classList.remove('wb-vervangen'); });
176 + Array.prototype.forEach.call(document.querySelectorAll('#xwikicontent .wbrb img[data-wb-src]'), function (img) {
177 + img.setAttribute('src', img.getAttribute('data-wb-src'));
178 + img.removeAttribute('data-wb-src');
179 + });
180 + }
181 +
182 + if (typeof window.require === 'function') {
183 + window.require(['jquery'], function ($) {
184 + $(document).on('xwiki:actions:edit', herstel);
185 + $(document).on('xwiki:actions:view', function () { setTimeout(start, 0); });
186 + });
187 + }
188 +
189 + if (document.readyState === 'loading') {
190 + document.addEventListener('DOMContentLoaded', start);
191 + } else {
192 + start();
193 + }
194 +})();
195 +
name
... ... @@ -1,0 +1,1 @@
1 +Wardenburg tegels als kaarten
parse
... ... @@ -1,0 +1,1 @@
1 +Nee
use
... ... @@ -1,0 +1,1 @@
1 +always