Manuelles einbinden einer Legenden-Box

Nitro

BS-Team
Super Moderator
#1
Screenshot-2018-5-14 Forum - WoltLab Suite.png

Hier wird euch erklärt wie man in die User-Online Box eine Legende hinzufügt.


Als erstes suchen wir uns das Template boxUsersOnline raus, kopieren das und fügen es in das entsprechende Design
ein. Sollten keine Templates von dem Design (Stil) vorhanden sein müsst ihr euch vorher eine neue Templategruppe erstellen
um dann das kopierte Template (boxUsersOnline) dort einzusetzen.

Jetzt ändern wir den Inhalt der Template-Box..das ist der Alte Cod denn wir dann Löschen

Code:
    <ul class="inlineList dotSeparated">
        <li>{lang}wcf.user.usersOnline.detail{/lang}</li>
        {if USERS_ONLINE_RECORD && $__showRecord}<li>{lang}wcf.user.usersOnline.record{/lang}</li>{/if}
    </ul>
    {if $usersOnlineList|count}
        <ul class="inlineList commaSeparated">
            {foreach from=$usersOnlineList->getObjects() item=userOnline}
                <li><a href="{link controller='User' object=$userOnline->getDecoratedObject()}{/link}" class="userLink" data-user-id="{@$userOnline->userID}">{@$userOnline->getFormattedUsername()}</a></li>
            {/foreach}
        </ul>
    {/if}
    {if USERS_ONLINE_ENABLE_LEGEND && $usersOnlineList->getUsersOnlineMarkings()|count}
        <dl class="plain inlineDataList usersOnlineLegend">
            <dt>{lang}wcf.user.usersOnline.marking.legend{/lang}</dt>
            <dd>
                <ul class="inlineList commaSeparated">
                    {foreach from=$usersOnlineList->getUsersOnlineMarkings() item=usersOnlineMarking}
                        <li>{@$usersOnlineMarking}</li>
                    {/foreach}
                </ul>
            </dd>
        
        </dl>
    {/if}
Und denn Setzen wir jetzt Neu ein denn Cod hier:
Und Bitte da wo EURE DOMAIN Steht im Cod eure einfügen.


Code:
{*{if USERS_ONLINE_ENABLE_LEGEND && $usersOnlineList->getUsersOnlineMarkings()|count}
    <dl class="plain inlineDataList usersOnlineLegend">
        <dt>{lang}wcf.user.usersOnline.marking.legend{/lang}</dt>
        <dd>
            <ul class="inlineList commaSeparated">
                {foreach from=$usersOnlineList->getUsersOnlineMarkings() item=usersOnlineMarking}
                    <li>{@$usersOnlineMarking}</li>
                {/foreach}
            </ul>
        </dd>
    
    </dl>
{/if}*}
<div class="subContent">
    <h2 class="boxTitle"><a href="EURE DOMAIN/users-online-list/">Legende</a></h2>
        <dl class="plain inlineDataList usersOnlineLegend">
            <dt>Communityleitung</dt>
                <dd>
                    <ul class="inlineList commaSeparated">
                        <li><font color="#ff0000"><strong>Owner</strong></font></li>
                    </ul>
                </dd>
        </dl>
        <dl class="plain inlineDataList usersOnlineLegend">
            <dt>Forumadministration</dt>
            <dd>
                <ul class="inlineList commaSeparated">
                    <li><font class="forumModeration" color="#ff8c00"><strong>Forum-Administratoren</strong></font></li>
                    <li><font class="forumModeration" color="#2981f4"><strong>CoOperater</strong></font></li>
                </ul>
            </dd>
        </dl>
        <dl class="plain inlineDataList usersOnlineLegend">
            <dt>Sonderstatus</dt>
            <dd>
                <ul class="inlineList commaSeparated">
                    <li><font class="teamManagement" color="#21ceff"><strong>Entwickler</strong></font></li>
                    <li><font class="teamManagement" color="#797806"><strong>VIP</strong></font></li>
                 </ul>
            </dd>
        </dl>
        <dl class="plain inlineDataList usersOnlineLegend">
            <dt>Paketserveradministration</dt>
            <dd>
                <ul class="inlineList commaSeparated">
                    <li><font class="teamPS" color="#ff0000">Owner</font></li>
                    <li><font class="teamPS" color="#ff8c00">Forum-Administratoren</font></li>
                </ul>
            </dd>
        </dl>
        <dl class="plain inlineDataList usersOnlineLegend">
            <dt>Filebase</dt>
            <dd>
                <ul class="inlineList commaSeparated">
                    <li><font class="teamFB" color="#ff0000">Owner</font></li>
                    <li><font class="teamFB" color="#ff8c00">Forum-Administratoren</font></li>
                    <li><font class="teamFB" color="#2981f4">CoOperater</font></li>
                    <li><font class="teamFB" color="#21ceff">Entwickler</font></li>
                </ul>
            </dd>
        </dl>
        <dl class="plain inlineDataList usersOnlineLegend">
            <dt>Plugin Zugang</dt>
            <dd>
                <ul class="inlineList commaSeparated">
                    <li><font class="suiteMembers" color="#0dc20a">Suite User</font></li>
                </ul>
            </dd>
        </dl>
        <dl class="plain inlineDataList usersOnlineLegend">
            <dt>Mitglieder</dt>
            <dd>
                <ul class="inlineList commaSeparated">
                    <li><font class="regMembers" color="#6fa86f">verifizierter User</font></li>
                    <li><font class="regMembers" color="#444444">Registrierte Benutzer</font></li>
                </ul>
            </dd>
        </dl>
</div>
<div class="subContent">
<h2 class="boxTitle"><a href="EURE DOMAIN/users-online-list/">Benutzer online</a></h2>
<ul class="inlineList dotSeparated">
    <li>{lang}wcf.user.usersOnline.detail{/lang}</li>
    {if USERS_ONLINE_RECORD && $__showRecord}<li>{lang}wcf.user.usersOnline.record{/lang}</li>{/if}
</ul>
{if $usersOnlineList|count}
    <ul class="inlineList commaSeparated">
        {foreach from=$usersOnlineList->getObjects() item=userOnline}
            <li><a href="{link controller='User' object=$userOnline->getDecoratedObject()}{/link}" class="userLink" data-user-id="{@$userOnline->userID}">{@$userOnline->getFormattedUsername()}</a></li>
        {/foreach}
    </ul>
{/if}
</div>
Die Namen, Farbangaben und Gruppenüberschriften sind nur Beispiele und können nach belieben geändert oder erweitert werden!

Die eigentliche Legende wurde nur auskommentiert {*.......*}damit man diese Daten jederzeit wieder zurückrufen kann.
Wenn man es trotzdem dort nicht stehen haben möchte:
Als Sicherheit steht das original Template immer noch unter den Standard-Templates.


Jetzt noch folgendes in die CSS eintragen damit die Box auch richtig dargestellt wird:


Code:
@include screen-sm-up {
    .box[data-box-identifier="com.woltlab.wcf.UsersOnline"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .boxesFooterBoxes .boxContainer > .box[data-box-identifier="com.woltlab.wcf.UsersOnline"] .boxContent {
        display: flex;
    }
    .boxesFooterBoxes .boxContainer > .box[data-box-identifier="com.woltlab.wcf.UsersOnline"] .boxContent .subContent {
    flex: 0 0 50%;
    max-width: 50%;
    }
}
Wichtig ist das ihr bei der User-Online-Box den Haken bei "Boxentitel anzeigen" herausnehmt, da dieser schon im Template vorhanden ist!
 

DZNX!

+Mitglied
#2
Kann man die Klassen auch automatisch aus den Einstellungen lesen lassen und unterteilen? Falls man die Benutzergruppen mal ändert.
 

Nitro

BS-Team
Super Moderator
#3
Ich habe selber noch nicht weiter Getestet also kann dir dazu gerade erst mal noch nichts sagen.
Man kann ja auch selber mal etwas Versuchen.
 

Nitro

BS-Team
Super Moderator
#5
Ob dies möglich ist bestimmt ist vieles möglich blos muss man die Zeit haben um was umzusetzen.
Vieleicht gibts ja auch Leute die dir so was bauen..oder man nimmt sich selber mal die Zeit um was zu machen.