Das Forum der Foren
Willkommen im offiziellen Supportforum von Forumieren!

Um alle Vorteile unseres Forums zu nutzen, melden Sie sich bitte an. Wenn Sie bereits Mitglied sind loggen Sie sich ein.


Erstellen Sie ein kostenloses Forum wie dieses hier.
Forenaustausch

Alle Anzeigen ansehen

Regeln und nützliche Hinweise
Lexi Help
Die neuesten Themen
» [#10397][phpBB3] Verschobene Werbung auf allen Seiten
von Bigtuber Heute um 16:35

» [phpBB3] Standard für Beitragseingabe?
von Bigtuber Heute um 16:26

» [#10418] meine Mailadresse ändern und Auswirkungen auf servimg
von Kellytime Heute um 13:31

» Arcania - High-Fantasy-RPG
von Sheep007 Gestern um 20:10

» [phpBB3] Profile mit mehreren Icons?
von inde Di 25 Jul 2017 - 19:39

» [#10378] Guthaben mit Paypal bezahlt und nach 2 Tagen nicht in der Guthabenverw
von inde Mo 24 Jul 2017 - 16:47

» World-of-Horses
von inde So 23 Jul 2017 - 16:56

» Yorkshire Terrier Forum
von inde So 23 Jul 2017 - 16:55

» Hundeforum unter hundis.frei-forum.com
von inde So 23 Jul 2017 - 16:53

» Das Raubtierreich - Das Haustier-Talk- und Fotografie-Forum
von Emily Stein So 23 Jul 2017 - 15:22

» Naruto - SnK
von Aiko-Chan So 23 Jul 2017 - 12:07

» Weimaraner-Forum "Der vielseitige Weimaraner"
von Emily Stein So 23 Jul 2017 - 1:57

» My-Ponyclub
von Emily Stein So 23 Jul 2017 - 1:54

» Pflanzen-Samentauschbörse
von Emily Stein So 23 Jul 2017 - 1:54

» [Warrior Cats] FlammenClan
von Emily Stein So 23 Jul 2017 - 1:44

» Katzen Forum LoveCats
von Emily Stein So 23 Jul 2017 - 1:42

www.forumieren.de

[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

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:


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.


http://illiweb.com/fa/pbucket.gif
und

http://illiweb.com/fa/pbucket.gif
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!


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

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

Benutzerprofil anzeigen

Nach oben Nach unten

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:

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:


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

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

Benutzerprofil anzeigen

Nach oben Nach unten

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

Männlich Beiträge : 34606
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