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".

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;
}
}

Alles anzeigen

Die Werte wenn dann wieder anpassen.

Hier das obige Icon wieder dazu:

Like4.svg

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