[Tutorial phpBB3] Beiträge des Teams einfärben mit einer Grafik

Hier bei uns im Forum seht ihr ja seit einiger Zeit dass die Beiträge des Teams mit einer Grafik hinterlegt sind.
Nun kommen ja Fragen auf, wie wir das gemacht haben.
Dazu sei gesagt, dass wir die CSS Classen der Beiträge so verändert haben, dass diese Beiträge mit einer Class ersetzt wurden, die man dann über das CSS einfärben kann.
Bei dieser Version kommt es aber dazu, das das Online Icon, das eigentlich am rechten Rand der Beiträge vorhanden ist, nicht mehr angezeigt wird.
Aber auch dazu gibt es die Lösung, wie man es macht, das das Online Icon im Profil angezeigt wird.

Diese Anzeige erfordert mehre Einstellungen, die vorgenommen werden müssen.
Hier ist es davon abhängig, welcher Rang dem Teammitglied zugeordnet ist.
Das bedeutet, dass für jeden Rang auch ein Bild eingesetzt werden kann.
Alternativ ist es natürlich auch möglich, anstelle des Bildes nur die Hintergrundfarbe zu ändern.
Nun die notwendigen Schritte im einzelnen.

Schritt 1: Die Ränge bearbeiten, um diesen eine Span Class zuzuweisen:

Die Grundvoraussetzung ist es, dass wir die Ränge auf der Seite eindeutig bestimmen müssen, um mit diesen dann unsere Funktion realisieren zu können.
Dazu weisen wir dem Rang Namen eine Span Class zu.
Das machen wir im Adminbereich unter:
Nutzer & Gruppen --> Ränge --> Vewaltung der Ränge

Ich mache das nun mal für die Ränge Admin und Mod.
Wir öffnen den Rang zum bearbeiten.
Bei Name des Rangs tragen wir das hier ein:
Für den Admin: <span class="admin-rang">Administrator</span>
Für den Mod: <span class="mod-rang">Moderator</span>
So sollte es dann aussehen:


Nun haben diese Ränge eine Span Class, mit der wir arbeiten können.
Weiter geht es mit

Schritt 2: Erstellen des Scripts zum ändern der Posting Class:

Wir gehen in den Bereich Javascript Verwaltung, um dort ein neues Script hinzuzufügen.
Module --> HTML und JAVASCRIPT --> Javascript Codes Verwaltung
Dort fügen wir ein neues Script hinzu.
Ich habe das Script "Staff Beiträge färben" genannt, was wir hier bei Titel eingeben.
Bei Platzierung wählen wir: In den Themen/Beiträgen
Der Inhalt unseres Script ist nun dieser:

Code:

$(function(){$('.admin-rang').closest('.post').addClass('admin-beitr')});

$(function(){$('.mod-rang').closest('.post').addClass('mod-beitr')});

Das ist entsprechend für die eventuell weiteren Ränge noch in genau der gleichen Weise zu ergänzen.
So sollte es dann aussehen:


Kurz die Erklärung, was dieses Script macht.
Es handelt sich hier um eine Funktion. Das Script sucht auf der Seite nach unserer Span Class, die wir im ersten Schritt dem Rang zugewiesen haben ('.admin-rang'). Wenn diese Class gefunden wurde, dann schliesst das Script die Beitrags Class :post und ersetzt diese mit der Class admin-beitr.
Wenn ihr andere Bezeichnungen einsetzen wollt, dann achtet genau darauf, dass ihr beim ändern des Script nicht aus versehen ein ' Zeichen löscht, oder einen . vergesst.
Wenn das soweit ist, dann das Script bestätigen.

Weiter geht es mit

Schritt 3: Dem Beitrag über das CSS das Hintergrundbild zuweisen:

Über das CSS müssen wir nun dem Beitrag, dem wir jetzt eine neue Class zugewiesen haben, das entsprechende Bild zuweisen.
Wir haben hier mal zwei Bilder, die wir hier benutzt haben.


https://2img.net/h/i4.photobucket.com/albums/y146/Hexekati/Auftraege/bg_post_staff_admin.png
und

https://2img.net/h/i4.photobucket.com/albums/y146/Hexekati/Auftraege/bg_post_staff_mod.png
Diese Bilder dienen nur der Veranschaulichung und sollten durch eure eigenen ersetzt werden.
Im CSS setzen wir nun dieses ein:
Anzeige --> Bilder & Farben --> Farben auf der Karte --> CSS Stylesheet

Code:

/* Staff Beiträge einfärben Beginn */
    div.post.online.admin-beitr, div.post.admin-beitr {
    background-image: url("http://i4.photobucket.com/albums/y146/Hexekati/Auftraege/bg_post_staff_admin.png") !important;
    background-position: right bottom;
    background-repeat: no-repeat;

}
div.post.online.mod-beitr, div.post.mod-beitr {
    background-image: url("http://i4.photobucket.com/albums/y146/Hexekati/Auftraege/bg_post_staff_mod.png") !important;
    background-position: right bottom;
    background-repeat: no-repeat;

}
/* Staff Beiträge einfärben Ende */

Hier in unserem Beispiel wird das Bild als Hintergrund eingesetzt, das aus der Rechten Unteren Ecke aus eingesetzt wird. Andere Positionsangaben sind hier aber möglich.
Nun senden wir das ab und dann sind wir damit fertig.

Schritt 4 (alternative nur für phpBB3! Nicht für die anderen Versionen anwenden!):

Nun müssen wir noch dafür sorgen, das unser Online Icon wieder angezeigt wird. Das haben wir hier so gelöst, dass wir dem Profil das Icon als Hintergrund über das CSS des Forums zugewiesen haben.
Nachteil ist, das bei großen Avataren und kleiner Bildschirmauflösung das Online Icon durch den Avatar verdeckt wird.

Um das so einzustellen tragen wir noch folgendes ins CSS ein:

Code:

/* Online Icon Beginn */
.online .postprofile {
    background-image: url("http://2img.net/i/fa/prosilver/icon_user_online_en.png");
    background-position: right top;
    background-repeat: no-repeat;
}
/* Online Icon Ende */

Damit positionieren wir unser Online Icon rechts Oben in der Profil Spalte. Andere Ausrichtungen sind auch hier möglich.

Eine Zweite Variante ist, dass man das Online Icon über ein Script setzt.
Dazu erstellt man wieder ein Javascript wie es oben schon beschrieben ist.
Titel: Online Icon
Platzierung: In den Themen/Beiträgen
Inhalt:

Code:

jQuery(document).ready(function(){
    jQuery(".postprofile dl dt img").wrap('<div class="user"></div>');
    jQuery(".user").append(jQuery('<div></div>'));
    jQuery(".online .user div").prepend(jQuery('<img src="http://i42.servimg.com/u/f42/13/82/46/73/online14.png" alt="Der User ist Online!" Title="Der User ist Online!" class="rec" />'));
    });

Bestätigen!


Im CSS müssen wir das nun Einsetzen und Platzieren:

Code:

/* Online Icon über Script Anfang */
.user div { 
    height: 1px;
    margin: 0 auto 0 40px;
    position: relative;
    top: -4px;
} 
/* Online Icon über Script Ende */

Die Positionierung müsst ihr ausprobieren, weil diese vom eingesetzten Bild im Script abhängig ist.
Ich verzichte nun mal darauf das näher zu erklären, weil man hier schon etwas Verständnis für CSS und Script haben sollte und man dann auch erkennen kann, wie das miteinander zusammen hängt.

Ich hoffe dass es einigermaßen verständlich ist und dass ihr die Zusammenhänge erkennt und auf eure Zwecke anpassen könnt.

Ich wünsche euch viel Spaß damit.

Die Schritte 1 und zwei bleiben hier die gleichen.

Der in Schritt 3 einzusetzende CSS ist aber ein anderer.
Das andere mit dem Online Zeichen ist hier nicht notwendig, weil das Forum anders Aufgebaut ist.
Erschwerend kommt hier dazu, das das Forum als Tabelle aufgebaut ist.
Aus diesem Grund ist es nicht möglich ein solchen Verlauf wie hier einzusetzen, weil sich der sowohl in der Profil Spalte als auch im Beitrag selber Wiederholen würde.
Ich habe deshalb hier einen Horizontalen Verlauf von unten Gewählt.
Das hier ist das Bild:

Das CSS für ein phpBB2 Forum ist dieses:

Code:

/* Staff Beiträge einfärben Beginn */
    .post.admin-beitr, .admin-beitr td.row1, .admin-beitr td.row2 {
    background-image: url("http://i45.servimg.com/u/f45/15/05/45/90/orange10.png") !important;
    background-position: right bottom;
    background-repeat: repeat-x;
    background-color: # !important;
}
/* Staff Beiträge einfärben Ende */

Für weitere Ränge das CSS kopieren und entsprechend bearbeiten.

Aussehen tut das Ganze dann so:

Bei der Version Invision kann nur der Bereich der Beiträge eingefärbt werden.
Das Profil wird hier nicht eingefärbt.

Schritt 1 und 2 bleiben hier bei wieder gleich.

Im Schritt 3 müssen wir diesen CSS Code einsetzen:

Code:

/* Admin Beiträge färben Beginn */
    .postbody.admin-beitr {
  background-color: #0D0804;
  background-image: url("http://i45.servimg.com/u/f45/15/05/45/90/orange10.png"); !important;
  background-position: right bottom;
  background-repeat: repeat-x;
}
/* Admin Beiträge färben Ende */

Für weitere Ränge das CSS Kopieren und entsprechend umschreiben!