Bug+Workaround: Forum zeigt bei Like-Button ♥-Symbol statt „F“ an

mabby · 1. April 2016 um 10:01

Wenn ich das „F“/„f“ sehe, denkt ich immer an den hier:

Martin · 1. April 2016 um 10:15

@mabby Interessante Assoziation. Komödiantisches Gold. Es steht dir übrigens frei, das Skript so anzupassen, dass das besagte Wort statt des Buchstabens „F“ verwendet wird.

zwecki · 1. April 2016 um 10:26

Mit Firebug oder ähnlichen Entwicklertools ist das Ganze noch leichter. Einfach das entsprechende Symbol markieren und die CSS-Regel den eigenen Wünschen anpassen.

EDIT: Für das Lesezeichen funktioniert das natürlich nicht. Da muss man weiterhin auf die Methode von @martin zurückgreifen.

TbMzockt · 1. April 2016 um 10:31

Das glaube ich eher weniger… DANSGAME

Aber danke das du dir sorgen machst… SEEMSGOOD

mabby · 1. April 2016 um 10:47

mmmmh vielleicht mach ich das sogar…

Wo die Assoziation herkommt kann ich nicht sagen…mein Kopf macht viele so Sachen…

Martin · 1. April 2016 um 12:18

Ich finde das tatsächlich etwas schwieriger, als das Übernehmen des kleinen Stücks JavaScript.

[quote=„zwecki, post:17, topic:2050“]
Einfach das entsprechende Symbol markieren und die CSS-Regel den eigenen Wünschen anpassen. [/quote]Tatsächlich habe ich genau das mit den Firefox Entwicklertools gemacht. Damit ich diese Regelveränderung dann immer mit einem Klick anwenden konnte, habe ich dann mit der JavaScript-Konsole diese zwei Zeilen Script gebaut.

zwecki · 1. April 2016 um 12:35

Nun gut, dann jetzt eben mal Butter bei die Fische. Hier also mal ein richtiges Workaround für den Firefox-Browser:

Öffne einen neuen Tab und schreibe “about:support” in die Adresszeile und drücke die Enter-Taste. Es öffnet sich die Hilfeseite.
Unter “Allgemeine Informationen” findest du den Eintrag “Profilordner” und daneben einen Knopf zum Öffnen des Ordners. Klicke auf den Knopf. Der Ordner öffnet sich im Explorer.
Wenn du in diesem Ordner einen “chrome”-Ordner findest, navigiere dort hinein. Wenn nicht, lege einen Ordner mit dem Namen “chrome” an und navigiere anschließend hinein.
Lege eine neue Textdatei Im “chrome”-Ordner an und öffne die Datei mit dem Editor.
Füge folgenden Inhalt ein:

@-moz-document domain(forum.rocketbeans.tv) { .fa.fa-heart::before { content: "F" !important; } }

- Gehe im Editor auf "Speichern unter...". Schreibe als Dateiname "userContent.css" hin und wähle als Dateityp "Alle Dateien" aus. Klicke auf Speichern. - Jetzt sollten sich 2 Dateien im "chrome"-Ordner befinden. Eine Textdatei und eine "userContent.css"-Datei. Lösche die Textdatei. - Starte Firefox neu. Die Herzen auf der Seite sollten jetzt alle durch "F" ersetzt worden sein.

So kann man, wenn man möchte, die Seite optisch beliebig verändern. Wenn ihr statt dem oben Angegebenen den folgenden Inhalt in eure “userContent.css” schreibt, seht ihr beispielsweise statt der Herzen einen Daumen nach oben im typischen Facebook-blau:

@-moz-document domain(forum.rocketbeans.tv) { .fa.fa-heart::before { content: "\f164" !important; } .has-like { color: #3b5998 !important; } .like:hover { color: #3b5998 !important; background: #dfe3ee !important; } }

Martin · 1. April 2016 um 13:01

Großartig, vielen Dank! Tatsächlich hatte ich genau das gemacht, war aber noch nicht dazu gekommen, die etwas umständlichere Anleitung hier aufzuschreiben.

zwecki · 1. April 2016 um 13:23

Freut mich, dass ich helfen kann

Martin · 1. April 2016 um 14:49

@zwecki Das hast du in der Tat getan. Vielleicht finden sich ja auch noch Chrome-User, die ein entsprechendes Userstyle/Userscript anfertigen möchten.

zwecki · 1. April 2016 um 15:58

In Chrome gibt es, soweit ich das überblicke, nur die Möglichkeit, das Ganze über Plugins zu realisieren.

Besorg dir das Plugin Stylish (gibt es übrigens auch für Firefox, da habe ich es aber nicht getestet). Klicke dazu auf der verlinkten Seite auf den “Hinzufügen”-Knopf oben rechts in der Box.
In der Addon-Liste (bei mir ist die direkt oben neben der Adresszeile) erscheint ein neues Symbol für das Plugin. Klicke da drauf.
Ganz unten in der kleinen Box, die aufgeht, steht “Style erstellen für:” und dahinter befindet sich ein Link. Klicke diesen Link an. Es öffnet sich die Seite “Style hinzufügen” in einem neuen Tab.
Um das “F” zu bekommen, füge Folgendes in die große Box auf der rechten Seite ein.

.fa.fa-heart::before { content: "F"; }

- Gebe in das Feld ganz oben auf der linken Seite anschließend deinem Style noch einen Namen. Dann klicke darunter auf Speichern. - Schließe die Seite. Nun kannst du auf der Seite, für die du den Style hinzugefügt hast, diesen jederzeit über das Stylish-Symbol aktivieren oder deaktivieren. Die Änderungen siehst du sofort, ohne neu laden zu müssen.

Falls jemand auch hier gerne den Facebook-blauen Daumen nach oben haben möchte, füge er bitte das Folgende in seinen Style ein.

.fa.fa-heart::before { content: "\f164"; } .has-like { color: #3b5998 !important; } .like:hover { color: #3b5998 !important; background: #dfe3ee !important; }

zwecki · 1. April 2016 um 16:16

In Opera gibt es eine ähnliche Erweiterung mit dem Namen User CSS. Die ist sogar noch leichter zu handhaben. Ihr müsst einfach das Plugin installieren, dann Opera neustarten und auf der zu ändernden Seite oben auf blauen Knopf mit der “{CSS}”-Beschriftung klicken. Dann schiebt sich eine Box ins Bild. In diese Box einfach einen der Codes, die ich im Post über diesem für Chrome angegeben habe, einfügen. Anschließend klickt ihr nochmal auf den Knopf mit der “{CSS}”-Beschriftung und die Box verschwindet wieder. Ihr braucht die Seite nicht neuladen. Die Änderungen wirken sofort.

coffeebean · 1. April 2016 um 19:17

You da real MVP

zwecki · 2. April 2016 um 09:52

Irgendwie hab ich Gefallen an dem Thema gefunden

Da hier ja doch einige Reddit-Fans rumlaufen, dachte ich, gebe ich euch noch schnell den Code um einen Upvote-Pfeil nach Reddit-Vorbild zu bekommen.

userContent.css (Firefox)

@-moz-document domain(forum.rocketbeans.tv)
{
    .fa.fa-heart::before
    {
        content: „\f062“;
    }
    .has-like
    {
        color: #ff4400 !important;
    }
    .like:hover
    {
        color: #a8a8a8 !important;
        background-color: rgba(0, 0, 0, 0.07) !important;
    }
}

Stylish-Plugin (Chrome) & User-CSS-Plugin (Opera)

.fa.fa-heart::before { content: "\f062"; } .has-like { color: #ff4400 !important; } .like:hover { color: #a8a8a8 !important; background-color: rgba(0, 0, 0, 0.07) !important; }

Ergebnis

Vielen Dank für Ihre Aufmerksamkeit!

Martin · 2. April 2016 um 19:02

Danke für deine aktive Mitarbeit @zwecki! Der Upvote-Knopf ist auch eine gute Idee. Es freut mich, dass du daran Spaß hast.

KIMI · 2. April 2016 um 19:12

Ich empfehle
.fa.fa-heart::before { content: “\f062 \f063”; }

Damit ist auch downvoten kein Problem mehr!

Martin · 3. April 2016 um 14:07

@KIMI Damit warst du einen Tag zu spät.

zwecki · 4. April 2016 um 09:16

@KIMI Wobei für’s Downvoten keine Funktionalität da ist.

@Martin Kein Problem. Ich bin von Beruf Webentwickler (vorwiegend Front End), ich muss an sowas Spaß haben. ^^

Martin · 4. April 2016 um 12:41

War wohl ein verspäteter Aprilscherz.

plasmaniac · 4. April 2016 um 14:27

Echt? DansGame

Bug+Workaround: Forum zeigt bei Like-Button ♥-Symbol statt „F“ an

userContent.css (Firefox)

@-moz-document domain(forum.rocketbeans.tv) { .fa.fa-heart::before { content: „\f062“; } .has-like { color: #ff4400 !important; } .like:hover { color: #a8a8a8 !important; background-color: rgba(0, 0, 0, 0.07) !important; } }

Stylish-Plugin (Chrome) & User-CSS-Plugin (Opera)

Ergebnis

@-moz-document domain(forum.rocketbeans.tv)
{
.fa.fa-heart::before
{
content: „\f062“;
}
.has-like
{
color: #ff4400 !important;
}
.like:hover
{
color: #a8a8a8 !important;
background-color: rgba(0, 0, 0, 0.07) !important;
}
}