latest/migration/wcf21/templates/index.html

   1
   2 <!doctype html>
   3 <html lang="en" class="no-js">
   4   <head>
   5
   6       <meta charset="utf-8">
   7       <meta name="viewport" content="width=device-width,initial-scale=1">
   8
   9
  10
  11
  12       <link rel="shortcut icon" href="../../../assets/default.favicon.ico">
  13       <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-7.0.5">
  14
  15
  16
  17         <title>Templates - WoltLab Suite Documentation</title>
  18
  19
  20
  21       <link rel="stylesheet" href="../../../assets/stylesheets/main.77f3fd56.min.css">
  22
  23
  24         <link rel="stylesheet" href="../../../assets/stylesheets/palette.7fa14f5b.min.css">
  25
  26
  27
  28           <meta name="theme-color" content="#009485">
  29
  30
  31
  32
  33
  34
  35
  36
  37       <link rel="stylesheet" href="../../../stylesheets/extra.css">
  38
  39
  40
  41
  42
  43   </head>
  44
  45
  46
  47
  48
  49
  50
  51     <body dir="ltr" data-md-color-scheme="" data-md-color-primary="teal" data-md-color-accent="">
  52
  53
  54
  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">
  59
  60
  61         <a href="#wcf-21x-templates" class="md-skip">
  62           Skip to content
  63         </a>
  64
  65     </div>
  66     <div data-md-component="announce">
  67
  68         <aside class="md-announce">
  69           <div class="md-announce__inner md-grid md-typeset">
  70
  71     <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>
  72
  73           </div>
  74         </aside>
  75
  76     </div>
  77
  78
  79
  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">
  83
  84   <img src="../../../assets/logo.png" alt="logo">
  85
  86     </a>
  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>
  89     </label>
  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
  95           </span>
  96         </div>
  97         <div class="md-header__topic" data-md-component="header-topic">
  98           <span class="md-ellipsis">
  99
 100               Templates
 101
 102           </span>
 103         </div>
 104       </div>
 105     </div>
 106     <div class="md-header__options">
 107
 108     </div>
 109
 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>
 112       </label>
 113
 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>
 122       </label>
 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>
 125       </button>
 126     </form>
 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">
 131             Initializing search
 132           </div>
 133           <ol class="md-search-result__list"></ol>
 134         </div>
 135       </div>
 136     </div>
 137   </div>
 138 </div>
 139
 140
 141   </nav>
 142 </header>
 143
 144     <div class="md-container" data-md-component="container">
 145
 146
 147
 148
 149       <main class="md-main" data-md-component="main">
 150         <div class="md-main__inner md-grid">
 151
 152
 153
 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">
 157
 158
 159
 160
 161
 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">
 165
 166   <img src="../../../assets/logo.png" alt="logo">
 167
 168     </a>
 169     WoltLab Suite Documentation
 170   </label>
 171
 172   <ul class="md-nav__list" data-md-scrollfix>
 173
 174
 175
 176
 177
 178
 179
 180
 181     <li class="md-nav__item">
 182       <a href="../../../getting-started/" class="md-nav__link">
 183         Getting Started
 184       </a>
 185     </li>
 186
 187
 188
 189
 190
 191
 192
 193
 194
 195
 196
 197     <li class="md-nav__item md-nav__item--nested">
 198
 199
 200         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
 201
 202       <label class="md-nav__link" for="__nav_2">
 203         PHP API
 204         <span class="md-nav__icon md-icon"></span>
 205       </label>
 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>
 209           PHP API
 210         </label>
 211         <ul class="md-nav__list" data-md-scrollfix>
 212
 213
 214
 215
 216
 217     <li class="md-nav__item">
 218       <a href="../../../php/pages/" class="md-nav__link">
 219         Pages
 220       </a>
 221     </li>
 222
 223
 224
 225
 226
 227
 228
 229     <li class="md-nav__item">
 230       <a href="../../../php/database-objects/" class="md-nav__link">
 231         Database Objects
 232       </a>
 233     </li>
 234
 235
 236
 237
 238
 239
 240
 241     <li class="md-nav__item">
 242       <a href="../../../php/database-access/" class="md-nav__link">
 243         Database Access
 244       </a>
 245     </li>
 246
 247
 248
 249
 250
 251
 252
 253     <li class="md-nav__item">
 254       <a href="../../../php/exceptions/" class="md-nav__link">
 255         Exceptions
 256       </a>
 257     </li>
 258
 259
 260
 261
 262
 263
 264
 265
 266     <li class="md-nav__item md-nav__item--nested">
 267
 268
 269         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5" type="checkbox" id="__nav_2_5" >
 270
 271       <label class="md-nav__link" for="__nav_2_5">
 272         API
 273         <span class="md-nav__icon md-icon"></span>
 274       </label>
 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>
 278           API
 279         </label>
 280         <ul class="md-nav__list" data-md-scrollfix>
 281
 282
 283
 284
 285
 286     <li class="md-nav__item">
 287       <a href="../../../php/api/caches/" class="md-nav__link">
 288         Caches
 289       </a>
 290     </li>
 291
 292
 293
 294
 295
 296
 297
 298     <li class="md-nav__item">
 299       <a href="../../../php/api/comments/" class="md-nav__link">
 300         Comments
 301       </a>
 302     </li>
 303
 304
 305
 306
 307
 308
 309
 310     <li class="md-nav__item">
 311       <a href="../../../php/api/cronjobs/" class="md-nav__link">
 312         Cronjobs
 313       </a>
 314     </li>
 315
 316
 317
 318
 319
 320
 321
 322     <li class="md-nav__item">
 323       <a href="../../../php/api/events/" class="md-nav__link">
 324         Events
 325       </a>
 326     </li>
 327
 328
 329
 330
 331
 332
 333
 334
 335     <li class="md-nav__item md-nav__item--nested">
 336
 337
 338         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_5" type="checkbox" id="__nav_2_5_5" >
 339
 340       <label class="md-nav__link" for="__nav_2_5_5">
 341         Form Builder
 342         <span class="md-nav__icon md-icon"></span>
 343       </label>
 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>
 347           Form Builder
 348         </label>
 349         <ul class="md-nav__list" data-md-scrollfix>
 350
 351
 352
 353
 354
 355     <li class="md-nav__item">
 356       <a href="../../../php/api/form_builder/overview/" class="md-nav__link">
 357         Overview
 358       </a>
 359     </li>
 360
 361
 362
 363
 364
 365
 366
 367     <li class="md-nav__item">
 368       <a href="../../../php/api/form_builder/structure/" class="md-nav__link">
 369         Structure
 370       </a>
 371     </li>
 372
 373
 374
 375
 376
 377
 378
 379     <li class="md-nav__item">
 380       <a href="../../../php/api/form_builder/form_fields/" class="md-nav__link">
 381         Fields
 382       </a>
 383     </li>
 384
 385
 386
 387
 388
 389
 390
 391     <li class="md-nav__item">
 392       <a href="../../../php/api/form_builder/validation_data/" class="md-nav__link">
 393         Validation and Data
 394       </a>
 395     </li>
 396
 397
 398
 399
 400
 401
 402
 403     <li class="md-nav__item">
 404       <a href="../../../php/api/form_builder/dependencies/" class="md-nav__link">
 405         Dependencies
 406       </a>
 407     </li>
 408
 409
 410
 411         </ul>
 412       </nav>
 413     </li>
 414
 415
 416
 417
 418
 419
 420
 421     <li class="md-nav__item">
 422       <a href="../../../php/api/package_installation_plugins/" class="md-nav__link">
 423         Package Installation Plugins
 424       </a>
 425     </li>
 426
 427
 428
 429
 430
 431
 432
 433     <li class="md-nav__item">
 434       <a href="../../../php/api/user_activity_points/" class="md-nav__link">
 435         User Activity Points
 436       </a>
 437     </li>
 438
 439
 440
 441
 442
 443
 444
 445     <li class="md-nav__item">
 446       <a href="../../../php/api/user_notifications/" class="md-nav__link">
 447         User Notifications
 448       </a>
 449     </li>
 450
 451
 452
 453
 454
 455
 456
 457     <li class="md-nav__item">
 458       <a href="../../../php/api/sitemaps/" class="md-nav__link">
 459         Sitemaps
 460       </a>
 461     </li>
 462
 463
 464
 465         </ul>
 466       </nav>
 467     </li>
 468
 469
 470
 471
 472
 473
 474
 475     <li class="md-nav__item">
 476       <a href="../../../php/code-style/" class="md-nav__link">
 477         Code Style
 478       </a>
 479     </li>
 480
 481
 482
 483
 484
 485
 486
 487     <li class="md-nav__item">
 488       <a href="../../../php/apps/" class="md-nav__link">
 489         Apps
 490       </a>
 491     </li>
 492
 493
 494
 495
 496
 497
 498
 499     <li class="md-nav__item">
 500       <a href="../../../php/gdpr/" class="md-nav__link">
 501         GDPR
 502       </a>
 503     </li>
 504
 505
 506
 507         </ul>
 508       </nav>
 509     </li>
 510
 511
 512
 513
 514
 515
 516
 517
 518
 519
 520
 521     <li class="md-nav__item md-nav__item--nested">
 522
 523
 524         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" >
 525
 526       <label class="md-nav__link" for="__nav_3">
 527         Languages, Templates & CSS
 528         <span class="md-nav__icon md-icon"></span>
 529       </label>
 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
 534         </label>
 535         <ul class="md-nav__list" data-md-scrollfix>
 536
 537
 538
 539
 540
 541     <li class="md-nav__item">
 542       <a href="../../../view/languages/" class="md-nav__link">
 543         Languages
 544       </a>
 545     </li>
 546
 547
 548
 549
 550
 551
 552
 553     <li class="md-nav__item">
 554       <a href="../../../view/templates/" class="md-nav__link">
 555         Templates
 556       </a>
 557     </li>
 558
 559
 560
 561
 562
 563
 564
 565     <li class="md-nav__item">
 566       <a href="../../../view/css/" class="md-nav__link">
 567         CSS
 568       </a>
 569     </li>
 570
 571
 572
 573         </ul>
 574       </nav>
 575     </li>
 576
 577
 578
 579
 580
 581
 582
 583
 584
 585
 586
 587     <li class="md-nav__item md-nav__item--nested">
 588
 589
 590         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" >
 591
 592       <label class="md-nav__link" for="__nav_4">
 593         JavaScript API
 594         <span class="md-nav__icon md-icon"></span>
 595       </label>
 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>
 599           JavaScript API
 600         </label>
 601         <ul class="md-nav__list" data-md-scrollfix>
 602
 603
 604
 605
 606
 607     <li class="md-nav__item">
 608       <a href="../../../javascript/general-usage/" class="md-nav__link">
 609         General Usage
 610       </a>
 611     </li>
 612
 613
 614
 615
 616
 617
 618
 619
 620     <li class="md-nav__item md-nav__item--nested">
 621
 622
 623         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_2" type="checkbox" id="__nav_4_2" >
 624
 625       <label class="md-nav__link" for="__nav_4_2">
 626         New API
 627         <span class="md-nav__icon md-icon"></span>
 628       </label>
 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>
 632           New API
 633         </label>
 634         <ul class="md-nav__list" data-md-scrollfix>
 635
 636
 637
 638
 639
 640     <li class="md-nav__item">
 641       <a href="../../../javascript/new-api_writing-a-module/" class="md-nav__link">
 642         Writing a module
 643       </a>
 644     </li>
 645
 646
 647
 648
 649
 650
 651
 652     <li class="md-nav__item">
 653       <a href="../../../javascript/new-api_data-structures/" class="md-nav__link">
 654         Data Structures
 655       </a>
 656     </li>
 657
 658
 659
 660
 661
 662
 663
 664     <li class="md-nav__item">
 665       <a href="../../../javascript/new-api_core/" class="md-nav__link">
 666         Core Functions
 667       </a>
 668     </li>
 669
 670
 671
 672
 673
 674
 675
 676     <li class="md-nav__item">
 677       <a href="../../../javascript/new-api_dom/" class="md-nav__link">
 678         DOM
 679       </a>
 680     </li>
 681
 682
 683
 684
 685
 686
 687
 688     <li class="md-nav__item">
 689       <a href="../../../javascript/new-api_events/" class="md-nav__link">
 690         Event Handling
 691       </a>
 692     </li>
 693
 694
 695
 696
 697
 698
 699
 700     <li class="md-nav__item">
 701       <a href="../../../javascript/new-api_ajax/" class="md-nav__link">
 702         Ajax
 703       </a>
 704     </li>
 705
 706
 707
 708
 709
 710
 711
 712     <li class="md-nav__item">
 713       <a href="../../../javascript/new-api_dialogs/" class="md-nav__link">
 714         Dialogs
 715       </a>
 716     </li>
 717
 718
 719
 720
 721
 722
 723
 724     <li class="md-nav__item">
 725       <a href="../../../javascript/new-api_browser/" class="md-nav__link">
 726         Browser and Screen Sizes
 727       </a>
 728     </li>
 729
 730
 731
 732
 733
 734
 735
 736     <li class="md-nav__item">
 737       <a href="../../../javascript/new-api_ui/" class="md-nav__link">
 738         User Interface
 739       </a>
 740     </li>
 741
 742
 743
 744         </ul>
 745       </nav>
 746     </li>
 747
 748
 749
 750
 751
 752
 753
 754     <li class="md-nav__item">
 755       <a href="../../../javascript/legacy-api/" class="md-nav__link">
 756         Legacy API
 757       </a>
 758     </li>
 759
 760
 761
 762
 763
 764
 765
 766     <li class="md-nav__item">
 767       <a href="../../../javascript/helper-functions/" class="md-nav__link">
 768         Helper Functions
 769       </a>
 770     </li>
 771
 772
 773
 774
 775
 776
 777
 778     <li class="md-nav__item">
 779       <a href="../../../javascript/code-snippets/" class="md-nav__link">
 780         Code Snippets
 781       </a>
 782     </li>
 783
 784
 785
 786         </ul>
 787       </nav>
 788     </li>
 789
 790
 791
 792
 793
 794
 795
 796
 797
 798
 799
 800     <li class="md-nav__item md-nav__item--nested">
 801
 802
 803         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
 804
 805       <label class="md-nav__link" for="__nav_5">
 806         Package Components
 807         <span class="md-nav__icon md-icon"></span>
 808       </label>
 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>
 812           Package Components
 813         </label>
 814         <ul class="md-nav__list" data-md-scrollfix>
 815
 816
 817
 818
 819
 820     <li class="md-nav__item">
 821       <a href="../../../package/package-xml/" class="md-nav__link">
 822         package.xml
 823       </a>
 824     </li>
 825
 826
 827
 828
 829
 830
 831
 832
 833     <li class="md-nav__item md-nav__item--nested">
 834
 835
 836         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
 837
 838       <label class="md-nav__link" for="__nav_5_2">
 839         PIPs
 840         <span class="md-nav__icon md-icon"></span>
 841       </label>
 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>
 845           PIPs
 846         </label>
 847         <ul class="md-nav__list" data-md-scrollfix>
 848
 849
 850
 851
 852
 853     <li class="md-nav__item">
 854       <a href="../../../package/pip/" class="md-nav__link">
 855         Overview
 856       </a>
 857     </li>
 858
 859
 860
 861
 862
 863
 864
 865     <li class="md-nav__item">
 866       <a href="../../../package/pip/acl-option/" class="md-nav__link">
 867         aclOption
 868       </a>
 869     </li>
 870
 871
 872
 873
 874
 875
 876
 877     <li class="md-nav__item">
 878       <a href="../../../package/pip/acp-menu/" class="md-nav__link">
 879         acpMenu
 880       </a>
 881     </li>
 882
 883
 884
 885
 886
 887
 888
 889     <li class="md-nav__item">
 890       <a href="../../../package/pip/acp-search-provider/" class="md-nav__link">
 891         acpSearchProvider
 892       </a>
 893     </li>
 894
 895
 896
 897
 898
 899
 900
 901     <li class="md-nav__item">
 902       <a href="../../../package/pip/acp-template/" class="md-nav__link">
 903         acpTemplate
 904       </a>
 905     </li>
 906
 907
 908
 909
 910
 911
 912
 913     <li class="md-nav__item">
 914       <a href="../../../package/pip/bbcode/" class="md-nav__link">
 915         bbcode
 916       </a>
 917     </li>
 918
 919
 920
 921
 922
 923
 924
 925     <li class="md-nav__item">
 926       <a href="../../../package/pip/box/" class="md-nav__link">
 927         box
 928       </a>
 929     </li>
 930
 931
 932
 933
 934
 935
 936
 937     <li class="md-nav__item">
 938       <a href="../../../package/pip/clipboard-action/" class="md-nav__link">
 939         clipboardAction
 940       </a>
 941     </li>
 942
 943
 944
 945
 946
 947
 948
 949     <li class="md-nav__item">
 950       <a href="../../../package/pip/core-object/" class="md-nav__link">
 951         coreObject
 952       </a>
 953     </li>
 954
 955
 956
 957
 958
 959
 960
 961     <li class="md-nav__item">
 962       <a href="../../../package/pip/cronjob/" class="md-nav__link">
 963         cronjob
 964       </a>
 965     </li>
 966
 967
 968
 969
 970
 971
 972
 973     <li class="md-nav__item">
 974       <a href="../../../package/pip/event-listener/" class="md-nav__link">
 975         eventListener
 976       </a>
 977     </li>
 978
 979
 980
 981
 982
 983
 984
 985     <li class="md-nav__item">
 986       <a href="../../../package/pip/file/" class="md-nav__link">
 987         file
 988       </a>
 989     </li>
 990
 991
 992
 993
 994
 995
 996
 997     <li class="md-nav__item">
 998       <a href="../../../package/pip/language/" class="md-nav__link">
 999         language
1000       </a>
1001     </li>
1002
1003
1004
1005
1006
1007
1008
1009     <li class="md-nav__item">
1010       <a href="../../../package/pip/media-provider/" class="md-nav__link">
1011         mediaProvider
1012       </a>
1013     </li>
1014
1015
1016
1017
1018
1019
1020
1021     <li class="md-nav__item">
1022       <a href="../../../package/pip/menu/" class="md-nav__link">
1023         menu
1024       </a>
1025     </li>
1026
1027
1028
1029
1030
1031
1032
1033     <li class="md-nav__item">
1034       <a href="../../../package/pip/menu-item/" class="md-nav__link">
1035         menuItem
1036       </a>
1037     </li>
1038
1039
1040
1041
1042
1043
1044
1045     <li class="md-nav__item">
1046       <a href="../../../package/pip/object-type/" class="md-nav__link">
1047         objectType
1048       </a>
1049     </li>
1050
1051
1052
1053
1054
1055
1056
1057     <li class="md-nav__item">
1058       <a href="../../../package/pip/object-type-definition/" class="md-nav__link">
1059         objectTypeDefinition
1060       </a>
1061     </li>
1062
1063
1064
1065
1066
1067
1068
1069     <li class="md-nav__item">
1070       <a href="../../../package/pip/option/" class="md-nav__link">
1071         option
1072       </a>
1073     </li>
1074
1075
1076
1077
1078
1079
1080
1081     <li class="md-nav__item">
1082       <a href="../../../package/pip/page/" class="md-nav__link">
1083         page
1084       </a>
1085     </li>
1086
1087
1088
1089
1090
1091
1092
1093     <li class="md-nav__item">
1094       <a href="../../../package/pip/pip/" class="md-nav__link">
1095         pip
1096       </a>
1097     </li>
1098
1099
1100
1101
1102
1103
1104
1105     <li class="md-nav__item">
1106       <a href="../../../package/pip/script/" class="md-nav__link">
1107         script
1108       </a>
1109     </li>
1110
1111
1112
1113
1114
1115
1116
1117     <li class="md-nav__item">
1118       <a href="../../../package/pip/smiley/" class="md-nav__link">
1119         smiley
1120       </a>
1121     </li>
1122
1123
1124
1125
1126
1127
1128
1129     <li class="md-nav__item">
1130       <a href="../../../package/pip/sql/" class="md-nav__link">
1131         sql
1132       </a>
1133     </li>
1134
1135
1136
1137
1138
1139
1140
1141     <li class="md-nav__item">
1142       <a href="../../../package/pip/style/" class="md-nav__link">
1143         style
1144       </a>
1145     </li>
1146
1147
1148
1149
1150
1151
1152
1153     <li class="md-nav__item">
1154       <a href="../../../package/pip/template/" class="md-nav__link">
1155         template
1156       </a>
1157     </li>
1158
1159
1160
1161
1162
1163
1164
1165     <li class="md-nav__item">
1166       <a href="../../../package/pip/template-listener/" class="md-nav__link">
1167         templateListener
1168       </a>
1169     </li>
1170
1171
1172
1173
1174
1175
1176
1177     <li class="md-nav__item">
1178       <a href="../../../package/pip/user-group-option/" class="md-nav__link">
1179         userGroupOption
1180       </a>
1181     </li>
1182
1183
1184
1185
1186
1187
1188
1189     <li class="md-nav__item">
1190       <a href="../../../package/pip/user-menu/" class="md-nav__link">
1191         userMenu
1192       </a>
1193     </li>
1194
1195
1196
1197
1198
1199
1200
1201     <li class="md-nav__item">
1202       <a href="../../../package/pip/user-notification-event/" class="md-nav__link">
1203         userNotificationEvent
1204       </a>
1205     </li>
1206
1207
1208
1209
1210
1211
1212
1213     <li class="md-nav__item">
1214       <a href="../../../package/pip/user-option/" class="md-nav__link">
1215         userOption
1216       </a>
1217     </li>
1218
1219
1220
1221
1222
1223
1224
1225     <li class="md-nav__item">
1226       <a href="../../../package/pip/user-profile-menu/" class="md-nav__link">
1227         userProfileMenu
1228       </a>
1229     </li>
1230
1231
1232
1233         </ul>
1234       </nav>
1235     </li>
1236
1237
1238
1239
1240
1241
1242
1243     <li class="md-nav__item">
1244       <a href="../../../package/database-php-api/" class="md-nav__link">
1245         Database PHP API
1246       </a>
1247     </li>
1248
1249
1250
1251         </ul>
1252       </nav>
1253     </li>
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
1268
1269
1270         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" checked>
1271
1272       <label class="md-nav__link" for="__nav_6">
1273         Migration
1274         <span class="md-nav__icon md-icon"></span>
1275       </label>
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>
1279           Migration
1280         </label>
1281         <ul class="md-nav__list" data-md-scrollfix>
1282
1283
1284
1285
1286
1287
1288     <li class="md-nav__item md-nav__item--nested">
1289
1290
1291         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
1292
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>
1296       </label>
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
1301         </label>
1302         <ul class="md-nav__list" data-md-scrollfix>
1303
1304
1305
1306
1307
1308     <li class="md-nav__item">
1309       <a href="../../wsc53/php/" class="md-nav__link">
1310         PHP API
1311       </a>
1312     </li>
1313
1314
1315
1316
1317
1318
1319
1320     <li class="md-nav__item">
1321       <a href="../../wsc53/session/" class="md-nav__link">
1322         Session Handling and Authentication
1323       </a>
1324     </li>
1325
1326
1327
1328
1329
1330
1331
1332     <li class="md-nav__item">
1333       <a href="../../wsc53/javascript/" class="md-nav__link">
1334         JavaScript
1335       </a>
1336     </li>
1337
1338
1339
1340
1341
1342
1343
1344     <li class="md-nav__item">
1345       <a href="../../wsc53/templates/" class="md-nav__link">
1346         Templates
1347       </a>
1348     </li>
1349
1350
1351
1352
1353
1354
1355
1356     <li class="md-nav__item">
1357       <a href="../../wsc53/libraries/" class="md-nav__link">
1358         Third Party Libraries
1359       </a>
1360     </li>
1361
1362
1363
1364         </ul>
1365       </nav>
1366     </li>
1367
1368
1369
1370
1371
1372
1373
1374
1375     <li class="md-nav__item md-nav__item--nested">
1376
1377
1378         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
1379
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>
1383       </label>
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
1388         </label>
1389         <ul class="md-nav__list" data-md-scrollfix>
1390
1391
1392
1393
1394
1395     <li class="md-nav__item">
1396       <a href="../../wsc52/php/" class="md-nav__link">
1397         PHP API
1398       </a>
1399     </li>
1400
1401
1402
1403
1404
1405
1406
1407     <li class="md-nav__item">
1408       <a href="../../wsc52/templates/" class="md-nav__link">
1409         Templates and Languages
1410       </a>
1411     </li>
1412
1413
1414
1415
1416
1417
1418
1419     <li class="md-nav__item">
1420       <a href="../../wsc52/libraries/" class="md-nav__link">
1421         Third Party Libraries
1422       </a>
1423     </li>
1424
1425
1426
1427         </ul>
1428       </nav>
1429     </li>
1430
1431
1432
1433
1434
1435
1436
1437
1438     <li class="md-nav__item md-nav__item--nested">
1439
1440
1441         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
1442
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>
1446       </label>
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
1451         </label>
1452         <ul class="md-nav__list" data-md-scrollfix>
1453
1454
1455
1456
1457
1458     <li class="md-nav__item">
1459       <a href="../../wsc31/php/" class="md-nav__link">
1460         PHP API
1461       </a>
1462     </li>
1463
1464
1465
1466         </ul>
1467       </nav>
1468     </li>
1469
1470
1471
1472
1473
1474
1475
1476
1477     <li class="md-nav__item md-nav__item--nested">
1478
1479
1480         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
1481
1482       <label class="md-nav__link" for="__nav_6_4">
1483         Migrating from WSC 3.0
1484         <span class="md-nav__icon md-icon"></span>
1485       </label>
1486       <nav class="md-nav" aria-label="Migrating from WSC 3.0" data-md-level="2">
1487         <label class="md-nav__title" for="__nav_6_4">
1488           <span class="md-nav__icon md-icon"></span>
1489           Migrating from WSC 3.0
1490         </label>
1491         <ul class="md-nav__list" data-md-scrollfix>
1492
1493
1494
1495
1496
1497     <li class="md-nav__item">
1498       <a href="../../wsc30/php/" class="md-nav__link">
1499         PHP API
1500       </a>
1501     </li>
1502
1503
1504
1505
1506
1507
1508
1509     <li class="md-nav__item">
1510       <a href="../../wsc30/javascript/" class="md-nav__link">
1511         JavaScript API
1512       </a>
1513     </li>
1514
1515
1516
1517
1518
1519
1520
1521     <li class="md-nav__item">
1522       <a href="../../wsc30/templates/" class="md-nav__link">
1523         Templates
1524       </a>
1525     </li>
1526
1527
1528
1529
1530
1531
1532
1533     <li class="md-nav__item">
1534       <a href="../../wsc30/css/" class="md-nav__link">
1535         CSS
1536       </a>
1537     </li>
1538
1539
1540
1541
1542
1543
1544
1545     <li class="md-nav__item">
1546       <a href="../../wsc30/package/" class="md-nav__link">
1547         Package Components
1548       </a>
1549     </li>
1550
1551
1552
1553         </ul>
1554       </nav>
1555     </li>
1556
1557
1558
1559
1560
1561
1562
1563
1564
1565
1566     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
1567
1568
1569         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" checked>
1570
1571       <label class="md-nav__link" for="__nav_6_5">
1572         Migrating from WCF 2.1
1573         <span class="md-nav__icon md-icon"></span>
1574       </label>
1575       <nav class="md-nav" aria-label="Migrating from WCF 2.1" data-md-level="2">
1576         <label class="md-nav__title" for="__nav_6_5">
1577           <span class="md-nav__icon md-icon"></span>
1578           Migrating from WCF 2.1
1579         </label>
1580         <ul class="md-nav__list" data-md-scrollfix>
1581
1582
1583
1584
1585
1586     <li class="md-nav__item">
1587       <a href="../php/" class="md-nav__link">
1588         PHP API
1589       </a>
1590     </li>
1591
1592
1593
1594
1595
1596
1597
1598
1599
1600     <li class="md-nav__item md-nav__item--active">
1601
1602       <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
1603
1604
1605
1606
1607         <label class="md-nav__link md-nav__link--active" for="__toc">
1608           Templates
1609           <span class="md-nav__icon md-icon"></span>
1610         </label>
1611
1612       <a href="./" class="md-nav__link md-nav__link--active">
1613         Templates
1614       </a>
1615
1616
1617 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
1618
1619
1620
1621
1622
1623     <label class="md-nav__title" for="__toc">
1624       <span class="md-nav__icon md-icon"></span>
1625       Table of contents
1626     </label>
1627     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
1628
1629         <li class="md-nav__item">
1630   <a href="#page-layout" class="md-nav__link">
1631     Page Layout
1632   </a>
1633
1634 </li>
1635
1636         <li class="md-nav__item">
1637   <a href="#sidebars" class="md-nav__link">
1638     Sidebars
1639   </a>
1640
1641 </li>
1642
1643         <li class="md-nav__item">
1644   <a href="#forms" class="md-nav__link">
1645     Forms
1646   </a>
1647
1648 </li>
1649
1650         <li class="md-nav__item">
1651   <a href="#icons" class="md-nav__link">
1652     Icons
1653   </a>
1654
1655     <nav class="md-nav" aria-label="Icons">
1656       <ul class="md-nav__list">
1657
1658           <li class="md-nav__item">
1659   <a href="#changed-icon-names" class="md-nav__link">
1660     Changed Icon Names
1661   </a>
1662
1663 </li>
1664
1665       </ul>
1666     </nav>
1667
1668 </li>
1669
1670         <li class="md-nav__item">
1671   <a href="#changed-classes" class="md-nav__link">
1672     Changed Classes
1673   </a>
1674
1675 </li>
1676
1677         <li class="md-nav__item">
1678   <a href="#removed-elements-and-classes" class="md-nav__link">
1679     Removed Elements and Classes
1680   </a>
1681
1682 </li>
1683
1684         <li class="md-nav__item">
1685   <a href="#simple-example" class="md-nav__link">
1686     Simple Example
1687   </a>
1688
1689 </li>
1690
1691         <li class="md-nav__item">
1692   <a href="#full-example" class="md-nav__link">
1693     Full Example
1694   </a>
1695
1696     <nav class="md-nav" aria-label="Full Example">
1697       <ul class="md-nav__list">
1698
1699           <li class="md-nav__item">
1700   <a href="#content-header" class="md-nav__link">
1701     Content Header
1702   </a>
1703
1704     <nav class="md-nav" aria-label="Content Header">
1705       <ul class="md-nav__list">
1706
1707           <li class="md-nav__item">
1708   <a href="#recommended-approach" class="md-nav__link">
1709     Recommended Approach
1710   </a>
1711
1712 </li>
1713
1714           <li class="md-nav__item">
1715   <a href="#alternative" class="md-nav__link">
1716     Alternative
1717   </a>
1718
1719 </li>
1720
1721       </ul>
1722     </nav>
1723
1724 </li>
1725
1726       </ul>
1727     </nav>
1728
1729 </li>
1730
1731     </ul>
1732
1733 </nav>
1734
1735     </li>
1736
1737
1738
1739
1740
1741
1742
1743     <li class="md-nav__item">
1744       <a href="../css/" class="md-nav__link">
1745         CSS
1746       </a>
1747     </li>
1748
1749
1750
1751
1752
1753
1754
1755     <li class="md-nav__item">
1756       <a href="../package/" class="md-nav__link">
1757         Package Components
1758       </a>
1759     </li>
1760
1761
1762
1763         </ul>
1764       </nav>
1765     </li>
1766
1767
1768
1769         </ul>
1770       </nav>
1771     </li>
1772
1773
1774
1775
1776
1777
1778
1779
1780
1781
1782
1783     <li class="md-nav__item md-nav__item--nested">
1784
1785
1786         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
1787
1788       <label class="md-nav__link" for="__nav_7">
1789         Tutorials
1790         <span class="md-nav__icon md-icon"></span>
1791       </label>
1792       <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
1793         <label class="md-nav__title" for="__nav_7">
1794           <span class="md-nav__icon md-icon"></span>
1795           Tutorials
1796         </label>
1797         <ul class="md-nav__list" data-md-scrollfix>
1798
1799
1800
1801
1802
1803
1804     <li class="md-nav__item md-nav__item--nested">
1805
1806
1807         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
1808
1809       <label class="md-nav__link" for="__nav_7_1">
1810         Tutorial Series
1811         <span class="md-nav__icon md-icon"></span>
1812       </label>
1813       <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
1814         <label class="md-nav__title" for="__nav_7_1">
1815           <span class="md-nav__icon md-icon"></span>
1816           Tutorial Series
1817         </label>
1818         <ul class="md-nav__list" data-md-scrollfix>
1819
1820
1821
1822
1823
1824     <li class="md-nav__item">
1825       <a href="../../../tutorial/series/overview/" class="md-nav__link">
1826         Overview
1827       </a>
1828     </li>
1829
1830
1831
1832
1833
1834
1835
1836     <li class="md-nav__item">
1837       <a href="../../../tutorial/series/part_1/" class="md-nav__link">
1838         Part 1
1839       </a>
1840     </li>
1841
1842
1843
1844
1845
1846
1847
1848     <li class="md-nav__item">
1849       <a href="../../../tutorial/series/part_2/" class="md-nav__link">
1850         Part 2
1851       </a>
1852     </li>
1853
1854
1855
1856
1857
1858
1859
1860     <li class="md-nav__item">
1861       <a href="../../../tutorial/series/part_3/" class="md-nav__link">
1862         Part 3
1863       </a>
1864     </li>
1865
1866
1867
1868         </ul>
1869       </nav>
1870     </li>
1871
1872
1873
1874         </ul>
1875       </nav>
1876     </li>
1877
1878
1879
1880   </ul>
1881 </nav>
1882                   </div>
1883                 </div>
1884               </div>
1885
1886
1887
1888               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
1889                 <div class="md-sidebar__scrollwrap">
1890                   <div class="md-sidebar__inner">
1891
1892 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
1893
1894
1895
1896
1897
1898     <label class="md-nav__title" for="__toc">
1899       <span class="md-nav__icon md-icon"></span>
1900       Table of contents
1901     </label>
1902     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
1903
1904         <li class="md-nav__item">
1905   <a href="#page-layout" class="md-nav__link">
1906     Page Layout
1907   </a>
1908
1909 </li>
1910
1911         <li class="md-nav__item">
1912   <a href="#sidebars" class="md-nav__link">
1913     Sidebars
1914   </a>
1915
1916 </li>
1917
1918         <li class="md-nav__item">
1919   <a href="#forms" class="md-nav__link">
1920     Forms
1921   </a>
1922
1923 </li>
1924
1925         <li class="md-nav__item">
1926   <a href="#icons" class="md-nav__link">
1927     Icons
1928   </a>
1929
1930     <nav class="md-nav" aria-label="Icons">
1931       <ul class="md-nav__list">
1932
1933           <li class="md-nav__item">
1934   <a href="#changed-icon-names" class="md-nav__link">
1935     Changed Icon Names
1936   </a>
1937
1938 </li>
1939
1940       </ul>
1941     </nav>
1942
1943 </li>
1944
1945         <li class="md-nav__item">
1946   <a href="#changed-classes" class="md-nav__link">
1947     Changed Classes
1948   </a>
1949
1950 </li>
1951
1952         <li class="md-nav__item">
1953   <a href="#removed-elements-and-classes" class="md-nav__link">
1954     Removed Elements and Classes
1955   </a>
1956
1957 </li>
1958
1959         <li class="md-nav__item">
1960   <a href="#simple-example" class="md-nav__link">
1961     Simple Example
1962   </a>
1963
1964 </li>
1965
1966         <li class="md-nav__item">
1967   <a href="#full-example" class="md-nav__link">
1968     Full Example
1969   </a>
1970
1971     <nav class="md-nav" aria-label="Full Example">
1972       <ul class="md-nav__list">
1973
1974           <li class="md-nav__item">
1975   <a href="#content-header" class="md-nav__link">
1976     Content Header
1977   </a>
1978
1979     <nav class="md-nav" aria-label="Content Header">
1980       <ul class="md-nav__list">
1981
1982           <li class="md-nav__item">
1983   <a href="#recommended-approach" class="md-nav__link">
1984     Recommended Approach
1985   </a>
1986
1987 </li>
1988
1989           <li class="md-nav__item">
1990   <a href="#alternative" class="md-nav__link">
1991     Alternative
1992   </a>
1993
1994 </li>
1995
1996       </ul>
1997     </nav>
1998
1999 </li>
2000
2001       </ul>
2002     </nav>
2003
2004 </li>
2005
2006     </ul>
2007
2008 </nav>
2009                   </div>
2010                 </div>
2011               </div>
2012
2013
2014           <div class="md-content" data-md-component="content">
2015             <article class="md-content__inner md-typeset">
2016
2017
2018
2019                 <h1 id="wcf-21x-templates">WCF 2.1.x - Templates<a class="headerlink" href="#wcf-21x-templates" title="Permanent link">#</a></h1>
2020 <h2 id="page-layout">Page Layout<a class="headerlink" href="#page-layout" title="Permanent link">#</a></h2>
2021 <p>The template structure has been overhauled and it is no longer required nor recommended to include internal templates, such as <code>documentHeader</code>, <code>headInclude</code> or <code>userNotice</code>. Instead use a simple <code>{include file='header'}</code> that now takes care of of the entire application frame.</p>
2022 <ul>
2023 <li>Templates must not include a trailing <code>&lt;/body&gt;&lt;/html&gt;</code> after including the <code>footer</code> template.</li>
2024 <li>The <code>documentHeader</code>, <code>headInclude</code> and <code>userNotice</code> template should no longer be included manually, the same goes with the <code>&lt;body&gt;</code> element, please use <code>{include file='header'}</code> instead.</li>
2025 <li>The <code>sidebarOrientation</code> variable for the <code>header</code> template has been removed and no longer works.</li>
2026 <li><code>header.boxHeadline</code> has been unified and now reads <code>header.contentHeader</code></li>
2027 </ul>
2028 <p>Please see the full example at the end of this page for more information.</p>
2029 <h2 id="sidebars">Sidebars<a class="headerlink" href="#sidebars" title="Permanent link">#</a></h2>
2030 <p>Sidebars are now dynamically populated by the box system, this requires a small change to unify the markup. Additionally the usage of <code>&lt;fieldset&gt;</code> has been deprecated due to browser inconsistencies and bugs and should be replaced with <code>section.box</code>.</p>
2031 <p>Previous markup used in WoltLab Community Framework 2.1 and earlier:</p>
2032 <div class="highlight"><pre><span></span><code><span class="p">&lt;</span><span class="nt">fieldset</span><span class="p">&gt;</span>
2033     <span class="p">&lt;</span><span class="nt">legend</span><span class="p">&gt;</span><span class="c">&lt;!-- Title --&gt;</span><span class="p">&lt;/</span><span class="nt">legend</span><span class="p">&gt;</span>
2034
2035     <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
2036         <span class="c">&lt;!-- Content --&gt;</span>
2037     <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
2038 <span class="p">&lt;/</span><span class="nt">fieldset</span><span class="p">&gt;</span>
2039 </code></pre></div>
2040 <p>The new markup since WoltLab Suite 3.0:</p>
2041 <div class="highlight"><pre><span></span><code><span class="p">&lt;</span><span class="nt">section</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;box&quot;</span><span class="p">&gt;</span>
2042     <span class="p">&lt;</span><span class="nt">h2</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;boxTitle&quot;</span><span class="p">&gt;</span><span class="c">&lt;!-- Title --&gt;</span><span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
2043
2044     <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;boxContent&quot;</span><span class="p">&gt;</span>
2045         <span class="c">&lt;!-- Content --&gt;</span>
2046     <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
2047 <span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>
2048 </code></pre></div>
2049 <h2 id="forms">Forms<a class="headerlink" href="#forms" title="Permanent link">#</a></h2>
2050 <p>The input tag for session ids <code>SID_INPUT_TAG</code> has been deprecated and no longer yields any content, it can be safely removed. In previous versions forms have been wrapped in <code>&lt;div class="container containerPadding marginTop"&gt;…&lt;/div&gt;</code> which no longer has any effect and should be removed.</p>
2051 <p>If you're using the preview feature for WYSIWYG-powered input fields, you need to alter the preview button include instruction:</p>
2052 <div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;messageFormPreviewButton&#39;</span> <span class="na">previewMessageObjectType</span><span class="o">=</span><span class="s1">&#39;com.example.foo.bar&#39;</span> <span class="na">previewMessageObjectID</span><span class="o">=</span><span class="m">0</span><span class="cp">}</span><span class="x"></span>
2053 </code></pre></div>
2054 <p><em>The message object id should be non-zero when editing.</em></p>
2055 <h2 id="icons">Icons<a class="headerlink" href="#icons" title="Permanent link">#</a></h2>
2056 <p>The old <code>.icon-&lt;iconName&gt;</code> classes have been removed, you are required to use the official <code>.fa-&lt;iconName&gt;</code> class names from FontAwesome. This does not affect the generic classes <code>.icon</code> (indicates an icon) and <code>.icon&lt;size&gt;</code> (e.g. <code>.icon16</code> that sets the dimensions), these are still required and have not been deprecated.</p>
2057 <p>Before:</p>
2058 <div class="highlight"><pre><span></span><code><span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;icon icon16 icon-list&quot;</span><span class="p">&gt;</span>
2059 </code></pre></div>
2060 <p>Now:</p>
2061 <div class="highlight"><pre><span></span><code><span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;icon icon16 fa-list&quot;</span><span class="p">&gt;</span>
2062 </code></pre></div>
2063 <h3 id="changed-icon-names">Changed Icon Names<a class="headerlink" href="#changed-icon-names" title="Permanent link">#</a></h3>
2064 <p>Quite a few icon names have been renamed, the official wiki lists the <a href="https://github.com/FortAwesome/Font-Awesome/wiki/Upgrading-from-3.2.1-to-4">new icon names</a> in FontAwesome 4.</p>
2065 <h2 id="changed-classes">Changed Classes<a class="headerlink" href="#changed-classes" title="Permanent link">#</a></h2>
2066 <ul>
2067 <li><code>.dataList</code> has been replaced and should now read <code>&lt;ol class="inlineList commaSeparated"&gt;</code> (same applies to <code>&lt;ul&gt;</code>)</li>
2068 <li><code>.framedIconList</code> has been changed into <code>.userAvatarList</code></li>
2069 </ul>
2070 <h2 id="removed-elements-and-classes">Removed Elements and Classes<a class="headerlink" href="#removed-elements-and-classes" title="Permanent link">#</a></h2>
2071 <ul>
2072 <li><code>&lt;nav class="jsClipboardEditor"&gt;</code> and <code>&lt;div class="jsClipboardContainer"&gt;</code> have been replaced with a floating button.</li>
2073 <li>The anchors <code>a.toTopLink</code> have been replaced with a floating button.</li>
2074 <li>Avatars should no longer receive the class <code>framed</code></li>
2075 <li>The <code>dl.condensed</code> class, as seen in the editor tab menu, is no longer required.</li>
2076 <li>Anything related to <code>sidebarCollapsed</code> has been removed as sidebars are no longer collapsible.</li>
2077 </ul>
2078 <h2 id="simple-example">Simple Example<a class="headerlink" href="#simple-example" title="Permanent link">#</a></h2>
2079 <p>The code below includes only the absolute minimum required to display a page, the content title is already included in the output.</p>
2080 <div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;header&#39;</span><span class="cp">}</span><span class="x"></span>
2081
2082 <span class="x">&lt;div class=&quot;section&quot;&gt;</span>
2083 <span class="x">    Hello World!</span>
2084 <span class="x">&lt;/div&gt;</span>
2085
2086 <span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;footer&#39;</span><span class="cp">}</span><span class="x"></span>
2087 </code></pre></div>
2088 <h2 id="full-example">Full Example<a class="headerlink" href="#full-example" title="Permanent link">#</a></h2>
2089 <div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="c">*</span>
2090 <span class="c">    The page title is automatically set using the page definition, avoid setting it if you can!</span>
2091 <span class="c">    If you really need to modify the title, you can still reference the original title with:</span>
2092 <span class="c">    {$__wcf-&gt;getActivePage()-&gt;getTitle()}</span>
2093 <span class="c">*</span><span class="cp">}</span><span class="x"></span>
2094 <span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">&#39;pageTitle&#39;</span><span class="cp">}</span><span class="x">Custom Page Title</span><span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>
2095
2096 <span class="cp">{</span><span class="c">*</span>
2097 <span class="c">    NOTICE: The content header goes here, see the section after this to learn more.</span>
2098 <span class="c">*</span><span class="cp">}</span><span class="x"></span>
2099
2100 <span class="cp">{</span><span class="c">* you must not use `headContent` for JavaScript *</span><span class="cp">}</span><span class="x"></span>
2101 <span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">&#39;headContent&#39;</span><span class="cp">}</span><span class="x"></span>
2102 <span class="x">    &lt;link rel=&quot;alternate&quot; type=&quot;application/rss+xml&quot; title=&quot;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.global.button.rss</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&quot; href=&quot;…&quot;&gt;</span>
2103 <span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>
2104
2105 <span class="cp">{</span><span class="c">* optional, content will be added to the top of the left sidebar *</span><span class="cp">}</span><span class="x"></span>
2106 <span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">&#39;sidebarLeft&#39;</span><span class="cp">}</span><span class="x"></span>
2107 <span class="x">    …</span>
2108
2109 <span class="x">    </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;boxes&#39;</span><span class="cp">}</span><span class="x"></span>
2110 <span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>
2111
2112 <span class="cp">{</span><span class="c">* optional, content will be added to the top of the right sidebar *</span><span class="cp">}</span><span class="x"></span>
2113 <span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">&#39;sidebarRight&#39;</span><span class="cp">}</span><span class="x"></span>
2114 <span class="x">    …</span>
2115
2116 <span class="x">    </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;boxes&#39;</span><span class="cp">}</span><span class="x"></span>
2117 <span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>
2118
2119 <span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">&#39;headerNavigation&#39;</span><span class="cp">}</span><span class="x"></span>
2120 <span class="x">    &lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;Custom Button&quot; class=&quot;jsTooltip&quot;&gt;&lt;span class=&quot;icon icon16 fa-check&quot;&gt;&lt;/span&gt; &lt;span class=&quot;invisible&quot;&gt;Custom Button&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;</span>
2121 <span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>
2122
2123 <span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;header&#39;</span><span class="cp">}</span><span class="x"></span>
2124
2125 <span class="cp">{</span><span class="nf">hascontent</span><span class="cp">}</span><span class="x"></span>
2126 <span class="x">    &lt;div class=&quot;paginationTop&quot;&gt;</span>
2127 <span class="x">        </span><span class="cp">{</span><span class="nf">content</span><span class="cp">}</span><span class="x"></span>
2128 <span class="x">            </span><span class="cp">{</span><span class="nf">pages</span> <span class="err">…</span><span class="cp">}</span><span class="x"></span>
2129 <span class="x">        </span><span class="cp">{</span><span class="nf">/content</span><span class="cp">}</span><span class="x"></span>
2130 <span class="x">    &lt;/div&gt;</span>
2131 <span class="cp">{</span><span class="nf">/hascontent</span><span class="cp">}</span><span class="x"></span>
2132
2133 <span class="cp">{</span><span class="c">* the actual content *</span><span class="cp">}</span><span class="x"></span>
2134 <span class="x">&lt;div class=&quot;section&quot;&gt;</span>
2135 <span class="x">    …</span>
2136 <span class="x">&lt;/div&gt;</span>
2137
2138 <span class="x">&lt;footer class=&quot;contentFooter&quot;&gt;</span>
2139 <span class="x">    </span><span class="cp">{</span><span class="c">* skip this if you&#39;re not using any pagination *</span><span class="cp">}</span><span class="x"></span>
2140 <span class="x">    </span><span class="cp">{</span><span class="nf">hascontent</span><span class="cp">}</span><span class="x"></span>
2141 <span class="x">        &lt;div class=&quot;paginationBottom&quot;&gt;</span>
2142 <span class="x">            </span><span class="cp">{</span><span class="nf">content</span><span class="cp">}{</span><span class="o">@</span><span class="nv">$pagesLinks</span><span class="cp">}{</span><span class="nf">/content</span><span class="cp">}</span><span class="x"></span>
2143 <span class="x">        &lt;/div&gt;</span>
2144 <span class="x">    </span><span class="cp">{</span><span class="nf">/hascontent</span><span class="cp">}</span><span class="x"></span>
2145
2146 <span class="x">    &lt;nav class=&quot;contentFooterNavigation&quot;&gt;</span>
2147 <span class="x">        &lt;ul&gt;</span>
2148 <span class="x">            &lt;li&gt;&lt;a href=&quot;…&quot; class=&quot;button&quot;&gt;&lt;span class=&quot;icon icon16 fa-plus&quot;&gt;&lt;/span&gt; &lt;span&gt;Custom Button&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;</span>
2149 <span class="x">            </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;contentFooterNavigation&#39;</span><span class="cp">}</span><span class="x"></span>
2150 <span class="x">        &lt;/ul&gt;</span>
2151 <span class="x">    &lt;/nav&gt;</span>
2152 <span class="x">&lt;/footer&gt;</span>
2153
2154 <span class="x">&lt;script data-relocate=&quot;true&quot;&gt;</span>
2155 <span class="x">    /* any JavaScript code you need */</span>
2156 <span class="x">&lt;/script&gt;</span>
2157
2158 <span class="cp">{</span><span class="c">* do not include `&lt;/body&gt;&lt;/html&gt;` here, the footer template is the last bit of code! *</span><span class="cp">}</span><span class="x"></span>
2159 <span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;footer&#39;</span><span class="cp">}</span><span class="x"></span>
2160 </code></pre></div>
2161 <h3 id="content-header">Content Header<a class="headerlink" href="#content-header" title="Permanent link">#</a></h3>
2162 <p>There are two different methods to set the content header, one sets only the actual values, but leaves the outer HTML untouched, that is generated by the <code>header</code> template. This is the recommended approach and you should avoid using the alternative method whenever possible.</p>
2163 <h4 id="recommended-approach">Recommended Approach<a class="headerlink" href="#recommended-approach" title="Permanent link">#</a></h4>
2164 <div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="c">* This is automatically set using the page data and should not be set manually! *</span><span class="cp">}</span><span class="x"></span>
2165 <span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">&#39;contentTitle&#39;</span><span class="cp">}</span><span class="x">Custom Content Title</span><span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>
2166
2167 <span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">&#39;contentDescription&#39;</span><span class="cp">}</span><span class="x">Optional description that is displayed right after the title.</span><span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>
2168
2169 <span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">&#39;contentHeaderNavigation&#39;</span><span class="cp">}</span><span class="x">List of navigation buttons displayed right next to the title.</span><span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>
2170 </code></pre></div>
2171 <h4 id="alternative">Alternative<a class="headerlink" href="#alternative" title="Permanent link">#</a></h4>
2172 <div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">&#39;contentHeader&#39;</span><span class="cp">}</span><span class="x"></span>
2173 <span class="x">    &lt;header class=&quot;contentHeader&quot;&gt;</span>
2174 <span class="x">        &lt;div class=&quot;contentHeaderTitle&quot;&gt;</span>
2175 <span class="x">            &lt;h1 class=&quot;contentTitle&quot;&gt;Custom Content Title&lt;/h1&gt;</span>
2176 <span class="x">            &lt;p class=&quot;contentHeaderDescription&quot;&gt;Custom Content Description&lt;/p&gt;</span>
2177 <span class="x">        &lt;/div&gt;</span>
2178
2179 <span class="x">        &lt;nav class=&quot;contentHeaderNavigation&quot;&gt;</span>
2180 <span class="x">            &lt;ul&gt;</span>
2181 <span class="x">                &lt;li&gt;&lt;a href=&quot;</span><span class="cp">{</span><span class="nf">link</span> <span class="na">controller</span><span class="o">=</span><span class="s1">&#39;CustomController&#39;</span><span class="cp">}{</span><span class="nf">/link</span><span class="cp">}</span><span class="x">&quot; class=&quot;button&quot;&gt;&lt;span class=&quot;icon icon16 fa-plus&quot;&gt;&lt;/span&gt; &lt;span&gt;Custom Button&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;</span>
2182 <span class="x">                </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;contentHeaderNavigation&#39;</span><span class="cp">}</span><span class="x"></span>
2183 <span class="x">            &lt;/ul&gt;</span>
2184 <span class="x">        &lt;/nav&gt;</span>
2185 <span class="x">    &lt;/header&gt;</span>
2186 <span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>
2187 </code></pre></div>
2188
2189
2190
2191
2192
2193
2194
2195             </article>
2196           </div>
2197         </div>
2198       </main>
2199
2200
2201 <footer class="md-footer">
2202
2203     <nav class="md-footer__inner md-grid" aria-label="Footer">
2204
2205         <a href="../php/" class="md-footer__link md-footer__link--prev" rel="prev">
2206           <div class="md-footer__button md-icon">
2207             <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>
2208           </div>
2209           <div class="md-footer__title">
2210             <div class="md-ellipsis">
2211               <span class="md-footer__direction">
2212                 Previous
2213               </span>
2214               PHP API
2215             </div>
2216           </div>
2217         </a>
2218
2219
2220         <a href="../css/" class="md-footer__link md-footer__link--next" rel="next">
2221           <div class="md-footer__title">
2222             <div class="md-ellipsis">
2223               <span class="md-footer__direction">
2224                 Next
2225               </span>
2226               CSS
2227             </div>
2228           </div>
2229           <div class="md-footer__button md-icon">
2230             <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>
2231           </div>
2232         </a>
2233
2234     </nav>
2235
2236   <div class="md-footer-meta md-typeset">
2237     <div class="md-footer-meta__inner md-grid">
2238       <div class="md-footer-copyright">
2239
2240           <div class="md-footer-copyright__highlight">
2241             Copyright © 2020 WoltLab GmbH
2242           </div>
2243
2244         Made with
2245         <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
2246           Material for MkDocs
2247         </a>
2248
2249       </div>
2250       <div class="md-footer-copyright">
2251         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
2252         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
2253 </div>
2254     </div>
2255   </div>
2256 </footer>
2257
2258     </div>
2259     <div class="md-dialog" data-md-component="dialog">
2260       <div class="md-dialog__inner md-typeset"></div>
2261     </div>
2262     <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>
2263
2264
2265       <script src="../../../assets/javascripts/bundle.5cf3e710.min.js"></script>
2266
2267
2268   </body>
2269 </html>