[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
Supporter
Supporter
Beiträge: 3222
Registriert: 15.01.2012 20:00
Kontaktdaten:

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

Beitragvon Lehrling » 14.02.2018 16:19

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
Supporter
Supporter
Beiträge: 3449
Registriert: 15.10.2012 03:27

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

Beitragvon Melmac » 14.02.2018 16:41

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: 1370
Registriert: 02.07.2010 19:35
Wohnort: Zuchwil/SO - Schweiz
Kontaktdaten:

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

Beitragvon Tastenplayer » 04.09.2018 12:54

Der Link hat sich leider verabschiedet :cry:
Mein Portal: https://www.portal.my-tastenworld.ch/ Mein Forum: https://www.forum.my-tastenworld.ch/
The best online translator comes from Köln DE
Be the best version of yourself rather than a bad copy of someone else!

Benutzeravatar
Melmac
Supporter
Supporter
Beiträge: 3449
Registriert: 15.10.2012 03:27

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

Beitragvon Melmac » 04.09.2018 13:10

Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)

Benutzeravatar
Tastenplayer
Mitglied
Beiträge: 1370
Registriert: 02.07.2010 19:35
Wohnort: Zuchwil/SO - Schweiz
Kontaktdaten:

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

Beitragvon Tastenplayer » 13.11.2018 12:13

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)
Mein Portal: https://www.portal.my-tastenworld.ch/ Mein Forum: https://www.forum.my-tastenworld.ch/
The best online translator comes from Köln DE
Be the best version of yourself rather than a bad copy of someone else!

Lehrling
Supporter
Supporter
Beiträge: 3222
Registriert: 15.01.2012 20:00
Kontaktdaten:

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

Beitragvon Lehrling » 14.11.2018 08:38

Ja, da war tatsächlich ein Fehler im Stylesheet. Danke für den Hinweis. Ich habe das jetzt korrigiert.

Benutzeravatar
Tastenplayer
Mitglied
Beiträge: 1370
Registriert: 02.07.2010 19:35
Wohnort: Zuchwil/SO - Schweiz
Kontaktdaten:

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

Beitragvon Tastenplayer » 16.11.2018 18:20

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.
Mein Portal: https://www.portal.my-tastenworld.ch/ Mein Forum: https://www.forum.my-tastenworld.ch/
The best online translator comes from Köln DE
Be the best version of yourself rather than a bad copy of someone else!


Zurück zu „Styles in Entwicklung“