3 <html lang=
"en" class=
"no-js">
7 <meta name=
"viewport" content=
"width=device-width,initial-scale=1">
12 <link rel=
"shortcut icon" href=
"../../../assets/default.favicon.ico">
13 <meta name=
"generator" content=
"mkdocs-1.1.2, mkdocs-material-7.0.5">
17 <title>CSS - WoltLab Suite Documentation
</title>
21 <link rel=
"stylesheet" href=
"../../../assets/stylesheets/main.77f3fd56.min.css">
24 <link rel=
"stylesheet" href=
"../../../assets/stylesheets/palette.7fa14f5b.min.css">
28 <meta name=
"theme-color" content=
"#009485">
37 <link rel=
"stylesheet" href=
"../../../stylesheets/extra.css">
51 <body dir=
"ltr" data-md-color-scheme=
"" data-md-color-primary=
"teal" data-md-color-accent=
"">
55 <input class=
"md-toggle" data-md-toggle=
"drawer" type=
"checkbox" id=
"__drawer" autocomplete=
"off">
56 <input class=
"md-toggle" data-md-toggle=
"search" type=
"checkbox" id=
"__search" autocomplete=
"off">
57 <label class=
"md-overlay" for=
"__drawer"></label>
58 <div data-md-component=
"skip">
61 <a href=
"#migrating-from-wsc-30-css" class=
"md-skip">
66 <div data-md-component=
"announce">
68 <aside class=
"md-announce">
69 <div class=
"md-announce__inner md-grid md-typeset">
71 <a href=
"https://www.woltlab.com">Back to
<strong>woltlab.com
</strong></a>
80 <header class=
"md-header" data-md-component=
"header">
81 <nav class=
"md-header__inner md-grid" aria-label=
"Header">
82 <a href=
"../../.." title=
"WoltLab Suite Documentation" class=
"md-header__button md-logo" aria-label=
"WoltLab Suite Documentation">
84 <img src=
"../../../assets/logo.png" alt=
"logo">
87 <label class=
"md-header__button md-icon" for=
"__drawer">
88 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 24 24"><path d=
"M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
90 <div class=
"md-header__title" data-md-component=
"header-title">
91 <div class=
"md-header__ellipsis">
92 <div class=
"md-header__topic">
93 <span class=
"md-ellipsis">
94 WoltLab Suite Documentation
97 <div class=
"md-header__topic" data-md-component=
"header-topic">
98 <span class=
"md-ellipsis">
106 <div class=
"md-header__options">
110 <label class=
"md-header__button md-icon" for=
"__search">
111 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 24 24"><path d=
"M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
114 <div class=
"md-search" data-md-component=
"search" role=
"dialog">
115 <label class=
"md-search__overlay" for=
"__search"></label>
116 <div class=
"md-search__inner" role=
"search">
117 <form class=
"md-search__form" name=
"search">
118 <input type=
"text" class=
"md-search__input" name=
"query" aria-label=
"Search" placeholder=
"Search" autocapitalize=
"off" autocorrect=
"off" autocomplete=
"off" spellcheck=
"false" data-md-component=
"search-query" data-md-state=
"active" required
>
119 <label class=
"md-search__icon md-icon" for=
"__search">
120 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 24 24"><path d=
"M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
121 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 24 24"><path d=
"M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
123 <button type=
"reset" class=
"md-search__icon md-icon" aria-label=
"Clear" tabindex=
"-1">
124 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 24 24"><path d=
"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
127 <div class=
"md-search__output">
128 <div class=
"md-search__scrollwrap" data-md-scrollfix
>
129 <div class=
"md-search-result" data-md-component=
"search-result">
130 <div class=
"md-search-result__meta">
133 <ol class=
"md-search-result__list"></ol>
144 <div class=
"md-container" data-md-component=
"container">
149 <main class=
"md-main" data-md-component=
"main">
150 <div class=
"md-main__inner md-grid">
154 <div class=
"md-sidebar md-sidebar--primary" data-md-component=
"sidebar" data-md-type=
"navigation" >
155 <div class=
"md-sidebar__scrollwrap">
156 <div class=
"md-sidebar__inner">
162 <nav class=
"md-nav md-nav--primary" aria-label=
"Navigation" data-md-level=
"0">
163 <label class=
"md-nav__title" for=
"__drawer">
164 <a href=
"../../.." title=
"WoltLab Suite Documentation" class=
"md-nav__button md-logo" aria-label=
"WoltLab Suite Documentation">
166 <img src=
"../../../assets/logo.png" alt=
"logo">
169 WoltLab Suite Documentation
172 <ul class=
"md-nav__list" data-md-scrollfix
>
181 <li class=
"md-nav__item">
182 <a href=
"../../../getting-started/" class=
"md-nav__link">
197 <li class=
"md-nav__item md-nav__item--nested">
200 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_2" type=
"checkbox" id=
"__nav_2" >
202 <label class=
"md-nav__link" for=
"__nav_2">
204 <span class=
"md-nav__icon md-icon"></span>
206 <nav class=
"md-nav" aria-label=
"PHP API" data-md-level=
"1">
207 <label class=
"md-nav__title" for=
"__nav_2">
208 <span class=
"md-nav__icon md-icon"></span>
211 <ul class=
"md-nav__list" data-md-scrollfix
>
217 <li class=
"md-nav__item">
218 <a href=
"../../../php/pages/" class=
"md-nav__link">
229 <li class=
"md-nav__item">
230 <a href=
"../../../php/database-objects/" class=
"md-nav__link">
241 <li class=
"md-nav__item">
242 <a href=
"../../../php/database-access/" class=
"md-nav__link">
253 <li class=
"md-nav__item">
254 <a href=
"../../../php/exceptions/" class=
"md-nav__link">
266 <li class=
"md-nav__item md-nav__item--nested">
269 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_2_5" type=
"checkbox" id=
"__nav_2_5" >
271 <label class=
"md-nav__link" for=
"__nav_2_5">
273 <span class=
"md-nav__icon md-icon"></span>
275 <nav class=
"md-nav" aria-label=
"API" data-md-level=
"2">
276 <label class=
"md-nav__title" for=
"__nav_2_5">
277 <span class=
"md-nav__icon md-icon"></span>
280 <ul class=
"md-nav__list" data-md-scrollfix
>
286 <li class=
"md-nav__item">
287 <a href=
"../../../php/api/caches/" class=
"md-nav__link">
298 <li class=
"md-nav__item">
299 <a href=
"../../../php/api/comments/" class=
"md-nav__link">
310 <li class=
"md-nav__item">
311 <a href=
"../../../php/api/cronjobs/" class=
"md-nav__link">
322 <li class=
"md-nav__item">
323 <a href=
"../../../php/api/events/" class=
"md-nav__link">
335 <li class=
"md-nav__item md-nav__item--nested">
338 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_2_5_5" type=
"checkbox" id=
"__nav_2_5_5" >
340 <label class=
"md-nav__link" for=
"__nav_2_5_5">
342 <span class=
"md-nav__icon md-icon"></span>
344 <nav class=
"md-nav" aria-label=
"Form Builder" data-md-level=
"3">
345 <label class=
"md-nav__title" for=
"__nav_2_5_5">
346 <span class=
"md-nav__icon md-icon"></span>
349 <ul class=
"md-nav__list" data-md-scrollfix
>
355 <li class=
"md-nav__item">
356 <a href=
"../../../php/api/form_builder/overview/" class=
"md-nav__link">
367 <li class=
"md-nav__item">
368 <a href=
"../../../php/api/form_builder/structure/" class=
"md-nav__link">
379 <li class=
"md-nav__item">
380 <a href=
"../../../php/api/form_builder/form_fields/" class=
"md-nav__link">
391 <li class=
"md-nav__item">
392 <a href=
"../../../php/api/form_builder/validation_data/" class=
"md-nav__link">
403 <li class=
"md-nav__item">
404 <a href=
"../../../php/api/form_builder/dependencies/" class=
"md-nav__link">
421 <li class=
"md-nav__item">
422 <a href=
"../../../php/api/package_installation_plugins/" class=
"md-nav__link">
423 Package Installation Plugins
433 <li class=
"md-nav__item">
434 <a href=
"../../../php/api/user_activity_points/" class=
"md-nav__link">
445 <li class=
"md-nav__item">
446 <a href=
"../../../php/api/user_notifications/" class=
"md-nav__link">
457 <li class=
"md-nav__item">
458 <a href=
"../../../php/api/sitemaps/" class=
"md-nav__link">
475 <li class=
"md-nav__item">
476 <a href=
"../../../php/code-style/" class=
"md-nav__link">
487 <li class=
"md-nav__item">
488 <a href=
"../../../php/apps/" class=
"md-nav__link">
499 <li class=
"md-nav__item">
500 <a href=
"../../../php/gdpr/" class=
"md-nav__link">
521 <li class=
"md-nav__item md-nav__item--nested">
524 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_3" type=
"checkbox" id=
"__nav_3" >
526 <label class=
"md-nav__link" for=
"__nav_3">
527 Languages, Templates & CSS
528 <span class=
"md-nav__icon md-icon"></span>
530 <nav class=
"md-nav" aria-label=
"Languages, Templates & CSS" data-md-level=
"1">
531 <label class=
"md-nav__title" for=
"__nav_3">
532 <span class=
"md-nav__icon md-icon"></span>
533 Languages, Templates & CSS
535 <ul class=
"md-nav__list" data-md-scrollfix
>
541 <li class=
"md-nav__item">
542 <a href=
"../../../view/languages/" class=
"md-nav__link">
553 <li class=
"md-nav__item">
554 <a href=
"../../../view/templates/" class=
"md-nav__link">
565 <li class=
"md-nav__item">
566 <a href=
"../../../view/css/" class=
"md-nav__link">
587 <li class=
"md-nav__item md-nav__item--nested">
590 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_4" type=
"checkbox" id=
"__nav_4" >
592 <label class=
"md-nav__link" for=
"__nav_4">
594 <span class=
"md-nav__icon md-icon"></span>
596 <nav class=
"md-nav" aria-label=
"JavaScript API" data-md-level=
"1">
597 <label class=
"md-nav__title" for=
"__nav_4">
598 <span class=
"md-nav__icon md-icon"></span>
601 <ul class=
"md-nav__list" data-md-scrollfix
>
607 <li class=
"md-nav__item">
608 <a href=
"../../../javascript/general-usage/" class=
"md-nav__link">
620 <li class=
"md-nav__item md-nav__item--nested">
623 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_4_2" type=
"checkbox" id=
"__nav_4_2" >
625 <label class=
"md-nav__link" for=
"__nav_4_2">
627 <span class=
"md-nav__icon md-icon"></span>
629 <nav class=
"md-nav" aria-label=
"New API" data-md-level=
"2">
630 <label class=
"md-nav__title" for=
"__nav_4_2">
631 <span class=
"md-nav__icon md-icon"></span>
634 <ul class=
"md-nav__list" data-md-scrollfix
>
640 <li class=
"md-nav__item">
641 <a href=
"../../../javascript/new-api_writing-a-module/" class=
"md-nav__link">
652 <li class=
"md-nav__item">
653 <a href=
"../../../javascript/new-api_data-structures/" class=
"md-nav__link">
664 <li class=
"md-nav__item">
665 <a href=
"../../../javascript/new-api_core/" class=
"md-nav__link">
676 <li class=
"md-nav__item">
677 <a href=
"../../../javascript/new-api_dom/" class=
"md-nav__link">
688 <li class=
"md-nav__item">
689 <a href=
"../../../javascript/new-api_events/" class=
"md-nav__link">
700 <li class=
"md-nav__item">
701 <a href=
"../../../javascript/new-api_ajax/" class=
"md-nav__link">
712 <li class=
"md-nav__item">
713 <a href=
"../../../javascript/new-api_dialogs/" class=
"md-nav__link">
724 <li class=
"md-nav__item">
725 <a href=
"../../../javascript/new-api_browser/" class=
"md-nav__link">
726 Browser and Screen Sizes
736 <li class=
"md-nav__item">
737 <a href=
"../../../javascript/new-api_ui/" class=
"md-nav__link">
754 <li class=
"md-nav__item">
755 <a href=
"../../../javascript/legacy-api/" class=
"md-nav__link">
766 <li class=
"md-nav__item">
767 <a href=
"../../../javascript/helper-functions/" class=
"md-nav__link">
778 <li class=
"md-nav__item">
779 <a href=
"../../../javascript/code-snippets/" class=
"md-nav__link">
800 <li class=
"md-nav__item md-nav__item--nested">
803 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_5" type=
"checkbox" id=
"__nav_5" >
805 <label class=
"md-nav__link" for=
"__nav_5">
807 <span class=
"md-nav__icon md-icon"></span>
809 <nav class=
"md-nav" aria-label=
"Package Components" data-md-level=
"1">
810 <label class=
"md-nav__title" for=
"__nav_5">
811 <span class=
"md-nav__icon md-icon"></span>
814 <ul class=
"md-nav__list" data-md-scrollfix
>
820 <li class=
"md-nav__item">
821 <a href=
"../../../package/package-xml/" class=
"md-nav__link">
833 <li class=
"md-nav__item md-nav__item--nested">
836 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_5_2" type=
"checkbox" id=
"__nav_5_2" >
838 <label class=
"md-nav__link" for=
"__nav_5_2">
840 <span class=
"md-nav__icon md-icon"></span>
842 <nav class=
"md-nav" aria-label=
"PIPs" data-md-level=
"2">
843 <label class=
"md-nav__title" for=
"__nav_5_2">
844 <span class=
"md-nav__icon md-icon"></span>
847 <ul class=
"md-nav__list" data-md-scrollfix
>
853 <li class=
"md-nav__item">
854 <a href=
"../../../package/pip/" class=
"md-nav__link">
865 <li class=
"md-nav__item">
866 <a href=
"../../../package/pip/acl-option/" class=
"md-nav__link">
877 <li class=
"md-nav__item">
878 <a href=
"../../../package/pip/acp-menu/" class=
"md-nav__link">
889 <li class=
"md-nav__item">
890 <a href=
"../../../package/pip/acp-search-provider/" class=
"md-nav__link">
901 <li class=
"md-nav__item">
902 <a href=
"../../../package/pip/acp-template/" class=
"md-nav__link">
913 <li class=
"md-nav__item">
914 <a href=
"../../../package/pip/bbcode/" class=
"md-nav__link">
925 <li class=
"md-nav__item">
926 <a href=
"../../../package/pip/box/" class=
"md-nav__link">
937 <li class=
"md-nav__item">
938 <a href=
"../../../package/pip/clipboard-action/" class=
"md-nav__link">
949 <li class=
"md-nav__item">
950 <a href=
"../../../package/pip/core-object/" class=
"md-nav__link">
961 <li class=
"md-nav__item">
962 <a href=
"../../../package/pip/cronjob/" class=
"md-nav__link">
973 <li class=
"md-nav__item">
974 <a href=
"../../../package/pip/event-listener/" class=
"md-nav__link">
985 <li class=
"md-nav__item">
986 <a href=
"../../../package/pip/file/" class=
"md-nav__link">
997 <li class=
"md-nav__item">
998 <a href=
"../../../package/pip/language/" class=
"md-nav__link">
1009 <li class=
"md-nav__item">
1010 <a href=
"../../../package/pip/media-provider/" class=
"md-nav__link">
1021 <li class=
"md-nav__item">
1022 <a href=
"../../../package/pip/menu/" class=
"md-nav__link">
1033 <li class=
"md-nav__item">
1034 <a href=
"../../../package/pip/menu-item/" class=
"md-nav__link">
1045 <li class=
"md-nav__item">
1046 <a href=
"../../../package/pip/object-type/" class=
"md-nav__link">
1057 <li class=
"md-nav__item">
1058 <a href=
"../../../package/pip/object-type-definition/" class=
"md-nav__link">
1059 objectTypeDefinition
1069 <li class=
"md-nav__item">
1070 <a href=
"../../../package/pip/option/" class=
"md-nav__link">
1081 <li class=
"md-nav__item">
1082 <a href=
"../../../package/pip/page/" class=
"md-nav__link">
1093 <li class=
"md-nav__item">
1094 <a href=
"../../../package/pip/pip/" class=
"md-nav__link">
1105 <li class=
"md-nav__item">
1106 <a href=
"../../../package/pip/script/" class=
"md-nav__link">
1117 <li class=
"md-nav__item">
1118 <a href=
"../../../package/pip/smiley/" class=
"md-nav__link">
1129 <li class=
"md-nav__item">
1130 <a href=
"../../../package/pip/sql/" class=
"md-nav__link">
1141 <li class=
"md-nav__item">
1142 <a href=
"../../../package/pip/style/" class=
"md-nav__link">
1153 <li class=
"md-nav__item">
1154 <a href=
"../../../package/pip/template/" class=
"md-nav__link">
1165 <li class=
"md-nav__item">
1166 <a href=
"../../../package/pip/template-listener/" class=
"md-nav__link">
1177 <li class=
"md-nav__item">
1178 <a href=
"../../../package/pip/user-group-option/" class=
"md-nav__link">
1189 <li class=
"md-nav__item">
1190 <a href=
"../../../package/pip/user-menu/" class=
"md-nav__link">
1201 <li class=
"md-nav__item">
1202 <a href=
"../../../package/pip/user-notification-event/" class=
"md-nav__link">
1203 userNotificationEvent
1213 <li class=
"md-nav__item">
1214 <a href=
"../../../package/pip/user-option/" class=
"md-nav__link">
1225 <li class=
"md-nav__item">
1226 <a href=
"../../../package/pip/user-profile-menu/" class=
"md-nav__link">
1243 <li class=
"md-nav__item">
1244 <a href=
"../../../package/database-php-api/" class=
"md-nav__link">
1267 <li class=
"md-nav__item md-nav__item--active md-nav__item--nested">
1270 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_6" type=
"checkbox" id=
"__nav_6" checked
>
1272 <label class=
"md-nav__link" for=
"__nav_6">
1274 <span class=
"md-nav__icon md-icon"></span>
1276 <nav class=
"md-nav" aria-label=
"Migration" data-md-level=
"1">
1277 <label class=
"md-nav__title" for=
"__nav_6">
1278 <span class=
"md-nav__icon md-icon"></span>
1281 <ul class=
"md-nav__list" data-md-scrollfix
>
1288 <li class=
"md-nav__item md-nav__item--nested">
1291 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_6_1" type=
"checkbox" id=
"__nav_6_1" >
1293 <label class=
"md-nav__link" for=
"__nav_6_1">
1294 Migrating from WSC
5.3
1295 <span class=
"md-nav__icon md-icon"></span>
1297 <nav class=
"md-nav" aria-label=
"Migrating from WSC 5.3" data-md-level=
"2">
1298 <label class=
"md-nav__title" for=
"__nav_6_1">
1299 <span class=
"md-nav__icon md-icon"></span>
1300 Migrating from WSC
5.3
1302 <ul class=
"md-nav__list" data-md-scrollfix
>
1308 <li class=
"md-nav__item">
1309 <a href=
"../../wsc53/php/" class=
"md-nav__link">
1320 <li class=
"md-nav__item">
1321 <a href=
"../../wsc53/session/" class=
"md-nav__link">
1322 Session Handling and Authentication
1332 <li class=
"md-nav__item">
1333 <a href=
"../../wsc53/javascript/" class=
"md-nav__link">
1344 <li class=
"md-nav__item">
1345 <a href=
"../../wsc53/templates/" class=
"md-nav__link">
1356 <li class=
"md-nav__item">
1357 <a href=
"../../wsc53/libraries/" class=
"md-nav__link">
1358 Third Party Libraries
1375 <li class=
"md-nav__item md-nav__item--nested">
1378 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_6_2" type=
"checkbox" id=
"__nav_6_2" >
1380 <label class=
"md-nav__link" for=
"__nav_6_2">
1381 Migrating from WSC
5.2
1382 <span class=
"md-nav__icon md-icon"></span>
1384 <nav class=
"md-nav" aria-label=
"Migrating from WSC 5.2" data-md-level=
"2">
1385 <label class=
"md-nav__title" for=
"__nav_6_2">
1386 <span class=
"md-nav__icon md-icon"></span>
1387 Migrating from WSC
5.2
1389 <ul class=
"md-nav__list" data-md-scrollfix
>
1395 <li class=
"md-nav__item">
1396 <a href=
"../../wsc52/php/" class=
"md-nav__link">
1407 <li class=
"md-nav__item">
1408 <a href=
"../../wsc52/templates/" class=
"md-nav__link">
1409 Templates and Languages
1419 <li class=
"md-nav__item">
1420 <a href=
"../../wsc52/libraries/" class=
"md-nav__link">
1421 Third Party Libraries
1438 <li class=
"md-nav__item md-nav__item--nested">
1441 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_6_3" type=
"checkbox" id=
"__nav_6_3" >
1443 <label class=
"md-nav__link" for=
"__nav_6_3">
1444 Migrating from WSC
3.1
1445 <span class=
"md-nav__icon md-icon"></span>
1447 <nav class=
"md-nav" aria-label=
"Migrating from WSC 3.1" data-md-level=
"2">
1448 <label class=
"md-nav__title" for=
"__nav_6_3">
1449 <span class=
"md-nav__icon md-icon"></span>
1450 Migrating from WSC
3.1
1452 <ul class=
"md-nav__list" data-md-scrollfix
>
1458 <li class=
"md-nav__item">
1459 <a href=
"../../wsc31/php/" class=
"md-nav__link">
1479 <li class=
"md-nav__item md-nav__item--active md-nav__item--nested">
1482 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_6_4" type=
"checkbox" id=
"__nav_6_4" checked
>
1484 <label class=
"md-nav__link" for=
"__nav_6_4">
1485 Migrating from WSC
3.0
1486 <span class=
"md-nav__icon md-icon"></span>
1488 <nav class=
"md-nav" aria-label=
"Migrating from WSC 3.0" data-md-level=
"2">
1489 <label class=
"md-nav__title" for=
"__nav_6_4">
1490 <span class=
"md-nav__icon md-icon"></span>
1491 Migrating from WSC
3.0
1493 <ul class=
"md-nav__list" data-md-scrollfix
>
1499 <li class=
"md-nav__item">
1500 <a href=
"../php/" class=
"md-nav__link">
1511 <li class=
"md-nav__item">
1512 <a href=
"../javascript/" class=
"md-nav__link">
1523 <li class=
"md-nav__item">
1524 <a href=
"../templates/" class=
"md-nav__link">
1537 <li class=
"md-nav__item md-nav__item--active">
1539 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"toc" type=
"checkbox" id=
"__toc">
1544 <label class=
"md-nav__link md-nav__link--active" for=
"__toc">
1546 <span class=
"md-nav__icon md-icon"></span>
1549 <a href=
"./" class=
"md-nav__link md-nav__link--active">
1554 <nav class=
"md-nav md-nav--secondary" aria-label=
"Table of contents">
1560 <label class=
"md-nav__title" for=
"__toc">
1561 <span class=
"md-nav__icon md-icon"></span>
1564 <ul class=
"md-nav__list" data-md-component=
"toc" data-md-scrollfix
>
1566 <li class=
"md-nav__item">
1567 <a href=
"#new-style-variables" class=
"md-nav__link">
1571 <nav class=
"md-nav" aria-label=
"New Style Variables">
1572 <ul class=
"md-nav__list">
1574 <li class=
"md-nav__item">
1575 <a href=
"#wcfcontentcontainer" class=
"md-nav__link">
1581 <li class=
"md-nav__item">
1582 <a href=
"#wcfeditorbutton" class=
"md-nav__link">
1593 <li class=
"md-nav__item">
1594 <a href=
"#color-variables-in-alertscss" class=
"md-nav__link">
1595 Color Variables in alert.scss
1612 <li class=
"md-nav__item">
1613 <a href=
"../package/" class=
"md-nav__link">
1631 <li class=
"md-nav__item md-nav__item--nested">
1634 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_6_5" type=
"checkbox" id=
"__nav_6_5" >
1636 <label class=
"md-nav__link" for=
"__nav_6_5">
1637 Migrating from WCF
2.1
1638 <span class=
"md-nav__icon md-icon"></span>
1640 <nav class=
"md-nav" aria-label=
"Migrating from WCF 2.1" data-md-level=
"2">
1641 <label class=
"md-nav__title" for=
"__nav_6_5">
1642 <span class=
"md-nav__icon md-icon"></span>
1643 Migrating from WCF
2.1
1645 <ul class=
"md-nav__list" data-md-scrollfix
>
1651 <li class=
"md-nav__item">
1652 <a href=
"../../wcf21/php/" class=
"md-nav__link">
1663 <li class=
"md-nav__item">
1664 <a href=
"../../wcf21/templates/" class=
"md-nav__link">
1675 <li class=
"md-nav__item">
1676 <a href=
"../../wcf21/css/" class=
"md-nav__link">
1687 <li class=
"md-nav__item">
1688 <a href=
"../../wcf21/package/" class=
"md-nav__link">
1715 <li class=
"md-nav__item md-nav__item--nested">
1718 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_7" type=
"checkbox" id=
"__nav_7" >
1720 <label class=
"md-nav__link" for=
"__nav_7">
1722 <span class=
"md-nav__icon md-icon"></span>
1724 <nav class=
"md-nav" aria-label=
"Tutorials" data-md-level=
"1">
1725 <label class=
"md-nav__title" for=
"__nav_7">
1726 <span class=
"md-nav__icon md-icon"></span>
1729 <ul class=
"md-nav__list" data-md-scrollfix
>
1736 <li class=
"md-nav__item md-nav__item--nested">
1739 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_7_1" type=
"checkbox" id=
"__nav_7_1" >
1741 <label class=
"md-nav__link" for=
"__nav_7_1">
1743 <span class=
"md-nav__icon md-icon"></span>
1745 <nav class=
"md-nav" aria-label=
"Tutorial Series" data-md-level=
"2">
1746 <label class=
"md-nav__title" for=
"__nav_7_1">
1747 <span class=
"md-nav__icon md-icon"></span>
1750 <ul class=
"md-nav__list" data-md-scrollfix
>
1756 <li class=
"md-nav__item">
1757 <a href=
"../../../tutorial/series/overview/" class=
"md-nav__link">
1768 <li class=
"md-nav__item">
1769 <a href=
"../../../tutorial/series/part_1/" class=
"md-nav__link">
1780 <li class=
"md-nav__item">
1781 <a href=
"../../../tutorial/series/part_2/" class=
"md-nav__link">
1792 <li class=
"md-nav__item">
1793 <a href=
"../../../tutorial/series/part_3/" class=
"md-nav__link">
1820 <div class=
"md-sidebar md-sidebar--secondary" data-md-component=
"sidebar" data-md-type=
"toc" >
1821 <div class=
"md-sidebar__scrollwrap">
1822 <div class=
"md-sidebar__inner">
1824 <nav class=
"md-nav md-nav--secondary" aria-label=
"Table of contents">
1830 <label class=
"md-nav__title" for=
"__toc">
1831 <span class=
"md-nav__icon md-icon"></span>
1834 <ul class=
"md-nav__list" data-md-component=
"toc" data-md-scrollfix
>
1836 <li class=
"md-nav__item">
1837 <a href=
"#new-style-variables" class=
"md-nav__link">
1841 <nav class=
"md-nav" aria-label=
"New Style Variables">
1842 <ul class=
"md-nav__list">
1844 <li class=
"md-nav__item">
1845 <a href=
"#wcfcontentcontainer" class=
"md-nav__link">
1851 <li class=
"md-nav__item">
1852 <a href=
"#wcfeditorbutton" class=
"md-nav__link">
1863 <li class=
"md-nav__item">
1864 <a href=
"#color-variables-in-alertscss" class=
"md-nav__link">
1865 Color Variables in alert.scss
1878 <div class=
"md-content" data-md-component=
"content">
1879 <article class=
"md-content__inner md-typeset">
1883 <h1 id=
"migrating-from-wsc-30-css">Migrating from WSC
3.0 - CSS
<a class=
"headerlink" href=
"#migrating-from-wsc-30-css" title=
"Permanent link">#
</a></h1>
1884 <h2 id=
"new-style-variables">New Style Variables
<a class=
"headerlink" href=
"#new-style-variables" title=
"Permanent link">#
</a></h2>
1885 <div class=
"admonition info">
1886 <p class=
"admonition-title">The new style variables are only applied to styles that have the compatibility set to WSC
3.1</p>
1888 <h3 id=
"wcfcontentcontainer">wcfContentContainer
<a class=
"headerlink" href=
"#wcfcontentcontainer" title=
"Permanent link">#
</a></h3>
1889 <p>The page content is encapsulated in a new container that wraps around the inner content, but excludes the sidebars, header and page navigation elements.
</p>
1891 <li><code>$wcfContentContainerBackground
</code> - background color
</li>
1892 <li><code>$wcfContentContainerBorder
</code> - border color
</li>
1894 <h3 id=
"wcfeditorbutton">wcfEditorButton
<a class=
"headerlink" href=
"#wcfeditorbutton" title=
"Permanent link">#
</a></h3>
1895 <p>These variables control the appearance of the editor toolbar and its buttons.
</p>
1897 <li><code>$wcfEditorButtonBackground
</code> - button and toolbar background color
</li>
1898 <li><code>$wcfEditorButtonBackgroundActive
</code> - active button background color
</li>
1899 <li><code>$wcfEditorButtonText
</code> - text color for available buttons
</li>
1900 <li><code>$wcfEditorButtonTextActive
</code> - text color for active buttons
</li>
1901 <li><code>$wcfEditorButtonTextDisabled
</code> - text color for disabled buttons
</li>
1903 <h2 id=
"color-variables-in-alertscss">Color Variables in
<code>alert.scss
</code><a class=
"headerlink" href=
"#color-variables-in-alertscss" title=
"Permanent link">#
</a></h2>
1904 <p>The color values for
<code><small
class=
"innerError"></code> used to be hardcoded values, but have now been changed to use the values for error messages (
<code>wcfStatusError*
</code>) instead.
</p>
1918 <footer class=
"md-footer">
1920 <nav class=
"md-footer__inner md-grid" aria-label=
"Footer">
1922 <a href=
"../templates/" class=
"md-footer__link md-footer__link--prev" rel=
"prev">
1923 <div class=
"md-footer__button md-icon">
1924 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 24 24"><path d=
"M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
1926 <div class=
"md-footer__title">
1927 <div class=
"md-ellipsis">
1928 <span class=
"md-footer__direction">
1937 <a href=
"../package/" class=
"md-footer__link md-footer__link--next" rel=
"next">
1938 <div class=
"md-footer__title">
1939 <div class=
"md-ellipsis">
1940 <span class=
"md-footer__direction">
1946 <div class=
"md-footer__button md-icon">
1947 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 24 24"><path d=
"M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
1953 <div class=
"md-footer-meta md-typeset">
1954 <div class=
"md-footer-meta__inner md-grid">
1955 <div class=
"md-footer-copyright">
1957 <div class=
"md-footer-copyright__highlight">
1958 Copyright ©
2020 WoltLab GmbH
1962 <a href=
"https://squidfunk.github.io/mkdocs-material/" target=
"_blank" rel=
"noopener">
1967 <div class=
"md-footer-copyright">
1968 <a href=
"https://www.woltlab.com/legal-notice/">Legal Notice
</a>
1969 <a href=
"https://www.woltlab.com/privacy-policy/">Privacy Policy
</a>
1976 <div class=
"md-dialog" data-md-component=
"dialog">
1977 <div class=
"md-dialog__inner md-typeset"></div>
1979 <script id=
"__config" type=
"application/json">{
"base":
"../../..",
"features": [],
"translations": {
"clipboard.copy":
"Copy to clipboard",
"clipboard.copied":
"Copied to clipboard",
"search.config.lang":
"en",
"search.config.pipeline":
"trimmer, stopWordFilter",
"search.config.separator":
"[\\s\\-]+",
"search.placeholder":
"Search",
"search.result.placeholder":
"Type to start searching",
"search.result.none":
"No matching documents",
"search.result.one":
"1 matching document",
"search.result.other":
"# matching documents",
"search.result.more.one":
"1 more on this page",
"search.result.more.other":
"# more on this page",
"search.result.term.missing":
"Missing"},
"search":
"../../../assets/javascripts/workers/search.fb4a9340.min.js",
"version": {
"provider":
"mike"}}
</script>
1982 <script src=
"../../../assets/javascripts/bundle.5cf3e710.min.js"></script>