Spass mit AuthorPane Badges

Die mit IPS 4.5 eingeführten AuthorPane Badges unter den Avataren sind zwar eine schicke Sache, allerdings gibt es leider nur zwei verschiedene. Das eine zeigt an, ob der Benutzer Moderatorenrechte hat, das andere kennzeichnet neue Mitglieder. Dabei kann man soviel mehr damit anstellen, deshalb möchten wir hier erläutern wie diese Badges funktionieren und ihr neue hinzufügen könnt. 

Im ersten Beispiel weisen dafür wir bestimmten Benutzern anhand ihrer ID eigene Badges hinzu. Die ID eines Mitglieds bekommt ihr am einfachsten heraus, indem ihr das Profil aufruft. Der Link sieht dann so ungefähr aus deine-seite.de/profile/2-v0rt3x/ -> meine ist also die Nummer 2. Für die Icons auf den Badges wird Font Awesome verwendet, in diesem Tutorial könnt ihr mehr darüber erfahren.

Als erstes öffnen wir das Template custom.css und erstellen eine neue Klasse für mein Icon, was folgendermassen aussieht...

.cAuthorPane_badge--v0rt3x::before {
  content: "\f0a1";
}	

Jetzt weiss das Forum schonmal, wie das Icon unter meinem Avatar aussehen soll. Nun müssen wir ihm nur noch sagen, wann es eben dieses anzeigen soll und nicht das Moderatoren-Icon. Deshalb wechseln wir jetzt zum postContainer Template und suchen dort nach...

{{if $comment->author()->modShowBadge()}}
	<span class="cAuthorPane_badge cAuthorPane_badge--moderator" data-ipsTooltip title="{lang="member_is_moderator" sprintf="$comment->author()->name"}"></span>
{{elseif $comment->author()->joinedRecently()}}
	<span class="cAuthorPane_badge cAuthorPane_badge--new" data-ipsTooltip title="{lang="member_is_new_badge" sprintf="$comment->author()->name"}"></span>
{{endif}}

Das sagt im grossen und ganzen soviel wie "Wenn Mod-Rechte, dann Mod-Icon usw". Mehr über die Template Logik könnt ihr HIER erfahren. Diesen Part erweitern wir jetzt um meine Benutzer-ID und das sieht so aus...

{{if $comment->author()->member_id === 2}}
	<span class="cAuthorPane_badge cAuthorPane_badge--v0rt3x" data-ipsTooltip title="Hallo Leute"></span>
{{elseif $comment->author()->modShowBadge()}}
	<span class="cAuthorPane_badge cAuthorPane_badge--moderator" data-ipsTooltip title="{lang="member_is_moderator" sprintf="$comment->author()->name"}"></span>
{{elseif $comment->author()->joinedRecently()}}
	<span class="cAuthorPane_badge cAuthorPane_badge--new" data-ipsTooltip title="{lang="member_is_new_badge" sprintf="$comment->author()->name"}"></span>
{{endif}}  

Also wenn die Benutzer-ID 2 ist, dann soll die Klasse cAuthorPane_badge--v0rt3x benutzt werden, die wir oben angelegt haben. Genauso verfahrt ihr mit allen weiteren Benutzern, die ein eigenes Icon bekommen sollen. Beachtet dabei, dass dieser Code zweimal in dem Template vorhanden ist, einmal für die Desktop- und einmal für die Ansicht auf mobilen Geräten.

Es geht allerdings noch viel mehr, im zweiten Teil dieses Tutorials verwandeln wir diese Badges deshalb in Online Indikatoren 

Dafür clonen wir zunächst die Klasse cAuthorPane_badge, benennen sie in cAuthorPane_badge_online um und ändern die Hintergrundfarbe in grün. Fügt dafür einfach das hier in euer custom.css ein...

.cAuthorPane_badge_online {
  position: absolute;
  left: calc(50% - .5em);
  bottom: -12px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1em; height: 1em;
  font-size: 26px;
  background: green;
  color: rgb( var(--theme-area_background_reset) );
  border: rgb( var(--theme-area_background_reset) ) solid 2px;
  border-radius: 50%;
}

Damit der Online-Status auch bei jedem Benutzer angezeigt wird muss natürlich ein weiteres Icon her, sonst würde man den grünen Hintergrund nur bei Moderatoren und neuen Benutzern sehen.

.cAuthorPane_badge--member::before {
  content: "\f007";
}	

Jetzt noch ein kleiner Schnippsel damit die neue Klasse richtig unter dem Avatar angezeigt wird und schon sind wir mit dem CSS-Teil fertig.

.cAuthorPane_badge_online::before {
  font-family: 'FontAwesome';
  font-size: .5em;
}

Im postContainer ist dafür ein bisschen mehr Code notwendig, nämlich einmal für den Fall das der Benutzer online ist und einmal für offline.

{{if $comment->author()->isOnline() AND !$comment->author()->isOnlineAnonymously() OR $comment->author()->isOnlineAnonymously() AND \IPS\Member::loggedIn()->isAdmin() }}
	{{if $comment->author()->member_id === 2}}
		<span class="cAuthorPane_badge_online cAuthorPane_badge--v0rt3x" data-ipsTooltip title="The doctor is: IN"></span>
	{{elseif $comment->author()->modShowBadge()}}
		<span class="cAuthorPane_badge_online cAuthorPane_badge--moderator" data-ipsTooltip title="{lang="member_is_moderator" sprintf="$comment->author()->name"}"></span>
	{{elseif $comment->author()->joinedRecently()}}
		<span class="cAuthorPane_badge_online cAuthorPane_badge--new" data-ipsTooltip title="{lang="member_is_new_badge" sprintf="$comment->author()->name"}"></span>
	{{elseif $comment->author()->member_id}}
		<span class="cAuthorPane_badge cAuthorPane_badge--member" data-ipsTooltip title="{$comment->author()->name} ist online"></span>
	{{endif}}
{{else}}
	{{if $comment->author()->member_id === 2}}
		<span class="cAuthorPane_badge cAuthorPane_badge--v0rt3x" data-ipsTooltip title="Bin grad nicht da..."></span>
	{{elseif $comment->author()->modShowBadge()}}
		<span class="cAuthorPane_badge cAuthorPane_badge--moderator" data-ipsTooltip title="{lang="member_is_moderator" sprintf="$comment->author()->name"}"></span>
	{{elseif $comment->author()->joinedRecently()}}
		<span class="cAuthorPane_badge cAuthorPane_badge--new" data-ipsTooltip title="{lang="member_is_new_badge" sprintf="$comment->author()->name"}"></span>
	{{elseif $comment->author()->member_id}}
		<span class="cAuthorPane_badge cAuthorPane_badge--member" data-ipsTooltip title="{$comment->author()->name} ist offline"></span>
	{{endif}}            
{{endif}} 

Beachtet wenn ihr diesen Code erweitert die Reihenfolge. Das neue Icon ist aus dem Grund ganz unten, weil es nur bei den Mitgliedern angezeigt werden soll, die 1. nicht ich, 2. kein Mod und 3. nicht neu im Forum sind 

Wenn euch diese Spielereien gefallen haben, solltet ihr mal einen Blick auf DIESEN Artikel werfen, da ist durchaus noch mehr möglich 

Wir hoffen euch hat dieses Tutorial gefallen. Bei Fragen benutzt bitte das Supportforum, wir helfen euch gerne weiter.