Forum: Gefällt mir Button austauschen

2002Andreas

Es gibt ja jetzt den neuen: Gefällt mir Button im Forum:

Wer dafür gerne ein anderes Icon möchte, z.B. Daumen hoch, der kann das mit einem CSS Code in der userContent.css machen.

CSS

@-moz-document domain("camp-firefox.de") {

.reactButton {
    background:url("file:///C:/Users/weiss/AppData/Roaming/Mozilla/Firefox/Profiles/7hfpu74u.Test Fx/chrome/Icons/like1.png")!important;
    margin-right: 6px !important; 
    margin-left: 4px !important;
    content: '' !important;
    display: block !important;
    width: 22px !important;
    height: 26px !important;
    background-repeat: no-repeat !important;
    background-position: 3px 5px !important;
}

.reactButton > fa-icon {
   display: none !important;
}
 }

Alles anzeigen

Die Werte kann/muss sich jeder dann selber anpassen:

Hier noch das obige Icon dazu:

Edit:

Besser ist der angepasste Code aus Beitrag Nr. 6

Boersenfeger

Dankeschön, habe ich gleich mal adoptiert.

Dharkness

Zitat von 2002Andreas

Die Werte kann/muss sich jeder dann selber anpassen:

Sehr schön, gleich noch um einen Eintrag bei .reactButton reduziert und background-position, height und width angepasst und schon sieht es auch hier gut aus, Dankeschön.

startup

Zitat von 2002Andreas

Hier noch das obige Icon dazu:

Guter Vorschlag, oder Variante. Danke auch von mir.

Speravir

Wenn man den Knopf fürs Dankesagen benutzt hat, wird er standardmäßig eingefärbt. Es wäre sinnvoll, das zu berücksichtigen. Man müsste dazu eine Regel für .reactButton.active einführen. ~~Wenn man eine SVG statt einer PNG (oder andere Pixelgrafik) nimmt, kann man~~ ~~fill~~ ~~für die Färbung anwenden. Einfache farblose schwarz-weiße Daumen-hoch-SVG gibt es beispielsweise bei Wikimedia Commons:~~ ~~Plain black SVG thumbs up icons. Es kann sein, dass das ausgewählte Symbol kein~~ ~~fill~~ ~~vorsieht, dann sollte die Deklaration~~ ~~-moz-context-properties: fill;~~ ~~hilfreich sein (zusätzlich zu~~ ~~fill: $Farbe$;~~).
~~Edit:~~ ~~O, ich sehe gerade eine dritte Möglichkeit: Das Symbol, mit dem ich eben herumexperimentieren wollte (File:Thumbs up font awesome.svg~~ – ~~Link zur Originaldatei), benötigt gar keine weitere Behandlung. Es reicht, die Datei einzubinden, denn man findet in der SVG diese Stilanweisung:~~ ~~style="fill:currentColor"~~.

Nachtrag: Stimmt so leider nicht. Es ist viel komplexer. Deshalb durchgestrichen.

2002Andreas

Zitat von Speravir

wird er standardmäßig eingefärbt

Danke für den Hinweis, das habe ich dann mal angepasst.

Und so nach Aktivierung:

CSS

@-moz-document domain("camp-firefox.de") {

a.reactButton {
    background: url("..//Icons/Like4.svg") no-repeat !important;
    margin-right: 3px !important; 
    margin-left: 4px !important;
    width: 31px !important;
    background-position: 3px 7px !important;
    scale: .8 !important;
}

a.reactButton.active {
   filter: invert(12%) sepia(255%) saturate(4294%) hue-rotate(354deg) brightness(108%) contrast(120%)!important;
   opacity: 1 !important;
}

a.reactButton > fa-icon {
   display: none !important;
}
}

Alles anzeigen

Die Werte wenn dann wieder anpassen.

Hier das obige Icon wieder dazu:

Like4.svg

Boersenfeger

Tja, bei mir klappts noch nicht so recht..

Ich sehe beide Bildchen. Wo hakt es? Übrigens auch, wenn ich das Icon aus #1 verwende.

Der Pfad ist anonymisiert!

CSS

/* Reaktionsbutton Firefoxforum */

 @-moz-document domain("camp-firefox.de") {

 a.reactButton {
    background:url("file:///C:/Users/xxxxxx/AppData/Roaming/Mozilla/Firefox/Profiles/5p31hc0i.Nightly/chrome/Icons/Like4.svg")!important;
    margin-right: -6px !important; 
    margin-left: 10px !important;
    width: 22px !important;
    height: 26px !important;
    background-position: -3px 2px !important;
 }

 a.reactButton.active {
   filter: invert(12%) sepia(255%) saturate(4294%) hue-rotate(354deg) brightness(108%) contrast(120%)!important;
   opacity: 1 !important;
 }
 }

Alles anzeigen

2002Andreas

Zitat von Boersenfeger

Ich sehe beide Bildchen.

Füg das bitte mal hinzu, und teste.

CSS

a.reactButton > fa-icon {
   display: none !important;
}

Büssen

Zitat von 2002Andreas

Füg das bitte mal hinzu, und teste.

Hatte das gleiche obige Verhalten, mit dem Zusatz ist alles wieder OK!

2002Andreas

Zitat von Büssen

mit dem Zusatz ist alles wieder OK!

Hallo Büssen.

Danke für den Hinweis, das war wohl ein Kopierfehler von mir mit dem fehlenden Code, und dadurch fehlte oben der Eintrag. Sorry dafür.

Boersenfeger

Vielen Dank, das klappt nun...

2002Andreas

Zitat von Boersenfeger

das klappt nun.

Freut mich, war gern geschehen

Und sorry für meinen Fehler im Code.

Boersenfeger

Kein Ding

Mira_Belle

Und schon geht es nicht mehr!
Sören muss was geändert haben! Denn jetzt wird im original ein Herz angezeigt,

und beim "drüberfahren" ändert es seine Farbe in Orange.

Mira_Belle

Es darf gespielt werden!

CSS

.messageFooterGroup .reactButton {
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M323.8 34.8c-38.2-10.9-78.1 11.2-89 49.4l-5.7 20c-3.7 13-10.4 25-19.5 35l-51.3 56.4c-8.9 9.8-8.2 25 1.6 33.9s25 8.2 33.9-1.6l51.3-56.4c14.1-15.5 24.4-34 30.1-54.1l5.7-20c3.6-12.7 16.9-20.1 29.7-16.5s20.1 16.9 16.5 29.7l-5.7 20c-5.7 19.9-14.7 38.7-26.6 55.5c-5.2 7.3-5.8 16.9-1.7 24.9s12.3 13 21.3 13L448 224c8.8 0 16 7.2 16 16c0 6.8-4.3 12.7-10.4 15c-7.4 2.8-13 9-14.9 16.7s.1 15.8 5.3 21.7c2.5 2.8 4 6.5 4 10.6c0 7.8-5.6 14.3-13 15.7c-8.2 1.6-15.1 7.3-18 15.2s-1.6 16.7 3.6 23.3c2.1 2.7 3.4 6.1 3.4 9.9c0 6.7-4.2 12.6-10.2 14.9c-11.5 4.5-17.7 16.9-14.4 28.8c.4 1.3 .6 2.8 .6 4.3c0 8.8-7.2 16-16 16H286.5c-12.6 0-25-3.7-35.5-10.7l-61.7-41.1c-11-7.4-25.9-4.4-33.3 6.7s-4.4 25.9 6.7 33.3l61.7 41.1c18.4 12.3 40 18.8 62.1 18.8H384c34.7 0 62.9-27.6 64-62c14.6-11.7 24-29.7 24-50c0-4.5-.5-8.8-1.3-13c15.4-11.7 25.3-30.2 25.3-51c0-6.5-1-12.8-2.8-18.7C504.8 273.7 512 257.7 512 240c0-35.3-28.6-64-64-64l-92.3 0c4.7-10.4 8.7-21.2 11.8-32.2l5.7-20c10.9-38.2-11.2-78.1-49.4-89zM32 192c-17.7 0-32 14.3-32 32V448c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32H32z"/></svg>') !important;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 18px !important;
  background-color: #3f3f3f !important;
}
.messageFooterGroup .reactButton:hover {
	background-color: #00ff00 !important;
}
.reactButton.active {
background-color: rgb(102, 255, 0) !important;
	opacity: 1 !important;
}

Alles anzeigen

Mira_Belle

Das ganz links ausblenden bekomme ich hin!
Aber wie "austauschen

Da möchte ich auch den "Daumen hoch".

2002Andreas

Zitat von Mira_Belle

Es darf gespielt werden!

Das hast du sehr schön gemacht, danke

Zitat von Mira_Belle

Sören muss was geändert haben!

Keine Ahnung was genau er gemacht hat, aber jetzt ist es komplizierter dort etwas zu verändern

Zitat von Mira_Belle

Aber wie "austauschen

Teste bitte:

CSS

 .reactionType {
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M323.8 34.8c-38.2-10.9-78.1 11.2-89 49.4l-5.7 20c-3.7 13-10.4 25-19.5 35l-51.3 56.4c-8.9 9.8-8.2 25 1.6 33.9s25 8.2 33.9-1.6l51.3-56.4c14.1-15.5 24.4-34 30.1-54.1l5.7-20c3.6-12.7 16.9-20.1 29.7-16.5s20.1 16.9 16.5 29.7l-5.7 20c-5.7 19.9-14.7 38.7-26.6 55.5c-5.2 7.3-5.8 16.9-1.7 24.9s12.3 13 21.3 13L448 224c8.8 0 16 7.2 16 16c0 6.8-4.3 12.7-10.4 15c-7.4 2.8-13 9-14.9 16.7s.1 15.8 5.3 21.7c2.5 2.8 4 6.5 4 10.6c0 7.8-5.6 14.3-13 15.7c-8.2 1.6-15.1 7.3-18 15.2s-1.6 16.7 3.6 23.3c2.1 2.7 3.4 6.1 3.4 9.9c0 6.7-4.2 12.6-10.2 14.9c-11.5 4.5-17.7 16.9-14.4 28.8c.4 1.3 .6 2.8 .6 4.3c0 8.8-7.2 16-16 16H286.5c-12.6 0-25-3.7-35.5-10.7l-61.7-41.1c-11-7.4-25.9-4.4-33.3 6.7s-4.4 25.9 6.7 33.3l61.7 41.1c18.4 12.3 40 18.8 62.1 18.8H384c34.7 0 62.9-27.6 64-62c14.6-11.7 24-29.7 24-50c0-4.5-.5-8.8-1.3-13c15.4-11.7 25.3-30.2 25.3-51c0-6.5-1-12.8-2.8-18.7C504.8 273.7 512 257.7 512 240c0-35.3-28.6-64-64-64l-92.3 0c4.7-10.4 8.7-21.2 11.8-32.2l5.7-20c10.9-38.2-11.2-78.1-49.4-89zM32 192c-17.7 0-32 14.3-32 32V448c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32H32z"/></svg>') !important;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 18px !important;
  background-color: red !important; 
}

Büssen

Ich habe von gestern auf heute nichts an dem Code geändert. Trotzdem wird rechts "Gefällt mir" nicht mehr ordentlich angezeigt?

Wo könnte der Fehler liegen?

2002Andreas

Zitat von Büssen

Wo könnte der Fehler liegen?

Siehe einfach die Beiträge über deinem.

Sören Hentzschel

Zitat von 2002Andreas

Keine Ahnung was genau er gemacht hat, aber jetzt ist es komplizierter dort etwas zu verändern

Wieso das?

Forum: Gefällt mir Button austauschen

Ähnliche Themen

Einführung der „Gefällt mir“-Reaktion

userChrome.js Scripte für den Fuchs (Diskussion)

Firefox View Button per policies.json ausblenden/deaktivieren

LibreOffice Update neue Version

Grafik anzeigen.uc.js funktioniert nicht mehr

About Seiten mit CSS Codes anpassen