Das Forum der Foren
Willkommen im offiziellen Support-Forum von Forumieren! [Alle Versionen] Einzelne Profilfelder gestalten Icon_king

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

[Alle Versionen] Einzelne Profilfelder gestalten Icons-100

Erstellen Sie ein kostenloses Forum wie dieses hier.
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
» Passwort wird als ungültig angezeigt bei Einloggen über Smartphone
von Mikado Gestern um 15:54

» Kochen-Backenforum stellt sich vor
von lilien Do 24 Sep 2020 - 16:13

» Anderes Style einbauen
von lilien Do 24 Sep 2020 - 16:09

» Black Heaven - Wo Licht ist, ist auch Schatten - Fantasy - FSK 18
von Black Heaven Do 24 Sep 2020 - 11:44

» Übersicht der im Kalender eingetragenen Termine im Index
von Bigtuber So 20 Sep 2020 - 11:38

» Unterschiedliche Größe des Hintergrundes in der Galerie
von QuadkinderRheinMain Sa 19 Sep 2020 - 17:47

» [phpBB2] Unterforen Nebeneinander
von Jen K. Sa 19 Sep 2020 - 16:34

» in altes Forum einloggen
von MoonandMe Mi 16 Sep 2020 - 8:40

» Zugang erst ab einer Mindestanzahl von Postings
von kairos Mo 14 Sep 2020 - 18:08

» [ohne Präfix] Fremdes Design?
von QuadkinderRheinMain Mo 14 Sep 2020 - 12:08

» Die Forum Pakete
von Trueman Mo 14 Sep 2020 - 11:11

» [ModernBB] Neue Mitglieder können sich nicht anmelden
von Bigtuber Sa 12 Sep 2020 - 2:21

» Error Bad Gateway beim hochladen von Bildern
von Ray Do 10 Sep 2020 - 19:42

» Forenpakete mit Guthabeneinheiten bezahlen
von Trueman Mi 9 Sep 2020 - 21:58

» [Mitteilung] Wartungsarbeiten am Montag, 7. September
von Bigtuber So 6 Sep 2020 - 21:41

» [ModernBB] PNs von gelöschten Mitgliedern einsehbar?
von Kyra Fr 4 Sep 2020 - 10:08

» Neue Beiträge in einer Zeile
von Kyra Mi 2 Sep 2020 - 15:27

» Typen-Möglichkeit der Profilfelder auch für Charakterbogen-Felder
von Kyra So 30 Aug 2020 - 20:17

[Alle Versionen] Einzelne Profilfelder gestalten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Wichtiges Thema [Alle Versionen] Einzelne Profilfelder gestalten

Beitrag von Sarai am So 17 Nov 2019 - 15:34

Vorwort

Manch einer mag sich vielleicht fragen, ob es wirklich keine Möglichkeit gibt, einzelne Profilfelder zu gestalten. Gerade für Rollenspielforen ist es doch oftmals interessant, das Profil in Beiträgen passend für den zu spielenden Charakter zu gestalten. Man möchte Informationen wie kurze Beschreibungstexte oder kurze Fakten gerne entsprechend präsentieren können, ohne dass das Forendesign darunter leidet. Tatsächlich, es geht! Auch ganz ohne Script, sondern lediglich mit einem bisschen CSS und wenigen Anpassungen im Template viewtopic_body.

Ich möchte erwähnen, dass ich Laie bin und in diesem Tutorial sicherlich nicht alle potenziellen Fehlerquellen berücksichtigt haben mag. Sollten daher Fragen oder Probleme auftreten, darf man sich gerne in diesem Thread melden und nach einer Lösung erkundigen. Das Tutorial werde ich nach Bedarf auch erweitern und korrigieren, sollten Dinge auftreten, die ich zuvor nicht bedacht oder schlicht nicht auf dem Schirm hatte, aber natürlich auch, wenn etwas zu unklar formuliert war.



Um einzelne Profilfelder in der Beitragsansicht ansprechen zu können, hilft uns eine Pseudoklasse weiter. Hierbei handelt es sich um :nth-child, was es uns ermöglicht, das n-te, folgende Kind eines Elternelements anzusprechen. Bevor ich auf die Anwendung im Forum eingehen möchte, möchte ich mit einigen kurzen Beispielen erläutern, wie diese Pseudoklasse eigentlich funktioniert.

Im nachfolgendem Beispiel möchte ich mit Hilfe von :nth-child lediglich das zweite span ansprechen und rot einfärben.

HTML

Code:
<div>
  <span>Ich bin ein Text.</span>
  <span>Ich bin ein Text.</span>
  <span>Ich bin ein Text.</span>
</div>

CSS

Code:
span:nth-child(2){
color: red;
}

[Alle Versionen] Einzelne Profilfelder gestalten Screen12

Wie im Beispiel zu sehen ist, erreiche ich mein Vorhaben, indem ich :nth-child mit der Angabe (2) genauer definiere. Hierbei können wir jedoch auch bestimmen, dass jedes zweite oder jedes dritte Element angesprochen werden soll. Das funktioniert mit :nth-child(2n) oder auch :nth-child(2n+0) - gerade Letzteres eröffnet uns die Möglichkeit, statt jedem zweiten oder dritten Element, auch andere Regeln aufzustellen.

Mit :nth-child(2n) und :nth-child(2n+0) erreichen wir also folgendes:

[Alle Versionen] Einzelne Profilfelder gestalten Screen13

Wir können jedoch auch noch ganz andere Regeln aufstellen und hierbei hilft uns die kleine an Mathematik erinnernde Formel weiter: 2n+0
In diesem Fall sagt 2n+0 aus, dass jedes zweite Element angesprochen werden sollen, wie in dem obigen Beispiel. 2n bestimmt hierbei den Abstand, indem Elemente angesprochen werden sollen, das +0, ab welchem Element begonnen werden soll. Also eigentlich ganz einfach!

In folgendem Beispiel wird also ab dem 3. Element begonnen und jedes weitere Element markiert. Sprich, 1n+3

[Alle Versionen] Einzelne Profilfelder gestalten Screen14

Oder aber wir geben mit 2n+3 an, dass ab dem 3. Element jedes zweite markiert werden soll:

[Alle Versionen] Einzelne Profilfelder gestalten Screen15

Das kann natürlich noch deutlich mehr variiert werden. Also gerne rumprobieren!

Wichtig zu wissen bei der Verwendung von :nth-child ist jedoch auch, dass zwischen Elternelement und dem Element, das wir ansprechen, keine anderen Elemente stehen sollten. Denn :nth-child berücksichtigt diese Elemete bei seiner Nummernvergabe, sodass wir beim Schreiben des Codes umdenken müssten. Setzen wir ein Element, das nicht angesprochen wird, voran, gilt unser erstes span als (2), nicht mehr als (1). Hier ein kleines Beispiel zur Veranschaulichung:

[Alle Versionen] Einzelne Profilfelder gestalten Screen16

HTML

Code:
<div>
  <div>Hallo, ich nerve!</div>
  <span>01. Ich bin ein Text.</span>
  <span>02. Ich bin ein Text.</span>
  <span>03. Ich bin ein Text.</span>
  <span>04. Ich bin ein Text.</span>
  <span>05. Ich bin ein Text.</span>
  <span>06. Ich bin ein Text.</span>
  <span>07. Ich bin ein Text.</span>
  <span>08. Ich bin ein Text.</span>
  <span>09. Ich bin ein Text.</span>
  <span>10. Ich bin ein Text.</span>
</div>

CSS

Code:
span:nth-child(2){
color: red;
}

Dabei wird das Element, das sich dazwischendrängt, nur in Sachen Nummerierung gültig. Würden wir jetzt versuchen, dieses Element mit der Angabe (1) anzusprechen, würde dies nicht funktionieren. Daher ist es ratsamer, innerhalb des Elternelements keine anderen Elemente vor das Element zu setzen, das mit :nth-child angesprochen werden soll. Andernfalls könnte der Code ziemlich schnell ziemlich unübersichtlich werden.



Jetzt, wo die Theorie aus dem Weg ist, kommen wir zur Anwendung in der Beitragsansicht. Vorher gibt es jedoch noch etwas Wichtiges zu wissen und ein kleiner Tipp meinerseits, wie man sich etwas Übersichtlichkeit schaffen kann.

Bevor wir unsere Profilfelder also gestalten, sollten wir uns vergewissern, dass die Profilfelder, die wir aufwendiger gestalten wollen (z. B. eine größere Box für Charaktertexte), als Pflichtfelder markiert und für alle Nutzer und Gäste sichtbar sind. Das ist deshalb wichtig, weil mit :nth-child nur sichtbare Elemente angesprochen werden können. Haben wir also nun eine große Box für einen Charaktertext, ein Nutzer füllt dieses Profilfeld allerdings nicht aus, dann würden andere Profilfelder verrutschen und in dieser Box landen. Dadurch könnte sich dementsprechend das Design etwas verzerren und abstrakt wirken. Das möchten wir natürlich vermeiden. Weniger wichtig sind Pflichtfelder aber natürlich, wenn ich die Felder z. B. nur farbig hinterlegen möchte und es daher keine Rolle spielt, welches Feld konkret angesprochen wird.

Wenn wir die Pflichtfelder gesetzt haben, kann uns die gleiche Auflistung der Profilfelder unter Benutzer & Gruppen -> Benutzer -> Profile auch dabei helfen, unsere Zahlen für die Profilfelder festzulegen, indem wir die benötigten Pflichtfelder nach oben verschieben. So, dass wir unsere wichtigen Felder ab 1 beginnend haben:

[Alle Versionen] Einzelne Profilfelder gestalten Screen17

Hiermit haben wir jetzt eine nette Liste, welche Zahl für welches Profilfeld steht, sofern wir die bisherigen Tipps natürlich berücksichtigt haben. Das schafft uns ein wenig Übersichtlichkeit, wenn wir mit :nth-child und seinen Nummern arbeiten.

Sind die nötigen Profilfelder als Pflichtfelder markiert?
Sind die Profilfelder auch für Nutzer und Gäste sichtbar?
Habe ich die besagten Profilfelder in der Liste nach oben verschoben?

Dann können wir zum nächsten Schritt übergehen!

Nun gehen wir ins Template viewtopic_body und suchen uns den folgenden, kleinen Abschnitt heraus. Ich habe hier mit phpBB3 gearbeitet. In den anderen Versionen sollte es sich aber nicht groß unterscheiden.

Code:
<dd>
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</dd>

Nun setzen wir innerhalb des HTML-Kommentars ein Element mit Klasse, mit dem wir arbeiten wollen. Vergessen wir hier aber auch nicht, dass <dd> uns in einem unveränderten Template als Elternelement dient. Im Idealfall sollte wie oben bereits erwähnt, nun kein anderes Element mehr zwischen <dd> und unserer gewählten Klasse liegen. Ich habe mich nun für Folgendes entschieden:

Code:
<dd>
<!-- BEGIN profile_field -->
<div class="profil-darstellung">
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
</div>
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</dd>

Wichtig! Für die Versionen punBB und phpBB2 muss man noch eine kleine Ergänzung vornehmen, da das Elternelement zu weit auseinanderliegt. In diesen Versionen schreibt ihr vor den HTML-Kommentaren einfach ein <div> hinzu. Wie hier:

Code:
<div>
<!-- BEGIN profile_field -->
<div class="profil-darstellung">
{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
</div>
<!-- END profile_field -->
</div>

Jetzt können wir das geänderte Template abspeichern und uns unserem CSS widmen! Der Rest funktioniert nun genau wie oben erklärt. Außer, dass wir hier natürlich mit unserer gewählten Klasse, statt mit span arbeiten. Mit :nth-child können wir nun ganz individuell gestalten, was ich euch hier in einem kleinen Beispiel darstellen möchte:

CSS

Code:
/* Name */
.profil-darstellung:nth-child(1){
  background-color: #e4e1e1;
  width: 138px;
  height: 20px;
  line-height: 20px;
  border: 1px solid #9d9090;
  padding: 0px 5px;
}

/* Herkunft */
.profil-darstellung:nth-child(2){
  background-color: #bed6e4;
  width: 138px;
  height: 20px;
  line-height: 20px;
  border: 1px solid #7a9bae;
  padding: 0px 5px;
  margin-top: 2px;
}

/* Charaktertext */
.profil-darstellung:nth-child(3){
  background-color: #ececec;
  border: 1px solid #a3a3a4;
  height: 80px;
  margin-top: 2px;
  padding: 5px;
  width: 138px;
  overflow-y: scroll;
}

[Alle Versionen] Einzelne Profilfelder gestalten Screen18

Im Übrigen lassen sich hier auch die Profilfeldnamen ganz einfach ändern. Dafür benötigen wir lediglich den kleinen Zusatz .label, der für die Namen zuständig ist. Diese Klasse setzen wir dann im CSS hinter unsere mit :nth-child bestückten Klassen. Das kann dann so aussehen:

Code:
/* Name - Label */
.profil-darstellung:nth-child(1) .label{
  text-decoration: underline;
}

/* Herkunft - Label */
.profil-darstellung:nth-child(2) .label{
  background-color: #fff;
}

/* Charaktertext - Label */
.profil-darstellung:nth-child(3) .label{
  display: none;
}

[Alle Versionen] Einzelne Profilfelder gestalten Screen19

Im Großen und Ganzen war es das auch schon! Mit dieser einfachen Pseudoklasse lassen sich die Profilfelder ganz eigens gestalten. Natürlich sind das hier nur sehr einfache Beispiele. Theoretisch lässt sich damit aber so gut wie alles Denkbare umsetzen. Zusätzliche Icons, die sich an anderer Stelle befinden, selbst eintragbare Rangnamen, Banner zu Charakteren, die man den Beiträgen voransetzt und vieles mehr!

Als abschließenden Tipp kann ich noch mit auf dem Weg geben, dass die Variablen, sprich dieser Teil

Code:
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->

im Template auch mehrfach eingesetzt werden können. Das kann hilfreich sein, um Profilfelder voneinander abzuspalten, um bspw. einen Teil hinter einem Mouseover zu verstecken, während ein anderer Teil noch anderorts schlummert. Mit Hilfe von :nth-child lassen sich einzelne Profilfelder auch ganz einfach aus- und einblenden, sofern man für jedes Päckchen natürlich verschiedene Klassen wählt. Das funktioniert so:

Code:
.profil-darstellung{
  display: none;
}

.profil-darstellung:nth-child(1){
  display: block;
}

[Alle Versionen] Einzelne Profilfelder gestalten Screen20

Wir bestimmen hier also mit display: none; dass die Profilfelder nicht angezeigt werden sollen. Mit display: block; bei der Klasse .profil-darstellung:nth-child(1) aber wiederum, dass dieses erste Element doch angezeigt werden soll. So können wir einzelne Profilfelder auch an ganz andere Orte verschieben, wo sie designtechnisch eben gerade gebraucht werden.

Abschließende Worte

Ich hoffe, dass ich mit diesem kleinen Tutorial weiterhelfen konnte und es dabei hilft, so manche Designwünsche zuverlässig umzusetzen. Wenn ihr euch an diesem Tutorial entlanghangelt, wäre es natürlich ganz schön, wenn ihr vielleicht ein kleines Credit in eurem Forum hinterlassen und zu diesem Thema verlinken könntet. Dann wissen auch andere neugierige Nasen, die euer Forum betrachten, wo sie ein wenig Hilfe finden können.

Natürlich sollte es klar sein, aber ich erwähne es dennoch lieber nochmal:
Bitte kopiert dieses Tutorial nicht ungefragt und stellt es in anderen Foren ein! Ihr könnt jederzeit zu diesem Thema verlinken. Damit sei natürlich auch gesagt, dass dieses Tutorial bitte von niemandem als sein Eigentum ausgegeben wird. Ich habe mir schon etwas Zeit genommen, um manche Dinge näher zu beleuchten, von daher ist es nur fair und es wäre natürlich schade, wenn man mir diese Leistung aberkennen würde.

Ansonsten können im Zweifel gerne Fragen gestellt werden, sollte etwas so gar nicht funktionieren.



Edit:
Und auch schon die erste Ergänzung. Erklärung für punBB und phpBB2 hinzugefügt, da mir diese sehr simple Lösung irgendwie hintenrüber gefallen ist :'D
Sarai
Sarai
Lehrling
Lehrling

Weiblich Beiträge : 12
Anmeldedatum : 31.08.18
keine
Mozilla Firefox phpBB3

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