Attach CSS Files

There are five different ways to attach your own CSS files:

  1. XWIKI Preferences: Attaching your CSS files here means that these files will be loaded on every page of your online presence.
  2. Space Preferences: Imagine your online prescene as a folder structure. A Space can be seen as folder. So if you attach your CSS files to a space (e.g. every subpage of this space (in this example News) will load these files.
  3. Page: CSS files can also be attached directly to a page so that these files will only be loaded on this specific page.
  4. Page-Type: Another way of attaching your CSS files is to attach them to a page-type. For example you have got a page-type ’Blog’. If you attach your files to this page-type only pages of the type ’Blog’ will load your CSS files.
  5. Layout: Last but not least, CSS files can be attached to Layouts. By doing this, the files are not bound to a specific page-type or space but to a layout which can be used crosswise.


Load CSS Files


You can load CSS files in asynchronously loaded content by adding them in a span like so: <span class='cel_lazyloadCSS' style='display: none;'>celRes/x/yz.css</span>. JavaScript will take care of loading this CSS.