[Alle Versionen] Einzelne Profilfelder gestalten

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;
}

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:



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



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



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:

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:



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;
}

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;
}

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;
}

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