[3.1] [3.2] Topic und Forum Icons mit Font Awesome

In diesem Forum können Style Autoren ihre Styles vorstellen, welche sich in der Entwicklung befinden. Beachtet bitte, dass solche Styles noch Fehler enthalten könnten.
Lehrling
Ehemaliges Teammitglied
Beiträge: 3833
Registriert: 15.01.2012 20:00
Kontaktdaten:

[3.1] [3.2] Topic und Forum Icons mit Font Awesome

Beitrag von Lehrling »

Du möchtest eigene Grafiken für die Forum- und Topic-Icons verwenden, kennst dich aber nicht mit Grafikprogrammen aus und kannst keine eigene erstellen? In diesem Fall kannst du auch die Icons von Font Awesome verwenden. Ich habe das mal mit Icons aus dem medizinischen Bereich gemacht. Mehr dazu: http://www.forumstyling.bplaced.net/vie ... p=413#p413
Benutzeravatar
Melmac
Ehemaliges Teammitglied
Beiträge: 3623
Registriert: 15.10.2012 03:27

Re: [3.1] [3.2] Topic und Forum Icons mit Font Awesome

Beitrag von Melmac »

Das muss ich jetzt gleich mal ausprobieren - der Ansatz gefällt mir jedenfalls schonmal :grin:
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)
Benutzeravatar
Tastenplayer
Mitglied
Beiträge: 2054
Registriert: 02.07.2010 19:35
Wohnort: Zuchwil/SO - Schweiz
Kontaktdaten:

Re: [3.1] [3.2] Topic und Forum Icons mit Font Awesome

Beitrag von Tastenplayer »

Der Link hat sich leider verabschiedet :cry:
Meine phpBB Styles & More
Be the best version of yourself rather than a bad copy of someone else!
Benutzeravatar
Melmac
Ehemaliges Teammitglied
Beiträge: 3623
Registriert: 15.10.2012 03:27

Re: [3.1] [3.2] Topic und Forum Icons mit Font Awesome

Beitrag von Melmac »

Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)
Benutzeravatar
Tastenplayer
Mitglied
Beiträge: 2054
Registriert: 02.07.2010 19:35
Wohnort: Zuchwil/SO - Schweiz
Kontaktdaten:

Re: [3.1] [3.2] Topic und Forum Icons mit Font Awesome

Beitrag von Tastenplayer »

Ich habe das jetzt mal im 3.2.3 TB Forum mit einem Style versucht.
Allerdings hatte ich nach dem Einfügen der Datei einen Fehler in der PN Anzeige [ externes Bild ]
Erst nach Konfiguration von Icons für die PN Benachrichtigung, stimmte das in meinem Style [ externes Bild ]

Code: Alles auswählen

.topic_moved:before					{ content: "\f047"; color:#0D4F8B; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.pm_read:before						{ content: "\f2b6"; color:#222222; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_read:before					{ content: "\f07b"; color:#222222; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_read_mine:before				{ content: "\f07b"; color:#4981CE; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_read_hot:before				{ content: "\f07c"; color:#222222; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_read_hot_mine:before			{ content: "\f07c"; color:#4981CE; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
									  
.topic_read_locked:before			{ content: "\f114"; color:#222222; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_read_locked_mine:before		{ content: "\f115"; color:#4981CE; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.pm_unread:before					{ content: "\f0e0"; color:#BF0000; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_unread:before				{ content: "\f07b"; color:#BF0000; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_unread_mine:before			{ content: "\f07b"; color:#FF7F50; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_unread_hot:before			{ content: "\f07c"; color:#bf0000; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_unread_hot_mine:before		{ content: "\f07c"; color:#FF7F50; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_unread_locked:before			{ content: "\f114"; color:#bf0000; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_unread_locked_mine:before	{ content: "\f115"; color:#FF7F50; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
[ externes Bild ] (Die mini Icon Legende stimmt allerdings noch nicht so ganz überein)
Meine phpBB Styles & More
Be the best version of yourself rather than a bad copy of someone else!
Lehrling
Ehemaliges Teammitglied
Beiträge: 3833
Registriert: 15.01.2012 20:00
Kontaktdaten:

Re: [3.1] [3.2] Topic und Forum Icons mit Font Awesome

Beitrag von Lehrling »

Ja, da war tatsächlich ein Fehler im Stylesheet. Danke für den Hinweis. Ich habe das jetzt korrigiert.
Benutzeravatar
Tastenplayer
Mitglied
Beiträge: 2054
Registriert: 02.07.2010 19:35
Wohnort: Zuchwil/SO - Schweiz
Kontaktdaten:

Re: [3.1] [3.2] Topic und Forum Icons mit Font Awesome

Beitrag von Tastenplayer »

Ausserdem muss man beachten, dass jetzt logischerweise die Beitragssymbole hinter dem Font Awesome Icon verschwinden. Hatte ich definitiv nicht dran gedacht :oops: . [ externes Bild ]

Code: Alles auswählen

dl.row-item dt {
	background-repeat: no-repeat;
	background-position: 24px 50%;		/* Position of topic icon */
	background-size: 18px;
}
Oder oben rechts [ externes Bild ]

Code: Alles auswählen

dl.row-item dt {
    background-repeat: no-repeat;
    background-position: 12px 10%;
    background-size: 18px;
}
Diese Beitragssymbole sollte man sowieso für jeden Style separat konfigurieren können. Einige erkennt man nicht in jedem Style.
Meine phpBB Styles & More
Be the best version of yourself rather than a bad copy of someone else!
Benutzeravatar
couchpilot
Mitglied
Beiträge: 140
Registriert: 11.02.2017 18:11

Re: [3.1] [3.2] Topic und Forum Icons mit Font Awesome

Beitrag von couchpilot »

Dankeschön Lehrling für diese klasse Möglichkeit Font Awesome Icons als Topic/Forum icons zu integrieren.

Ich hab dazu mal ne Frage, - wie kann man die Themen Symbole eine Ebene vor den fa icons erscheinen lassen ? Im Moment erscheinen sie versetzt dahinter. Also ich möchte das so, dass die Themen Symbole die fa icons überlappen und nicht anders herum ?

Denn ich möchte die fa icons ungerne weiter nach rechts versetzen und beide icons nebeneinander haben. Ich hab schon versucht aus dem "before" ein "behind" zu machen, aber dann sind die fa icons ganz verschwunden, wahrscheinlich liegen sie dann hinter dem background.

Die Codeschnipsel von Tastenplayer helfen mir da überhaupt nicht weiter, da ich nicht weiß ob es der Originalcode ist oder der bearbeitete, aus welchen Dateien sie kommen und was sie bewirken. :-?
Benutzeravatar
Tastenplayer
Mitglied
Beiträge: 2054
Registriert: 02.07.2010 19:35
Wohnort: Zuchwil/SO - Schweiz
Kontaktdaten:

Re: [3.1] [3.2] Topic und Forum Icons mit Font Awesome

Beitrag von Tastenplayer »

Hallo Couchpilot
Wenn ich Dich recht verstanden habe, willst Du das machen [ externes Bild ]
Das geht nicht, denn die Font-Awesome Icons kommen immer über das Symbol respektive das Symbol verschwindet hinter dem Font Awesome Icon.
Jedenfalls bei mir war das so. Du kannst sie aber versetzt machen - also dass das Symbol oben rechts über dem Font Icon ist. [ externes Bild ] Beim breitesten/höchsten Font Icon anpassen. Es hat genug Platz oben, dass Du die da noch hinsetzen kannst.
Leider sind diese Beitragssymbole ja im Acp (phpBB) konfiguriert und nicht im Style. Also für alle Styles die gleichen.
Meine phpBB Styles & More
Be the best version of yourself rather than a bad copy of someone else!
Benutzeravatar
couchpilot
Mitglied
Beiträge: 140
Registriert: 11.02.2017 18:11

Re: [3.1] [3.2] Topic und Forum Icons mit Font Awesome

Beitrag von couchpilot »

Schade das da kein Anderer eine Idee hat wie das vielleicht doch noch zu realisieren ist.

Dann bitte ich Dich darum Deine Lösung zu konkretisieren. Ich nehme mal an dieses hier ist Dein Lösungsansatz für den Fall:
Tastenplayer hat geschrieben:Oder oben rechts [ externes Bild ]

Code: Alles auswählen
dl.row-item dt {
background-repeat: no-repeat;
background-position: 12px 10%;
background-size: 18px;
}


Dann schreibe doch bitte noch die vollständige Pfadangabe dazu wo ich das ändern muß, damit ich mir das mal anschauen kann.
Antworten

Zurück zu „Styles in Entwicklung“