Teammitglieder online
Support-Box
Neue Beiträge seit dem letzten Besuch.
Textbausteine des MODERATIONSTOOL
AB > PFAD > GENERATOR
FORUM > PFAD > GENERATOR
Unterstützung Lösungs-Probleme
Auffällige
User
Der Runde
Tisch
HÄUFIG GESTELLTE FRAGEN
Regeln und nützliche Hinweise
Neueste Themen
» Aktivitäten der Admins
von Bigtuber Heute um 4:30

» [#14819] Im Beitrag erscheint Fußzeilenleiste statt Signatur und Avatar fehlt
von Geli Gestern um 19:49

» [#14826] Warnungen trotz SSL/HTTPS
von Theodor Gestern um 14:28

» [#14820] Gründerwechsel nach Inaktivität des Gründers
von Pumafell Sa 25 Mai 2019 - 22:20

» Serverprobleme?
von Bigtuber Fr 24 Mai 2019 - 19:56

» 7-Tage Bildersperre für Neumitglieder
von Trackman Fr 24 Mai 2019 - 12:57

» Vergessenes Gründer-/Admin- Passwort
von Cavell Mi 22 Mai 2019 - 23:44

» Admin Zugangsdaten vergessen
von Bigtuber Mi 22 Mai 2019 - 17:37

» [phbb2] Aktuelle Beiträge verschwunden
von Bigtuber Mi 22 Mai 2019 - 17:04

» Domäine nicht erreichbar
von Nyan Mo 20 Mai 2019 - 13:22

» kein neues PW als Admin
von Bigtuber So 19 Mai 2019 - 16:57

» JAVA Script nur in Vorschau aktiv
von inde Fr 17 Mai 2019 - 16:37

» Entfernung der Anzeige von Google Maps in Forumieren-Foren
von Bigtuber Mi 15 Mai 2019 - 17:31

» Naruto -Atarashi Sho
von Raisin92 Mi 15 Mai 2019 - 13:47

» [phpBB2] Bewertungszähler als Text
von Bigtuber Di 14 Mai 2019 - 0:26

» [PunBB] Servimg mit Sicherheitsproblemen?
von Bigtuber Mo 13 Mai 2019 - 16:49

» Sicherheitswarnung !
von Bigtuber Mo 13 Mai 2019 - 16:48

» [phpBB3] Passwort vergessen
von Wolfsstern So 12 Mai 2019 - 20:46

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

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

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

Beitrag von #Frank am Do 19 Apr 2012 - 9:58

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:
 - [Tutorial phpBB3] Beiträge des Teams einfärben mit einer Grafik A00294

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:
 - [Tutorial phpBB3] Beiträge des Teams einfärben mit einer Grafik A01117

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.

 - [Tutorial phpBB3] Beiträge des Teams einfärben mit einer Grafik Bg_post_staff_admin
https://2img.net/h/i4.photobucket.com/albums/y146/Hexekati/Auftraege/bg_post_staff_admin.png
und
 - [Tutorial phpBB3] Beiträge des Teams einfärben mit einer Grafik Bg_post_staff_mod
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://illiweb.com/fa/pbucket.gif") !important;
    background-position: right bottom;
    background-repeat: no-repeat;

}
div.post.online.mod-beitr, div.post.mod-beitr {
    background-image: url("http://illiweb.com/fa/pbucket.gif") !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://illiweb.com/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!
 - [Tutorial phpBB3] Beiträge des Teams einfärben mit einer Grafik A0246

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.


Zuletzt von #Frank am Mo 23 Apr 2012 - 20:28 bearbeitet; insgesamt 1-mal bearbeitet
#Frank
#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34609
Hinweis : Admin a.D.
Anmeldedatum : 13.08.08
keine
Firefox phpBB2

Benutzerprofil anzeigen

Nach oben Nach unten

 - [Tutorial phpBB3] Beiträge des Teams einfärben mit einer Grafik Empty Das Gleiche für phpBB2

Beitrag von #Frank am Mo 23 Apr 2012 - 19:51

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:
 - [Tutorial phpBB3] Beiträge des Teams einfärben mit einer Grafik Orange10
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:
 - [Tutorial phpBB3] Beiträge des Teams einfärben mit einer Grafik A00300


Zuletzt von #Frank am Mo 23 Apr 2012 - 20:17 bearbeitet; insgesamt 1-mal bearbeitet
#Frank
#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34609
Hinweis : Admin a.D.
Anmeldedatum : 13.08.08
keine
Firefox phpBB2

Benutzerprofil anzeigen

Nach oben Nach unten

 - [Tutorial phpBB3] Beiträge des Teams einfärben mit einer Grafik Empty CSS Eintrag für Invision

Beitrag von #Frank am Mo 23 Apr 2012 - 20:15

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!
#Frank
#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34609
Hinweis : Admin a.D.
Anmeldedatum : 13.08.08
keine
Firefox phpBB2

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten