WCF 2.1.x - Templates#
Page Layout#
The template structure has been overhauled and it is no longer required nor recommended to include internal templates, such as documentHeader
, headInclude
or userNotice
. Instead use a simple {include file='header'}
that now takes care of of the entire application frame.
- Templates must not include a trailing
</body></html>
after including thefooter
template. - The
documentHeader
,headInclude
anduserNotice
template should no longer be included manually, the same goes with the<body>
element, please use{include file='header'}
instead. - The
sidebarOrientation
variable for theheader
template has been removed and no longer works. header.boxHeadline
has been unified and now readsheader.contentHeader
Please see the full example at the end of this page for more information.
Sidebars#
Sidebars are now dynamically populated by the box system, this requires a small change to unify the markup. Additionally the usage of <fieldset>
has been deprecated due to browser inconsistencies and bugs and should be replaced with section.box
.
Previous markup used in WoltLab Community Framework 2.1 and earlier:
1 2 3 4 5 6 7 |
|
The new markup since WoltLab Suite 3.0:
1 2 3 4 5 6 7 |
|
Forms#
The input tag for session ids SID_INPUT_TAG
has been deprecated and no longer yields any content, it can be safely removed. In previous versions forms have been wrapped in <div class="container containerPadding marginTop">…</div>
which no longer has any effect and should be removed.
If you're using the preview feature for WYSIWYG-powered input fields, you need to alter the preview button include instruction:
1 |
|
The message object id should be non-zero when editing.
Icons#
The old .icon-<iconName>
classes have been removed, you are required to use the official .fa-<iconName>
class names from FontAwesome. This does not affect the generic classes .icon
(indicates an icon) and .icon<size>
(e.g. .icon16
that sets the dimensions), these are still required and have not been deprecated.
Before:
1 |
|
Now:
1 |
|
Changed Icon Names#
Quite a few icon names have been renamed, the official wiki lists the new icon names in FontAwesome 4.
Changed Classes#
.dataList
has been replaced and should now read<ol class="inlineList commaSeparated">
(same applies to<ul>
).framedIconList
has been changed into.userAvatarList
Removed Elements and Classes#
<nav class="jsClipboardEditor">
and<div class="jsClipboardContainer">
have been replaced with a floating button.- The anchors
a.toTopLink
have been replaced with a floating button. - Avatars should no longer receive the class
framed
- The
dl.condensed
class, as seen in the editor tab menu, is no longer required. - Anything related to
sidebarCollapsed
has been removed as sidebars are no longer collapsible.
Simple Example#
The code below includes only the absolute minimum required to display a page, the content title is already included in the output.
1 2 3 4 5 6 7 |
|
Full Example#
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
|
Content Header#
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 header
template. This is the recommended approach and you should avoid using the alternative method whenever possible.
Recommended Approach#
1 2 3 4 5 6 |
|
Alternative#
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|