5.4/view/css/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="canonical" href="https://docs.woltlab.com/5.4/view/css/">
  13
  14       <link rel="icon" href="../../assets/default.favicon.ico">
  15       <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-7.1.2">
  16
  17
  18
  19         <title>CSS - WoltLab Suite Documentation</title>
  20
  21
  22
  23       <link rel="stylesheet" href="../../assets/stylesheets/main.6f955dcd.min.css">
  24
  25
  26         <link rel="stylesheet" href="../../assets/stylesheets/palette.ef6f36e2.min.css">
  27
  28
  29
  30           <meta name="theme-color" content="#009485">
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40       <link rel="stylesheet" href="../../stylesheets/extra.css">
  41
  42
  43
  44
  45
  46   </head>
  47
  48
  49
  50
  51
  52
  53
  54     <body dir="ltr" data-md-color-scheme="" data-md-color-primary="teal" data-md-color-accent="">
  55
  56
  57     <script>function __prefix(e){return new URL("../..",location).pathname+"."+e}function __get(e,t=localStorage){return JSON.parse(t.getItem(__prefix(e)))}</script>
  58
  59     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
  60     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
  61     <label class="md-overlay" for="__drawer"></label>
  62     <div data-md-component="skip">
  63
  64
  65         <a href="#css" class="md-skip">
  66           Skip to content
  67         </a>
  68
  69     </div>
  70     <div data-md-component="announce">
  71
  72         <aside class="md-announce">
  73           <div class="md-announce__inner md-grid md-typeset">
  74
  75     <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>
  76
  77           </div>
  78         </aside>
  79
  80     </div>
  81
  82       <header class="md-header" data-md-component="header">
  83   <nav class="md-header__inner md-grid" aria-label="Header">
  84     <a href="../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
  85
  86   <img src="../../assets/logo.png" alt="logo">
  87
  88     </a>
  89     <label class="md-header__button md-icon" for="__drawer">
  90       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
  91     </label>
  92     <div class="md-header__title" data-md-component="header-title">
  93       <div class="md-header__ellipsis">
  94         <div class="md-header__topic">
  95           <span class="md-ellipsis">
  96             WoltLab Suite Documentation
  97           </span>
  98         </div>
  99         <div class="md-header__topic" data-md-component="header-topic">
 100           <span class="md-ellipsis">
 101
 102               CSS
 103
 104           </span>
 105         </div>
 106       </div>
 107     </div>
 108
 109
 110
 111       <label class="md-header__button md-icon" for="__search">
 112         <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>
 113       </label>
 114
 115 <div class="md-search" data-md-component="search" role="dialog">
 116   <label class="md-search__overlay" for="__search"></label>
 117   <div class="md-search__inner" role="search">
 118     <form class="md-search__form" name="search">
 119       <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>
 120       <label class="md-search__icon md-icon" for="__search">
 121         <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>
 122         <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       </label>
 124       <button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
 125         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.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>
 126       </button>
 127     </form>
 128     <div class="md-search__output">
 129       <div class="md-search__scrollwrap" data-md-scrollfix>
 130         <div class="md-search-result" data-md-component="search-result">
 131           <div class="md-search-result__meta">
 132             Initializing search
 133           </div>
 134           <ol class="md-search-result__list"></ol>
 135         </div>
 136       </div>
 137     </div>
 138   </div>
 139 </div>
 140
 141
 142       <div class="md-header__source">
 143
 144 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 145   <div class="md-source__icon md-icon">
 146
 147     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 148   </div>
 149   <div class="md-source__repository">
 150     GitHub
 151   </div>
 152 </a>
 153       </div>
 154
 155   </nav>
 156 </header>
 157
 158     <div class="md-container" data-md-component="container">
 159
 160
 161
 162
 163       <main class="md-main" data-md-component="main">
 164         <div class="md-main__inner md-grid">
 165
 166
 167
 168               <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
 169                 <div class="md-sidebar__scrollwrap">
 170                   <div class="md-sidebar__inner">
 171
 172
 173
 174 <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
 175   <label class="md-nav__title" for="__drawer">
 176     <a href="../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
 177
 178   <img src="../../assets/logo.png" alt="logo">
 179
 180     </a>
 181     WoltLab Suite Documentation
 182   </label>
 183
 184     <div class="md-nav__source">
 185
 186 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 187   <div class="md-source__icon md-icon">
 188
 189     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 190   </div>
 191   <div class="md-source__repository">
 192     GitHub
 193   </div>
 194 </a>
 195     </div>
 196
 197   <ul class="md-nav__list" data-md-scrollfix>
 198
 199
 200
 201
 202
 203
 204
 205
 206     <li class="md-nav__item">
 207       <a href="../../getting-started/" class="md-nav__link">
 208         Getting Started
 209       </a>
 210     </li>
 211
 212
 213
 214
 215
 216
 217
 218
 219
 220
 221
 222     <li class="md-nav__item md-nav__item--nested">
 223
 224
 225         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
 226
 227       <label class="md-nav__link" for="__nav_2">
 228         PHP API
 229         <span class="md-nav__icon md-icon"></span>
 230       </label>
 231       <nav class="md-nav" aria-label="PHP API" data-md-level="1">
 232         <label class="md-nav__title" for="__nav_2">
 233           <span class="md-nav__icon md-icon"></span>
 234           PHP API
 235         </label>
 236         <ul class="md-nav__list" data-md-scrollfix>
 237
 238
 239
 240
 241
 242     <li class="md-nav__item">
 243       <a href="../../php/pages/" class="md-nav__link">
 244         Pages
 245       </a>
 246     </li>
 247
 248
 249
 250
 251
 252
 253
 254     <li class="md-nav__item">
 255       <a href="../../php/database-objects/" class="md-nav__link">
 256         Database Objects
 257       </a>
 258     </li>
 259
 260
 261
 262
 263
 264
 265
 266     <li class="md-nav__item">
 267       <a href="../../php/database-access/" class="md-nav__link">
 268         Database Access
 269       </a>
 270     </li>
 271
 272
 273
 274
 275
 276
 277
 278     <li class="md-nav__item">
 279       <a href="../../php/exceptions/" class="md-nav__link">
 280         Exceptions
 281       </a>
 282     </li>
 283
 284
 285
 286
 287
 288
 289
 290
 291     <li class="md-nav__item md-nav__item--nested">
 292
 293
 294         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5" type="checkbox" id="__nav_2_5" >
 295
 296       <label class="md-nav__link" for="__nav_2_5">
 297         API
 298         <span class="md-nav__icon md-icon"></span>
 299       </label>
 300       <nav class="md-nav" aria-label="API" data-md-level="2">
 301         <label class="md-nav__title" for="__nav_2_5">
 302           <span class="md-nav__icon md-icon"></span>
 303           API
 304         </label>
 305         <ul class="md-nav__list" data-md-scrollfix>
 306
 307
 308
 309
 310
 311
 312     <li class="md-nav__item md-nav__item--nested">
 313
 314
 315         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_1" type="checkbox" id="__nav_2_5_1" >
 316
 317       <label class="md-nav__link" for="__nav_2_5_1">
 318         Caches
 319         <span class="md-nav__icon md-icon"></span>
 320       </label>
 321       <nav class="md-nav" aria-label="Caches" data-md-level="3">
 322         <label class="md-nav__title" for="__nav_2_5_1">
 323           <span class="md-nav__icon md-icon"></span>
 324           Caches
 325         </label>
 326         <ul class="md-nav__list" data-md-scrollfix>
 327
 328
 329
 330
 331
 332     <li class="md-nav__item">
 333       <a href="../../php/api/caches/" class="md-nav__link">
 334         Overview
 335       </a>
 336     </li>
 337
 338
 339
 340
 341
 342
 343
 344     <li class="md-nav__item">
 345       <a href="../../php/api/caches_persistent-caches/" class="md-nav__link">
 346         Persistent Caches
 347       </a>
 348     </li>
 349
 350
 351
 352
 353
 354
 355
 356     <li class="md-nav__item">
 357       <a href="../../php/api/caches_runtime-caches/" class="md-nav__link">
 358         Runtime Caches
 359       </a>
 360     </li>
 361
 362
 363
 364         </ul>
 365       </nav>
 366     </li>
 367
 368
 369
 370
 371
 372
 373
 374     <li class="md-nav__item">
 375       <a href="../../php/api/comments/" class="md-nav__link">
 376         Comments
 377       </a>
 378     </li>
 379
 380
 381
 382
 383
 384
 385
 386     <li class="md-nav__item">
 387       <a href="../../php/api/cronjobs/" class="md-nav__link">
 388         Cronjobs
 389       </a>
 390     </li>
 391
 392
 393
 394
 395
 396
 397
 398     <li class="md-nav__item">
 399       <a href="../../php/api/events/" class="md-nav__link">
 400         Events
 401       </a>
 402     </li>
 403
 404
 405
 406
 407
 408
 409
 410
 411     <li class="md-nav__item md-nav__item--nested">
 412
 413
 414         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_5" type="checkbox" id="__nav_2_5_5" >
 415
 416       <label class="md-nav__link" for="__nav_2_5_5">
 417         Form Builder
 418         <span class="md-nav__icon md-icon"></span>
 419       </label>
 420       <nav class="md-nav" aria-label="Form Builder" data-md-level="3">
 421         <label class="md-nav__title" for="__nav_2_5_5">
 422           <span class="md-nav__icon md-icon"></span>
 423           Form Builder
 424         </label>
 425         <ul class="md-nav__list" data-md-scrollfix>
 426
 427
 428
 429
 430
 431     <li class="md-nav__item">
 432       <a href="../../php/api/form_builder/overview/" class="md-nav__link">
 433         Overview
 434       </a>
 435     </li>
 436
 437
 438
 439
 440
 441
 442
 443     <li class="md-nav__item">
 444       <a href="../../php/api/form_builder/structure/" class="md-nav__link">
 445         Structure
 446       </a>
 447     </li>
 448
 449
 450
 451
 452
 453
 454
 455     <li class="md-nav__item">
 456       <a href="../../php/api/form_builder/form_fields/" class="md-nav__link">
 457         Fields
 458       </a>
 459     </li>
 460
 461
 462
 463
 464
 465
 466
 467     <li class="md-nav__item">
 468       <a href="../../php/api/form_builder/validation_data/" class="md-nav__link">
 469         Validation and Data
 470       </a>
 471     </li>
 472
 473
 474
 475
 476
 477
 478
 479     <li class="md-nav__item">
 480       <a href="../../php/api/form_builder/dependencies/" class="md-nav__link">
 481         Dependencies
 482       </a>
 483     </li>
 484
 485
 486
 487         </ul>
 488       </nav>
 489     </li>
 490
 491
 492
 493
 494
 495
 496
 497     <li class="md-nav__item">
 498       <a href="../../php/api/package_installation_plugins/" class="md-nav__link">
 499         Package Installation Plugins
 500       </a>
 501     </li>
 502
 503
 504
 505
 506
 507
 508
 509     <li class="md-nav__item">
 510       <a href="../../php/api/user_activity_points/" class="md-nav__link">
 511         User Activity Points
 512       </a>
 513     </li>
 514
 515
 516
 517
 518
 519
 520
 521     <li class="md-nav__item">
 522       <a href="../../php/api/user_notifications/" class="md-nav__link">
 523         User Notifications
 524       </a>
 525     </li>
 526
 527
 528
 529
 530
 531
 532
 533     <li class="md-nav__item">
 534       <a href="../../php/api/sitemaps/" class="md-nav__link">
 535         Sitemaps
 536       </a>
 537     </li>
 538
 539
 540
 541         </ul>
 542       </nav>
 543     </li>
 544
 545
 546
 547
 548
 549
 550
 551     <li class="md-nav__item">
 552       <a href="../../php/code-style/" class="md-nav__link">
 553         Code Style
 554       </a>
 555     </li>
 556
 557
 558
 559
 560
 561
 562
 563     <li class="md-nav__item">
 564       <a href="../../php/apps/" class="md-nav__link">
 565         Apps
 566       </a>
 567     </li>
 568
 569
 570
 571
 572
 573
 574
 575     <li class="md-nav__item">
 576       <a href="../../php/gdpr/" class="md-nav__link">
 577         GDPR
 578       </a>
 579     </li>
 580
 581
 582
 583         </ul>
 584       </nav>
 585     </li>
 586
 587
 588
 589
 590
 591
 592
 593
 594
 595
 596
 597
 598
 599     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 600
 601
 602         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" checked>
 603
 604       <label class="md-nav__link" for="__nav_3">
 605         Languages, Templates & CSS
 606         <span class="md-nav__icon md-icon"></span>
 607       </label>
 608       <nav class="md-nav" aria-label="Languages, Templates & CSS" data-md-level="1">
 609         <label class="md-nav__title" for="__nav_3">
 610           <span class="md-nav__icon md-icon"></span>
 611           Languages, Templates & CSS
 612         </label>
 613         <ul class="md-nav__list" data-md-scrollfix>
 614
 615
 616
 617
 618
 619     <li class="md-nav__item">
 620       <a href="../languages/" class="md-nav__link">
 621         Languages
 622       </a>
 623     </li>
 624
 625
 626
 627
 628
 629
 630
 631     <li class="md-nav__item">
 632       <a href="../templates/" class="md-nav__link">
 633         Templates
 634       </a>
 635     </li>
 636
 637
 638
 639
 640
 641
 642
 643     <li class="md-nav__item">
 644       <a href="../template-plugins/" class="md-nav__link">
 645         Template Plugins
 646       </a>
 647     </li>
 648
 649
 650
 651
 652
 653
 654
 655
 656
 657     <li class="md-nav__item md-nav__item--active">
 658
 659       <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
 660
 661
 662
 663
 664
 665         <label class="md-nav__link md-nav__link--active" for="__toc">
 666           CSS
 667           <span class="md-nav__icon md-icon"></span>
 668         </label>
 669
 670       <a href="./" class="md-nav__link md-nav__link--active">
 671         CSS
 672       </a>
 673
 674
 675 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
 676
 677
 678
 679
 680
 681
 682     <label class="md-nav__title" for="__toc">
 683       <span class="md-nav__icon md-icon"></span>
 684       Table of contents
 685     </label>
 686     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
 687
 688         <li class="md-nav__item">
 689   <a href="#scss-and-css" class="md-nav__link">
 690     SCSS and CSS
 691   </a>
 692
 693     <nav class="md-nav" aria-label="SCSS and CSS">
 694       <ul class="md-nav__list">
 695
 696           <li class="md-nav__item">
 697   <a href="#file-location" class="md-nav__link">
 698     File Location
 699   </a>
 700
 701 </li>
 702
 703           <li class="md-nav__item">
 704   <a href="#variables" class="md-nav__link">
 705     Variables
 706   </a>
 707
 708     <nav class="md-nav" aria-label="Variables">
 709       <ul class="md-nav__list">
 710
 711           <li class="md-nav__item">
 712   <a href="#linking-images" class="md-nav__link">
 713     Linking images
 714   </a>
 715
 716 </li>
 717
 718       </ul>
 719     </nav>
 720
 721 </li>
 722
 723       </ul>
 724     </nav>
 725
 726 </li>
 727
 728         <li class="md-nav__item">
 729   <a href="#media-breakpoints" class="md-nav__link">
 730     Media Breakpoints
 731   </a>
 732
 733     <nav class="md-nav" aria-label="Media Breakpoints">
 734       <ul class="md-nav__list">
 735
 736           <li class="md-nav__item">
 737   <a href="#available-breakpoints" class="md-nav__link">
 738     Available Breakpoints
 739   </a>
 740
 741 </li>
 742
 743       </ul>
 744     </nav>
 745
 746 </li>
 747
 748         <li class="md-nav__item">
 749   <a href="#asset-preloading" class="md-nav__link">
 750     Asset Preloading
 751   </a>
 752
 753 </li>
 754
 755     </ul>
 756
 757 </nav>
 758
 759     </li>
 760
 761
 762
 763         </ul>
 764       </nav>
 765     </li>
 766
 767
 768
 769
 770
 771
 772
 773
 774
 775
 776
 777     <li class="md-nav__item md-nav__item--nested">
 778
 779
 780         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" >
 781
 782       <label class="md-nav__link" for="__nav_4">
 783         TypeScript and JavaScript API
 784         <span class="md-nav__icon md-icon"></span>
 785       </label>
 786       <nav class="md-nav" aria-label="TypeScript and JavaScript API" data-md-level="1">
 787         <label class="md-nav__title" for="__nav_4">
 788           <span class="md-nav__icon md-icon"></span>
 789           TypeScript and JavaScript API
 790         </label>
 791         <ul class="md-nav__list" data-md-scrollfix>
 792
 793
 794
 795
 796
 797     <li class="md-nav__item">
 798       <a href="../../javascript/general-usage/" class="md-nav__link">
 799         General Usage
 800       </a>
 801     </li>
 802
 803
 804
 805
 806
 807
 808
 809     <li class="md-nav__item">
 810       <a href="../../javascript/typescript/" class="md-nav__link">
 811         TypeScript
 812       </a>
 813     </li>
 814
 815
 816
 817
 818
 819
 820
 821
 822     <li class="md-nav__item md-nav__item--nested">
 823
 824
 825         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_3" type="checkbox" id="__nav_4_3" >
 826
 827       <label class="md-nav__link" for="__nav_4_3">
 828         New API
 829         <span class="md-nav__icon md-icon"></span>
 830       </label>
 831       <nav class="md-nav" aria-label="New API" data-md-level="2">
 832         <label class="md-nav__title" for="__nav_4_3">
 833           <span class="md-nav__icon md-icon"></span>
 834           New API
 835         </label>
 836         <ul class="md-nav__list" data-md-scrollfix>
 837
 838
 839
 840
 841
 842     <li class="md-nav__item">
 843       <a href="../../javascript/new-api_writing-a-module/" class="md-nav__link">
 844         Writing a module
 845       </a>
 846     </li>
 847
 848
 849
 850
 851
 852
 853
 854     <li class="md-nav__item">
 855       <a href="../../javascript/new-api_data-structures/" class="md-nav__link">
 856         Data Structures
 857       </a>
 858     </li>
 859
 860
 861
 862
 863
 864
 865
 866     <li class="md-nav__item">
 867       <a href="../../javascript/new-api_core/" class="md-nav__link">
 868         Core Functions
 869       </a>
 870     </li>
 871
 872
 873
 874
 875
 876
 877
 878     <li class="md-nav__item">
 879       <a href="../../javascript/new-api_dom/" class="md-nav__link">
 880         DOM
 881       </a>
 882     </li>
 883
 884
 885
 886
 887
 888
 889
 890     <li class="md-nav__item">
 891       <a href="../../javascript/new-api_events/" class="md-nav__link">
 892         Event Handling
 893       </a>
 894     </li>
 895
 896
 897
 898
 899
 900
 901
 902     <li class="md-nav__item">
 903       <a href="../../javascript/new-api_ajax/" class="md-nav__link">
 904         Ajax
 905       </a>
 906     </li>
 907
 908
 909
 910
 911
 912
 913
 914     <li class="md-nav__item">
 915       <a href="../../javascript/new-api_dialogs/" class="md-nav__link">
 916         Dialogs
 917       </a>
 918     </li>
 919
 920
 921
 922
 923
 924
 925
 926     <li class="md-nav__item">
 927       <a href="../../javascript/new-api_browser/" class="md-nav__link">
 928         Browser and Screen Sizes
 929       </a>
 930     </li>
 931
 932
 933
 934
 935
 936
 937
 938     <li class="md-nav__item">
 939       <a href="../../javascript/new-api_ui/" class="md-nav__link">
 940         User Interface
 941       </a>
 942     </li>
 943
 944
 945
 946         </ul>
 947       </nav>
 948     </li>
 949
 950
 951
 952
 953
 954
 955
 956     <li class="md-nav__item">
 957       <a href="../../javascript/legacy-api/" class="md-nav__link">
 958         Legacy API
 959       </a>
 960     </li>
 961
 962
 963
 964
 965
 966
 967
 968     <li class="md-nav__item">
 969       <a href="../../javascript/helper-functions/" class="md-nav__link">
 970         Helper Functions
 971       </a>
 972     </li>
 973
 974
 975
 976
 977
 978
 979
 980     <li class="md-nav__item">
 981       <a href="../../javascript/code-snippets/" class="md-nav__link">
 982         Code Snippets
 983       </a>
 984     </li>
 985
 986
 987
 988         </ul>
 989       </nav>
 990     </li>
 991
 992
 993
 994
 995
 996
 997
 998
 999
1000
1001
1002     <li class="md-nav__item md-nav__item--nested">
1003
1004
1005         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
1006
1007       <label class="md-nav__link" for="__nav_5">
1008         Package Components
1009         <span class="md-nav__icon md-icon"></span>
1010       </label>
1011       <nav class="md-nav" aria-label="Package Components" data-md-level="1">
1012         <label class="md-nav__title" for="__nav_5">
1013           <span class="md-nav__icon md-icon"></span>
1014           Package Components
1015         </label>
1016         <ul class="md-nav__list" data-md-scrollfix>
1017
1018
1019
1020
1021
1022     <li class="md-nav__item">
1023       <a href="../../package/package-xml/" class="md-nav__link">
1024         package.xml
1025       </a>
1026     </li>
1027
1028
1029
1030
1031
1032
1033
1034
1035     <li class="md-nav__item md-nav__item--nested">
1036
1037
1038         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
1039
1040       <label class="md-nav__link" for="__nav_5_2">
1041         PIPs
1042         <span class="md-nav__icon md-icon"></span>
1043       </label>
1044       <nav class="md-nav" aria-label="PIPs" data-md-level="2">
1045         <label class="md-nav__title" for="__nav_5_2">
1046           <span class="md-nav__icon md-icon"></span>
1047           PIPs
1048         </label>
1049         <ul class="md-nav__list" data-md-scrollfix>
1050
1051
1052
1053
1054
1055     <li class="md-nav__item">
1056       <a href="../../package/pip/" class="md-nav__link">
1057         Overview
1058       </a>
1059     </li>
1060
1061
1062
1063
1064
1065
1066
1067     <li class="md-nav__item">
1068       <a href="../../package/pip/acl-option/" class="md-nav__link">
1069         aclOption
1070       </a>
1071     </li>
1072
1073
1074
1075
1076
1077
1078
1079     <li class="md-nav__item">
1080       <a href="../../package/pip/acp-menu/" class="md-nav__link">
1081         acpMenu
1082       </a>
1083     </li>
1084
1085
1086
1087
1088
1089
1090
1091     <li class="md-nav__item">
1092       <a href="../../package/pip/acp-search-provider/" class="md-nav__link">
1093         acpSearchProvider
1094       </a>
1095     </li>
1096
1097
1098
1099
1100
1101
1102
1103     <li class="md-nav__item">
1104       <a href="../../package/pip/acp-template/" class="md-nav__link">
1105         acpTemplate
1106       </a>
1107     </li>
1108
1109
1110
1111
1112
1113
1114
1115     <li class="md-nav__item">
1116       <a href="../../package/pip/bbcode/" class="md-nav__link">
1117         bbcode
1118       </a>
1119     </li>
1120
1121
1122
1123
1124
1125
1126
1127     <li class="md-nav__item">
1128       <a href="../../package/pip/box/" class="md-nav__link">
1129         box
1130       </a>
1131     </li>
1132
1133
1134
1135
1136
1137
1138
1139     <li class="md-nav__item">
1140       <a href="../../package/pip/clipboard-action/" class="md-nav__link">
1141         clipboardAction
1142       </a>
1143     </li>
1144
1145
1146
1147
1148
1149
1150
1151     <li class="md-nav__item">
1152       <a href="../../package/pip/core-object/" class="md-nav__link">
1153         coreObject
1154       </a>
1155     </li>
1156
1157
1158
1159
1160
1161
1162
1163     <li class="md-nav__item">
1164       <a href="../../package/pip/cronjob/" class="md-nav__link">
1165         cronjob
1166       </a>
1167     </li>
1168
1169
1170
1171
1172
1173
1174
1175     <li class="md-nav__item">
1176       <a href="../../package/pip/database/" class="md-nav__link">
1177         database
1178       </a>
1179     </li>
1180
1181
1182
1183
1184
1185
1186
1187     <li class="md-nav__item">
1188       <a href="../../package/pip/event-listener/" class="md-nav__link">
1189         eventListener
1190       </a>
1191     </li>
1192
1193
1194
1195
1196
1197
1198
1199     <li class="md-nav__item">
1200       <a href="../../package/pip/file/" class="md-nav__link">
1201         file
1202       </a>
1203     </li>
1204
1205
1206
1207
1208
1209
1210
1211     <li class="md-nav__item">
1212       <a href="../../package/pip/language/" class="md-nav__link">
1213         language
1214       </a>
1215     </li>
1216
1217
1218
1219
1220
1221
1222
1223     <li class="md-nav__item">
1224       <a href="../../package/pip/media-provider/" class="md-nav__link">
1225         mediaProvider
1226       </a>
1227     </li>
1228
1229
1230
1231
1232
1233
1234
1235     <li class="md-nav__item">
1236       <a href="../../package/pip/menu/" class="md-nav__link">
1237         menu
1238       </a>
1239     </li>
1240
1241
1242
1243
1244
1245
1246
1247     <li class="md-nav__item">
1248       <a href="../../package/pip/menu-item/" class="md-nav__link">
1249         menuItem
1250       </a>
1251     </li>
1252
1253
1254
1255
1256
1257
1258
1259     <li class="md-nav__item">
1260       <a href="../../package/pip/object-type/" class="md-nav__link">
1261         objectType
1262       </a>
1263     </li>
1264
1265
1266
1267
1268
1269
1270
1271     <li class="md-nav__item">
1272       <a href="../../package/pip/object-type-definition/" class="md-nav__link">
1273         objectTypeDefinition
1274       </a>
1275     </li>
1276
1277
1278
1279
1280
1281
1282
1283     <li class="md-nav__item">
1284       <a href="../../package/pip/option/" class="md-nav__link">
1285         option
1286       </a>
1287     </li>
1288
1289
1290
1291
1292
1293
1294
1295     <li class="md-nav__item">
1296       <a href="../../package/pip/page/" class="md-nav__link">
1297         page
1298       </a>
1299     </li>
1300
1301
1302
1303
1304
1305
1306
1307     <li class="md-nav__item">
1308       <a href="../../package/pip/pip/" class="md-nav__link">
1309         pip
1310       </a>
1311     </li>
1312
1313
1314
1315
1316
1317
1318
1319     <li class="md-nav__item">
1320       <a href="../../package/pip/script/" class="md-nav__link">
1321         script
1322       </a>
1323     </li>
1324
1325
1326
1327
1328
1329
1330
1331     <li class="md-nav__item">
1332       <a href="../../package/pip/smiley/" class="md-nav__link">
1333         smiley
1334       </a>
1335     </li>
1336
1337
1338
1339
1340
1341
1342
1343     <li class="md-nav__item">
1344       <a href="../../package/pip/sql/" class="md-nav__link">
1345         sql
1346       </a>
1347     </li>
1348
1349
1350
1351
1352
1353
1354
1355     <li class="md-nav__item">
1356       <a href="../../package/pip/style/" class="md-nav__link">
1357         style
1358       </a>
1359     </li>
1360
1361
1362
1363
1364
1365
1366
1367     <li class="md-nav__item">
1368       <a href="../../package/pip/template/" class="md-nav__link">
1369         template
1370       </a>
1371     </li>
1372
1373
1374
1375
1376
1377
1378
1379     <li class="md-nav__item">
1380       <a href="../../package/pip/template-listener/" class="md-nav__link">
1381         templateListener
1382       </a>
1383     </li>
1384
1385
1386
1387
1388
1389
1390
1391     <li class="md-nav__item">
1392       <a href="../../package/pip/user-group-option/" class="md-nav__link">
1393         userGroupOption
1394       </a>
1395     </li>
1396
1397
1398
1399
1400
1401
1402
1403     <li class="md-nav__item">
1404       <a href="../../package/pip/user-menu/" class="md-nav__link">
1405         userMenu
1406       </a>
1407     </li>
1408
1409
1410
1411
1412
1413
1414
1415     <li class="md-nav__item">
1416       <a href="../../package/pip/user-notification-event/" class="md-nav__link">
1417         userNotificationEvent
1418       </a>
1419     </li>
1420
1421
1422
1423
1424
1425
1426
1427     <li class="md-nav__item">
1428       <a href="../../package/pip/user-option/" class="md-nav__link">
1429         userOption
1430       </a>
1431     </li>
1432
1433
1434
1435
1436
1437
1438
1439     <li class="md-nav__item">
1440       <a href="../../package/pip/user-profile-menu/" class="md-nav__link">
1441         userProfileMenu
1442       </a>
1443     </li>
1444
1445
1446
1447         </ul>
1448       </nav>
1449     </li>
1450
1451
1452
1453
1454
1455
1456
1457     <li class="md-nav__item">
1458       <a href="../../package/database-php-api/" class="md-nav__link">
1459         Database PHP API
1460       </a>
1461     </li>
1462
1463
1464
1465         </ul>
1466       </nav>
1467     </li>
1468
1469
1470
1471
1472
1473
1474
1475
1476
1477
1478
1479     <li class="md-nav__item md-nav__item--nested">
1480
1481
1482         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
1483
1484       <label class="md-nav__link" for="__nav_6">
1485         Migration
1486         <span class="md-nav__icon md-icon"></span>
1487       </label>
1488       <nav class="md-nav" aria-label="Migration" data-md-level="1">
1489         <label class="md-nav__title" for="__nav_6">
1490           <span class="md-nav__icon md-icon"></span>
1491           Migration
1492         </label>
1493         <ul class="md-nav__list" data-md-scrollfix>
1494
1495
1496
1497
1498
1499
1500     <li class="md-nav__item md-nav__item--nested">
1501
1502
1503         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
1504
1505       <label class="md-nav__link" for="__nav_6_1">
1506         Migrating from WSC 5.3
1507         <span class="md-nav__icon md-icon"></span>
1508       </label>
1509       <nav class="md-nav" aria-label="Migrating from WSC 5.3" data-md-level="2">
1510         <label class="md-nav__title" for="__nav_6_1">
1511           <span class="md-nav__icon md-icon"></span>
1512           Migrating from WSC 5.3
1513         </label>
1514         <ul class="md-nav__list" data-md-scrollfix>
1515
1516
1517
1518
1519
1520     <li class="md-nav__item">
1521       <a href="../../migration/wsc53/php/" class="md-nav__link">
1522         PHP API
1523       </a>
1524     </li>
1525
1526
1527
1528
1529
1530
1531
1532     <li class="md-nav__item">
1533       <a href="../../migration/wsc53/session/" class="md-nav__link">
1534         Session Handling and Authentication
1535       </a>
1536     </li>
1537
1538
1539
1540
1541
1542
1543
1544     <li class="md-nav__item">
1545       <a href="../../migration/wsc53/javascript/" class="md-nav__link">
1546         TypeScript and JavaScript
1547       </a>
1548     </li>
1549
1550
1551
1552
1553
1554
1555
1556     <li class="md-nav__item">
1557       <a href="../../migration/wsc53/templates/" class="md-nav__link">
1558         Templates
1559       </a>
1560     </li>
1561
1562
1563
1564
1565
1566
1567
1568     <li class="md-nav__item">
1569       <a href="../../migration/wsc53/libraries/" class="md-nav__link">
1570         Third Party Libraries
1571       </a>
1572     </li>
1573
1574
1575
1576         </ul>
1577       </nav>
1578     </li>
1579
1580
1581
1582
1583
1584
1585
1586
1587     <li class="md-nav__item md-nav__item--nested">
1588
1589
1590         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
1591
1592       <label class="md-nav__link" for="__nav_6_2">
1593         Migrating from WSC 5.2
1594         <span class="md-nav__icon md-icon"></span>
1595       </label>
1596       <nav class="md-nav" aria-label="Migrating from WSC 5.2" data-md-level="2">
1597         <label class="md-nav__title" for="__nav_6_2">
1598           <span class="md-nav__icon md-icon"></span>
1599           Migrating from WSC 5.2
1600         </label>
1601         <ul class="md-nav__list" data-md-scrollfix>
1602
1603
1604
1605
1606
1607     <li class="md-nav__item">
1608       <a href="../../migration/wsc52/php/" class="md-nav__link">
1609         PHP API
1610       </a>
1611     </li>
1612
1613
1614
1615
1616
1617
1618
1619     <li class="md-nav__item">
1620       <a href="../../migration/wsc52/templates/" class="md-nav__link">
1621         Templates and Languages
1622       </a>
1623     </li>
1624
1625
1626
1627
1628
1629
1630
1631     <li class="md-nav__item">
1632       <a href="../../migration/wsc52/libraries/" class="md-nav__link">
1633         Third Party Libraries
1634       </a>
1635     </li>
1636
1637
1638
1639         </ul>
1640       </nav>
1641     </li>
1642
1643
1644
1645
1646
1647
1648
1649
1650     <li class="md-nav__item md-nav__item--nested">
1651
1652
1653         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
1654
1655       <label class="md-nav__link" for="__nav_6_3">
1656         Migrating from WSC 3.1
1657         <span class="md-nav__icon md-icon"></span>
1658       </label>
1659       <nav class="md-nav" aria-label="Migrating from WSC 3.1" data-md-level="2">
1660         <label class="md-nav__title" for="__nav_6_3">
1661           <span class="md-nav__icon md-icon"></span>
1662           Migrating from WSC 3.1
1663         </label>
1664         <ul class="md-nav__list" data-md-scrollfix>
1665
1666
1667
1668
1669
1670     <li class="md-nav__item">
1671       <a href="../../migration/wsc31/php/" class="md-nav__link">
1672         PHP API
1673       </a>
1674     </li>
1675
1676
1677
1678         </ul>
1679       </nav>
1680     </li>
1681
1682
1683
1684
1685
1686
1687
1688
1689     <li class="md-nav__item md-nav__item--nested">
1690
1691
1692         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
1693
1694       <label class="md-nav__link" for="__nav_6_4">
1695         Migrating from WSC 3.0
1696         <span class="md-nav__icon md-icon"></span>
1697       </label>
1698       <nav class="md-nav" aria-label="Migrating from WSC 3.0" data-md-level="2">
1699         <label class="md-nav__title" for="__nav_6_4">
1700           <span class="md-nav__icon md-icon"></span>
1701           Migrating from WSC 3.0
1702         </label>
1703         <ul class="md-nav__list" data-md-scrollfix>
1704
1705
1706
1707
1708
1709     <li class="md-nav__item">
1710       <a href="../../migration/wsc30/php/" class="md-nav__link">
1711         PHP API
1712       </a>
1713     </li>
1714
1715
1716
1717
1718
1719
1720
1721     <li class="md-nav__item">
1722       <a href="../../migration/wsc30/javascript/" class="md-nav__link">
1723         JavaScript API
1724       </a>
1725     </li>
1726
1727
1728
1729
1730
1731
1732
1733     <li class="md-nav__item">
1734       <a href="../../migration/wsc30/templates/" class="md-nav__link">
1735         Templates
1736       </a>
1737     </li>
1738
1739
1740
1741
1742
1743
1744
1745     <li class="md-nav__item">
1746       <a href="../../migration/wsc30/css/" class="md-nav__link">
1747         CSS
1748       </a>
1749     </li>
1750
1751
1752
1753
1754
1755
1756
1757     <li class="md-nav__item">
1758       <a href="../../migration/wsc30/package/" class="md-nav__link">
1759         Package Components
1760       </a>
1761     </li>
1762
1763
1764
1765         </ul>
1766       </nav>
1767     </li>
1768
1769
1770
1771
1772
1773
1774
1775
1776     <li class="md-nav__item md-nav__item--nested">
1777
1778
1779         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
1780
1781       <label class="md-nav__link" for="__nav_6_5">
1782         Migrating from WCF 2.1
1783         <span class="md-nav__icon md-icon"></span>
1784       </label>
1785       <nav class="md-nav" aria-label="Migrating from WCF 2.1" data-md-level="2">
1786         <label class="md-nav__title" for="__nav_6_5">
1787           <span class="md-nav__icon md-icon"></span>
1788           Migrating from WCF 2.1
1789         </label>
1790         <ul class="md-nav__list" data-md-scrollfix>
1791
1792
1793
1794
1795
1796     <li class="md-nav__item">
1797       <a href="../../migration/wcf21/php/" class="md-nav__link">
1798         PHP API
1799       </a>
1800     </li>
1801
1802
1803
1804
1805
1806
1807
1808     <li class="md-nav__item">
1809       <a href="../../migration/wcf21/templates/" class="md-nav__link">
1810         Templates
1811       </a>
1812     </li>
1813
1814
1815
1816
1817
1818
1819
1820     <li class="md-nav__item">
1821       <a href="../../migration/wcf21/css/" class="md-nav__link">
1822         CSS
1823       </a>
1824     </li>
1825
1826
1827
1828
1829
1830
1831
1832     <li class="md-nav__item">
1833       <a href="../../migration/wcf21/package/" class="md-nav__link">
1834         Package Components
1835       </a>
1836     </li>
1837
1838
1839
1840         </ul>
1841       </nav>
1842     </li>
1843
1844
1845
1846         </ul>
1847       </nav>
1848     </li>
1849
1850
1851
1852
1853
1854
1855
1856
1857
1858
1859
1860     <li class="md-nav__item md-nav__item--nested">
1861
1862
1863         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
1864
1865       <label class="md-nav__link" for="__nav_7">
1866         Tutorials
1867         <span class="md-nav__icon md-icon"></span>
1868       </label>
1869       <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
1870         <label class="md-nav__title" for="__nav_7">
1871           <span class="md-nav__icon md-icon"></span>
1872           Tutorials
1873         </label>
1874         <ul class="md-nav__list" data-md-scrollfix>
1875
1876
1877
1878
1879
1880
1881     <li class="md-nav__item md-nav__item--nested">
1882
1883
1884         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
1885
1886       <label class="md-nav__link" for="__nav_7_1">
1887         Tutorial Series
1888         <span class="md-nav__icon md-icon"></span>
1889       </label>
1890       <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
1891         <label class="md-nav__title" for="__nav_7_1">
1892           <span class="md-nav__icon md-icon"></span>
1893           Tutorial Series
1894         </label>
1895         <ul class="md-nav__list" data-md-scrollfix>
1896
1897
1898
1899
1900
1901     <li class="md-nav__item">
1902       <a href="../../tutorial/series/overview/" class="md-nav__link">
1903         Overview
1904       </a>
1905     </li>
1906
1907
1908
1909
1910
1911
1912
1913     <li class="md-nav__item">
1914       <a href="../../tutorial/series/part_1/" class="md-nav__link">
1915         Part 1
1916       </a>
1917     </li>
1918
1919
1920
1921
1922
1923
1924
1925     <li class="md-nav__item">
1926       <a href="../../tutorial/series/part_2/" class="md-nav__link">
1927         Part 2
1928       </a>
1929     </li>
1930
1931
1932
1933
1934
1935
1936
1937     <li class="md-nav__item">
1938       <a href="../../tutorial/series/part_3/" class="md-nav__link">
1939         Part 3
1940       </a>
1941     </li>
1942
1943
1944
1945
1946
1947
1948
1949     <li class="md-nav__item">
1950       <a href="../../tutorial/series/part_4/" class="md-nav__link">
1951         Part 4
1952       </a>
1953     </li>
1954
1955
1956
1957
1958
1959
1960
1961     <li class="md-nav__item">
1962       <a href="../../tutorial/series/part_5/" class="md-nav__link">
1963         Part 5
1964       </a>
1965     </li>
1966
1967
1968
1969         </ul>
1970       </nav>
1971     </li>
1972
1973
1974
1975         </ul>
1976       </nav>
1977     </li>
1978
1979
1980
1981   </ul>
1982 </nav>
1983                   </div>
1984                 </div>
1985               </div>
1986
1987
1988
1989               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
1990                 <div class="md-sidebar__scrollwrap">
1991                   <div class="md-sidebar__inner">
1992
1993 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
1994
1995
1996
1997
1998
1999
2000     <label class="md-nav__title" for="__toc">
2001       <span class="md-nav__icon md-icon"></span>
2002       Table of contents
2003     </label>
2004     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
2005
2006         <li class="md-nav__item">
2007   <a href="#scss-and-css" class="md-nav__link">
2008     SCSS and CSS
2009   </a>
2010
2011     <nav class="md-nav" aria-label="SCSS and CSS">
2012       <ul class="md-nav__list">
2013
2014           <li class="md-nav__item">
2015   <a href="#file-location" class="md-nav__link">
2016     File Location
2017   </a>
2018
2019 </li>
2020
2021           <li class="md-nav__item">
2022   <a href="#variables" class="md-nav__link">
2023     Variables
2024   </a>
2025
2026     <nav class="md-nav" aria-label="Variables">
2027       <ul class="md-nav__list">
2028
2029           <li class="md-nav__item">
2030   <a href="#linking-images" class="md-nav__link">
2031     Linking images
2032   </a>
2033
2034 </li>
2035
2036       </ul>
2037     </nav>
2038
2039 </li>
2040
2041       </ul>
2042     </nav>
2043
2044 </li>
2045
2046         <li class="md-nav__item">
2047   <a href="#media-breakpoints" class="md-nav__link">
2048     Media Breakpoints
2049   </a>
2050
2051     <nav class="md-nav" aria-label="Media Breakpoints">
2052       <ul class="md-nav__list">
2053
2054           <li class="md-nav__item">
2055   <a href="#available-breakpoints" class="md-nav__link">
2056     Available Breakpoints
2057   </a>
2058
2059 </li>
2060
2061       </ul>
2062     </nav>
2063
2064 </li>
2065
2066         <li class="md-nav__item">
2067   <a href="#asset-preloading" class="md-nav__link">
2068     Asset Preloading
2069   </a>
2070
2071 </li>
2072
2073     </ul>
2074
2075 </nav>
2076                   </div>
2077                 </div>
2078               </div>
2079
2080
2081           <div class="md-content" data-md-component="content">
2082             <article class="md-content__inner md-typeset">
2083
2084
2085                   <a href="https://github.com/WoltLab/docs.woltlab.com/edit/5.4/docs/view/css.md" title="Edit this page" class="md-content__button md-icon">
2086                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>
2087                   </a>
2088
2089
2090                 <h1 id="css">CSS<a class="headerlink" href="#css" title="Permanent link">#</a></h1>
2091 <h2 id="scss-and-css">SCSS and CSS<a class="headerlink" href="#scss-and-css" title="Permanent link">#</a></h2>
2092 <p>SCSS is a scripting language that features a syntax similar to CSS and compiles into native CSS at runtime. It provides many great additions to CSS such as declaration nesting and variables, it is recommended to read the <a href="http://sass-lang.com/guide">official guide</a> to learn more.</p>
2093 <p>You can create <code>.scss</code> files containing only pure CSS code and it will work just fine, you are at no point required to write actual SCSS code.</p>
2094 <h3 id="file-location">File Location<a class="headerlink" href="#file-location" title="Permanent link">#</a></h3>
2095 <p>Please place your style files in a subdirectory of the <code>style/</code> directory of the target application or the Core's style directory, for example <code>style/layout/pageHeader.scss</code>.</p>
2096 <h3 id="variables">Variables<a class="headerlink" href="#variables" title="Permanent link">#</a></h3>
2097 <p>You can access variables with <code>$myVariable</code>, variable interpolation (variables inside strings) is accomplished with <code>#{$myVariable}</code>.</p>
2098 <h4 id="linking-images">Linking images<a class="headerlink" href="#linking-images" title="Permanent link">#</a></h4>
2099 <p>Images used within a style must be located in the style's image folder. To get the folder name within the CSS the SCSS variable <code>#{$style_image_path}</code> can be used. The value will contain a trailing slash.</p>
2100 <h2 id="media-breakpoints">Media Breakpoints<a class="headerlink" href="#media-breakpoints" title="Permanent link">#</a></h2>
2101 <p>Media breakpoints instruct the browser to apply different CSS depending on the viewport dimensions, e.g. serving a desktop PC a different view than when viewed on a smartphone.</p>
2102 <table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
2103 <span class="normal"> 2</span>
2104 <span class="normal"> 3</span>
2105 <span class="normal"> 4</span>
2106 <span class="normal"> 5</span>
2107 <span class="normal"> 6</span>
2108 <span class="normal"> 7</span>
2109 <span class="normal"> 8</span>
2110 <span class="normal"> 9</span>
2111 <span class="normal">10</span>
2112 <span class="normal">11</span>
2113 <span class="normal">12</span>
2114 <span class="normal">13</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="cm">/* red background color for desktop pc */</span>
2115 <span class="k">@include</span><span class="nd"> screen-lg</span> <span class="p">{</span>
2116     <span class="nt">body</span> <span class="p">{</span>
2117         <span class="nt">background-color</span><span class="nd">:</span> <span class="nt">red</span><span class="o">;</span>
2118     <span class="p">}</span>
2119 <span class="p">}</span>
2120
2121 <span class="cm">/* green background color on smartphones and tablets */</span>
2122 <span class="k">@include</span><span class="nd"> screen-md-down</span> <span class="p">{</span>
2123     <span class="nt">body</span> <span class="p">{</span>
2124         <span class="nt">background-color</span><span class="nd">:</span> <span class="nt">green</span><span class="o">;</span>
2125     <span class="p">}</span>
2126 <span class="p">}</span>
2127 </code></pre></div>
2128 </td></tr></table>
2129 <h3 id="available-breakpoints">Available Breakpoints<a class="headerlink" href="#available-breakpoints" title="Permanent link">#</a></h3>
2130 <div class="admonition info">
2131 <p class="admonition-title">Some very large smartphones, for example the Apple iPhone 7 Plus, do match the media query for <code>Tablets (portrait)</code> when viewed in landscape mode.</p>
2132 </div>
2133 <table>
2134 <thead>
2135 <tr>
2136 <th>Name</th>
2137 <th>Devices</th>
2138 <th><code>@media</code> equivalent</th>
2139 </tr>
2140 </thead>
2141 <tbody>
2142 <tr>
2143 <td><code>screen-xs</code></td>
2144 <td>Smartphones only</td>
2145 <td><code>(max-width: 544px)</code></td>
2146 </tr>
2147 <tr>
2148 <td><code>screen-sm</code></td>
2149 <td>Tablets (portrait)</td>
2150 <td><code>(min-width: 545px) and (max-width: 768px)</code></td>
2151 </tr>
2152 <tr>
2153 <td><code>screen-sm-down</code></td>
2154 <td>Tablets (portrait) and smartphones</td>
2155 <td><code>(max-width: 768px)</code></td>
2156 </tr>
2157 <tr>
2158 <td><code>screen-sm-up</code></td>
2159 <td>Tablets and desktop PC</td>
2160 <td><code>(min-width: 545px)</code></td>
2161 </tr>
2162 <tr>
2163 <td><code>screen-sm-md</code></td>
2164 <td>Tablets only</td>
2165 <td><code>(min-width: 545px) and (max-width: 1024px)</code></td>
2166 </tr>
2167 <tr>
2168 <td><code>screen-md</code></td>
2169 <td>Tablets (landscape)</td>
2170 <td><code>(min-width: 769px) and (max-width: 1024px)</code></td>
2171 </tr>
2172 <tr>
2173 <td><code>screen-md-down</code></td>
2174 <td>Smartphones and tablets</td>
2175 <td><code>(max-width: 1024px)</code></td>
2176 </tr>
2177 <tr>
2178 <td><code>screen-md-up</code></td>
2179 <td>Tablets (landscape) and desktop PC</td>
2180 <td><code>(min-width: 769px)</code></td>
2181 </tr>
2182 <tr>
2183 <td><code>screen-lg</code></td>
2184 <td>Desktop PC</td>
2185 <td><code>(min-width: 1025px)</code></td>
2186 </tr>
2187 <tr>
2188 <td><code>screen-lg-only</code></td>
2189 <td>Desktop PC</td>
2190 <td><code>(min-width: 1025px) and (max-width: 1280px)</code></td>
2191 </tr>
2192 <tr>
2193 <td><code>screen-lg-down</code></td>
2194 <td>Smartphones, tablets, and desktop PC</td>
2195 <td><code>(max-width: 1280px)</code></td>
2196 </tr>
2197 <tr>
2198 <td><code>screen-xl</code></td>
2199 <td>Desktop PC</td>
2200 <td><code>(min-width: 1281px)</code></td>
2201 </tr>
2202 </tbody>
2203 </table>
2204 <h2 id="asset-preloading">Asset Preloading<a class="headerlink" href="#asset-preloading" title="Permanent link">#</a></h2>
2205 <p>WoltLab Suite’s SCSS compiler supports adding <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content">preloading</a> metadata to the CSS.
2206 To communicate the preloading intent to the compiler, the <code>--woltlab-suite-preload</code> CSS variable is set to the result of the <code>preload()</code> function:</p>
2207 <table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
2208 <span class="normal"> 2</span>
2209 <span class="normal"> 3</span>
2210 <span class="normal"> 4</span>
2211 <span class="normal"> 5</span>
2212 <span class="normal"> 6</span>
2213 <span class="normal"> 7</span>
2214 <span class="normal"> 8</span>
2215 <span class="normal"> 9</span>
2216 <span class="normal">10</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code><span class="nc">.fooBar</span> <span class="p">{</span>
2217     <span class="nt">--woltlab-suite-preload</span><span class="nd">:</span>    <span class="nn">#</span><span class="p">{</span><span class="nt">preload</span><span class="o">(</span>
2218                                     <span class="s1">&#39;</span><span class="si">#{</span><span class="nv">$style_image_path</span><span class="si">}</span><span class="s1">custom/background.png&#39;</span><span class="o">,</span>
2219                                     <span class="err">$</span><span class="nt">as</span><span class="nd">:</span> <span class="s2">&quot;image&quot;</span><span class="o">,</span>
2220                                     <span class="err">$</span><span class="nt">crossorigin</span><span class="nd">:</span> <span class="nt">false</span><span class="o">,</span>
2221                                     <span class="err">$</span><span class="nt">type</span><span class="nd">:</span> <span class="s2">&quot;image/png&quot;</span>
2222                                 <span class="o">)</span><span class="p">}</span><span class="o">;</span>
2223
2224     <span class="nt">background</span><span class="nd">:</span> <span class="nt">url</span><span class="o">(</span><span class="s1">&#39;</span><span class="si">#{</span><span class="nv">$style_image_path</span><span class="si">}</span><span class="s1">custom/background.png&#39;</span><span class="o">);</span>
2225 <span class="p">}</span>
2226 </code></pre></div>
2227 </td></tr></table>
2228 <p>The parameters of the <code>preload()</code> function map directly to the preloading properties that are used within the <code>&lt;link&gt;</code> tag and the <code>link:</code> HTTP response header.</p>
2229 <p>The above example will result in a <code>&lt;link&gt;</code> similar to the following being added to the generated HTML:</p>
2230 <table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span></pre></div></td><td class="code"><div class="highlight"><pre><span></span><code>&lt;link rel=&quot;preload&quot; href=&quot;https://example.com/images/style-1/custom/background.png&quot; as=&quot;image&quot; type=&quot;image/png&quot;&gt;
2231 </code></pre></div>
2232 </td></tr></table>
2233 <div class="admonition info">
2234 <p class="admonition-title">Use preloading sparingly for the most important resources where you can be certain that the browser will need them. Unused preloaded resources will unnecessarily waste bandwidth.</p>
2235 </div>
2236
2237
2238
2239
2240 <hr>
2241 <div class="md-source-date">
2242   <small>
2243
2244       Last update: 2021-04-20
2245
2246   </small>
2247 </div>
2248
2249
2250
2251
2252
2253
2254
2255
2256             </article>
2257           </div>
2258         </div>
2259
2260       </main>
2261
2262
2263 <footer class="md-footer">
2264
2265     <nav class="md-footer__inner md-grid" aria-label="Footer">
2266
2267         <a href="../template-plugins/" class="md-footer__link md-footer__link--prev" rel="prev">
2268           <div class="md-footer__button md-icon">
2269             <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>
2270           </div>
2271           <div class="md-footer__title">
2272             <div class="md-ellipsis">
2273               <span class="md-footer__direction">
2274                 Previous
2275               </span>
2276               Template Plugins
2277             </div>
2278           </div>
2279         </a>
2280
2281
2282         <a href="../../javascript/general-usage/" class="md-footer__link md-footer__link--next" rel="next">
2283           <div class="md-footer__title">
2284             <div class="md-ellipsis">
2285               <span class="md-footer__direction">
2286                 Next
2287               </span>
2288               General Usage
2289             </div>
2290           </div>
2291           <div class="md-footer__button md-icon">
2292             <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>
2293           </div>
2294         </a>
2295
2296     </nav>
2297
2298   <div class="md-footer-meta md-typeset">
2299     <div class="md-footer-meta__inner md-grid">
2300       <div class="md-footer-copyright">
2301
2302           <div class="md-footer-copyright__highlight">
2303             Copyright © 2020 WoltLab GmbH
2304           </div>
2305
2306         Made with
2307         <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
2308           Material for MkDocs
2309         </a>
2310
2311       </div>
2312       <div class="md-footer-copyright">
2313         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
2314         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
2315 </div>
2316     </div>
2317   </div>
2318 </footer>
2319
2320     </div>
2321     <div class="md-dialog" data-md-component="dialog">
2322       <div class="md-dialog__inner md-typeset"></div>
2323     </div>
2324     <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.fe42c31b.min.js", "version": {"provider": "mike"}}</script>
2325
2326
2327       <script src="../../assets/javascripts/bundle.4ea5477f.min.js"></script>
2328
2329
2330   </body>
2331 </html>