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
»  Missbrauchsmeldung "Sexueller Inhalt" war (wieder) Werbung/Spam/Scam
von Joost Gestern um 18:02

» Forum löschen, Probleme mit Gründeraccount
von Igazus Gestern um 17:57

» Zugangsdaten vergessen/verloren
von Joost Sa 16 März 2024 - 21:07

» PN's werden nicht mehr rot eingefärbt
von Ray Sa 16 März 2024 - 16:41

» Schwierigkeiten mit BBCode
von Skouliki Fr 15 März 2024 - 11:51

» Entdeckt die neue Option Servimg Premium
von Joost Mi 6 März 2024 - 19:50

» Neues YAMAHA XT660-Forum
von gnadenlos Fr 1 März 2024 - 7:33

» Forum nur noch für Eingeloggte sichtbar?
von Skouliki Di 27 Feb 2024 - 7:53

» [phpBB3] Eine Frage zum Forum selbst.
von Skouliki Di 27 Feb 2024 - 7:52

» Beiträge verschwinden
von Skouliki Do 22 Feb 2024 - 7:47

» [Tutorial - alle Versionen] (De)aktiviert die Anzeige von Signaturen aus Eurem Profil
von Eto Do 15 Feb 2024 - 22:17

» Datenback-Dump?
von Skouliki Mo 12 Feb 2024 - 22:02

» Einloggen nicht mehr möglich [erbitte schnelle Rückmeldung!]
von Skouliki Mo 12 Feb 2024 - 8:15

» Neuer User kann sich anmelden.
von Joost So 11 Feb 2024 - 18:06

» [phpBB3] Suchfunktion ohne Funktion
von Joost Sa 10 Feb 2024 - 19:38

» Die Sturmkriger (WaCa) mit Punktesystem
von Rama Di 6 Feb 2024 - 18:49

» Style funktioniert nicht
von Joost So 4 Feb 2024 - 16:50

» Vergabe von Auszeichnungen
von Eto Sa 3 Feb 2024 - 20:13

Beiträge mit den meisten Reaktionen des Monats
» Beitrag von Joost in Entdeckt die neue Option Servimg Premium
( 2 )


» Beitrag von Joost in  Missbrauchsmeldung "Sexueller Inhalt" war (wieder) Werbung/Spam/Scam
( 2 )


» Beitrag von Skouliki in Forum nur noch für Eingeloggte sichtbar?
( 1 )


» Beitrag von T.G. in Zugangsdaten vergessen/verloren
( 1 )


» Beitrag von Skouliki in Beiträge verschwinden
( 1 )


[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 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://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!
[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 : 34614
Anmeldedatum : 13.08.08
keine
Mozilla Firefox phpBB2

Nach oben Nach unten

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

Beitrag von #Frank 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 : 34614
Anmeldedatum : 13.08.08
keine
Mozilla Firefox phpBB2

Nach oben Nach unten

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

Beitrag von #Frank 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 : 34614
Anmeldedatum : 13.08.08
keine
Mozilla Firefox phpBB2

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben

- Ähnliche Themen

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