Seite 1 von 1

[3.2] Icons für benutzerdefinierte Profilfelder

Verfasst: 04.03.2017 20:38
von Cowboy of Bottrop
Hallo Leute,

ist es möglich, den benutzerdefinierten Profilfeldern Icons hinzuzufügen, die dann wie Mail oder Website bei den Kontaktmöglichkeiten angezeigt werden? Wenn mehrere Kontaktmöglichkeiten mit einem Standardsymbol versehen sind, wird es unübersichtlich.
[ externes Bild ]
Anstelle des Standard-Symbols würde ich gerne folgendes einbinden:
[ externes Bild ]

Wenn es da Möglichkeiten gibt, bin ich für zielführende Antworten dankbar.

Keep it Country,
Markus aka Cowboy

Re: [3.2] Icons für benutzerdefinierte Profielfelder

Verfasst: 04.03.2017 23:30
von Talk19zehn
Hello, ich weiß nicht genau, ob das im Sinne der Erfinder ist, was ich als Idee vorschlage und in meinem Falle funktioniert. Du hast, wie ich deiner Grafik entnehme, ein benutzerdefiniertes Profilfeld angelegt, welches du im ACP wie folgt steuerst: Feld als Kontakt anzeigen: Ja = Haken gesetzt

Nehmen wir an, dein Feld heißt Verein, so legt phpBB die Klasse verein-icon automatisch an. Diese siehst du im Quelltext der viewtopic_body.html:

<span class="contact-icon verein-icon">Verein</span>

Nun kannst du in der colour.css der Klasse ein background-image zuweisen. Wenn ich korrekt dem phpBB-Quelltext entnahm, sollte deine gesamte Grafik möglichst nicht größer als 16x16px sein und sie müsste zweckmäßiger Weise einen transparenten Hintergrund haben.

Die Grafik lädst du in das Verzeichnis z.B.: .../phpBB3/styles/prosilver/theme/images

Das CSS sieht dann so aus: Ich habe ein .png-Format genutzt.

Code: Alles auswählen

.verein-icon {
	background-image: url("./images/deinbildverein16x16.png");
}

Nach der Bearbeitung und dem Seitenaufruf im Browser bitte Caches clearen. In meinem Falle funktioniert´s in ersten Schritten. Dennoch ohne Gewähr, da dies nur ein erster Test ist und ich nicht alle Möglichkeiten der Anzeige (Ausgabe) durchspielte.

LG

Re: [3.2] Icons für benutzerdefinierte Profielfelder

Verfasst: 05.03.2017 11:07
von Cowboy of Bottrop
Danke, das war es. Allerdings musste ich an die CSS-Auszeichnung noch ein !important anhängen, damit meine Icon angezeigt wird:
.mytischtennis_de-icon { background-image: url("./images/mytischtennis.png") !important; }

Keep it Country,
Markus aka Cowboy