Forum: Gefällt mir Button austauschen

2002Andreas

Zitat von Mira_Belle

dass es so ausschaut:

Nur ein Beispiel:

CSS

[data-tooltip="Inhalt melden"]::after {
    content: "Inhalt melden" !important;
    margin-right: 10px !important;
    font-size: 13px !important;
}

[data-tooltip="Zitieren"]::after {
    content: "Zitieren" !important;
    margin-right: 10px !important;
    font-size: 13px !important;    
}

Alles anzeigen

Mira_Belle

OK, bin scheinbar zu blöd und bekomme die gegebenen Hinweise und Hilfestellungen nicht auf die Kette.

Werde es lassen so wie es ist. Danke für die Mühe.

2002Andreas

Zitat von Mira_Belle

bin scheinbar zu blöd

Hey, mach mal eine Pause, trink in Ruhe einen Kaffee/Tee, und dann machst du es ganz in Ruhe,

Du schaffst das.

Sören Hentzschel

Zitat von Mira_Belle

bekomme die gegebenen Hinweise und Hilfestellungen nicht auf die Kette

CSS

.reactButton {
  width: 120px !important;

   &::before {
    content: '\f164' !important;
    font-weight: 400 !important;
  }
  
  &::after {
    content: 'Gefällt mir' !important;
    padding-left: 5px !important;
  }
}

Alles anzeigen

Mira_Belle

Nein.

Mir grätscht folgender code der style-5.css dazwischen!

CSS

html:not(.touch) .button:hover, html:not(.touch) a.button:hover {
  background-color: var(--wcfButtonBackgroundActive);
  color: var(--wcfButtonTextActive);
  text-decoration: none;
}

Da wird der Text "Zitieren" beim Drüberfahren orange und nicht rot!

Ich nutzte einfach mal nur diesen Code:

CSS

[data-tooltip="Inhalt melden"]::after {
    content: "Inhalt melden" !important;
    margin-right: 10px !important;
    font-size: 13px !important;
}

[data-tooltip="Zitieren"]::after {
    content: "Zitieren" !important;
    margin-right: 10px !important;
    font-size: 13px !important;    
}

Alles anzeigen

Und auch wenn ich dann noch den Code erweitere, bleibt es dabei,
Text "Zitieren" wird orange, und das ganze dann verzögert!

CSS

[data-tooltip="Zitieren"].hover::after {
	color: red !important;    
}

Ich denke, es ist besser, ich höre auf.
Mache da schon seit Montag rum, war so einigermaßen mit der alten Lösung zufrieden,
nur jetzt klappt nichts mehr und ich rege mich nur auf, (und merke, dass das mir nicht guttut)

2002Andreas

Zitat von Mira_Belle

Text "Zitieren" wird orange

In Zeile 1 vor hover muss ein :

Mira_Belle

Ein allerletzter Versuch, und es geht in die richtige Richtung!

CSS

.reactButton {
  width: 120px !important;

   &::before {
    content: '\f164' !important;
    font-weight: bold !important;
  }
  
  &::after {
    content: 'Gefällt mir' !important;
    padding-left: 5px !important;
  }
}

[data-tooltip="Inhalt melden"]::after {
    content: "Inhalt melden" !important;
    margin-right: 10px !important;
    font-size: 13px !important;
}
[data-tooltip="Inhalt melden"]:hover::after {
	color: red !important;    
}

[data-tooltip="Zitieren"]::after {
    content: "Zitieren" !important;
    margin-right: 10px !important;
    font-size: 13px !important;    
}
[data-tooltip="Zitieren"]:hover::after {
  	color: red !important;    
}

Alles anzeigen

Wenn ich nun "geliked" habe ist das Symbol und der Text orange, ist OK.
Was ich aber noch ändern möchte, wenn inaktiv, also nicht "geliked" beim "hovern" grün,
wenn "geliked" beim "hovern" rot.

Das Symbol hätte ich auch gerne einen Tick größer und habe mit scale: 1.1 gespielt,
aber dann verschwindet die Umrandung.

Ich mache jetzt aber erst einmal eine Pause.
Und ich möchte mich noch einmal ganz lich bei Euch beiden bedanken.

2002Andreas

Zitat von Mira_Belle

Ich mache jetzt aber erst einmal eine Pause.

Gute Idee, und danach mit neuer Energie weitermachen

Mira_Belle

OK, ein bisschen habe ich noch gebastelt!

CSS

[data-tooltip="Inhalt melden"]::after {
	content: "Inhalt melden" !important;
	margin-right: 10px !important;
	font-size: 13px !important;
}
[data-tooltip="Inhalt melden"]:hover::after {
	color: red !important;    
}

[data-tooltip="Zitieren"]::after {
	content: "Zitieren" !important;
	margin-right: 10px !important;
	font-size: 13px !important;    
}
[data-tooltip="Zitieren"]:hover::after {
  	color: red !important;    
}

.reactButton {
  width: 120px !important;
  padding-top: 5px !important;

   &::before {
    content: '\f164' !important;
    font-weight: 400 !important;
    scale: 1.3 !important;

  }
  
  &::after {
    content: 'Gefällt mir' !important;
    padding-left: 5px !important;
    padding-top: 4px !important;
  }
}


.reactionSummary .reactionCountButton {
  margin-top: 10px !important;
}
.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;
	margin-top: -2px !important;
	margin-left: -1px !important;
}

Alles anzeigen

Das klappt so weit!

Was ich noch, aber jetzt wirklich später, einbauen möchte,
ist das mit dem "hovern" in ROT und GRÜN.

2002Andreas

So nutze ich das jetzt hier für das neue Icon: Gefällt mir

CSS

.reactButton {
        width: 120px !important;
	    color: green !important;

    &::before {
        content: '\f164' !important;
        padding-top: 1px !important;
    }

    &::after {
        content: 'Gefällt mir' !important;
        padding-left: 5px !important;
        padding-top: 1.5px !important;
    }

    &:hover {
        color: red !important;
    }

    &.active {
        color: red !important;
    }

    &.active:hover {
        color: green !important;
    }
}

Alles anzeigen

bei hover und Aktivierung:

Mira_Belle

Ich habe mal die Farben geändert, und so funktioniert es auch, so wie ich mir das Vorstelle.

Vielen lieben Dank.

Der komplette Code schaut z.Z. so aus:

CSS

  [data-tooltip="Inhalt melden"]::after {
    content: "Inhalt melden" !important;
    margin-right: 10px !important;
    font-size: 13px !important;
  }
  [data-tooltip="Inhalt melden"]:hover::after {
    color: #ff0000 !important;
  }

  [data-tooltip="Zitieren"]::after {
    content: "Zitieren" !important;
    margin-right: 10px !important;
    font-size: 13px !important;
  }
  [data-tooltip="Zitieren"]:hover::after {
    color: #ff0000 !important;
  }

  .reactButton {
    width: 120px !important;
    padding-top: 5px !important;

    &::before {
      content: "\f164" !important;
      font-weight: 400 !important;
      scale: 1.4 !important;
    }

    &::after {
      content: "Gefällt mir" !important;
      padding-left: 5px !important;
      padding-top: 4px !important;
    }

    &:hover {
        color: #00be00 !important;
    }

    &.active {
        color: #333333 !important;
    }

    &.active:hover {
        color: #ff0000 !important;
    }
  }

  .reactionSummary .reactionCountButton {
    margin-top: 10px !important;
  }
  .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: #ff0000 !important;
    margin-top: -2px !important;
    margin-left: -1px !important;
  }

Alles anzeigen

Was ich noch am Code verändern möchte, wenn ich meine Pause beende, den letzten Abschnitt.

.reactionType, das soll dann auch mit Unicode umgesetzt werden.

2002Andreas

Zitat von Mira_Belle

Der komplette Code schaut z.Z. so aus:

Wenn du nur den zusätzlichen Text einfügst, dann brauchst du Zeile 6 - 8 und 15 - 17 nicht mit hover.

Standard ist der Text nämlich rot bei hover.

Mira_Belle

Zitat von 2002Andreas

Wenn du nur den zusätzlichen Text einfügst, dann brauchst du Zeile 6 - 8 und 15 - 17 nicht mit hover.

Funktioniert aber bei mir nicht so!
Mir grätscht der Code der style-5.css dazwischen,
und dann werden zwar die Symbole rot, aber der Text wird orange.

2002Andreas

Mir bereitet eher das letzte Anliegen Kopfzerbrechen.

Das ist eine Grafik (like.svg) und einfach den Code so um zu schreiben,
dass da .reactionType { content: "\f164" !important; } steht anstatt des "langen" Code,
funktioniert irgendwie nicht, oder halt anders als ich mir das gerade so vorstelle.

Wäre jetzt aber nicht wirklich so schlimm, der komplette Code scheint ja zu funktionieren.
Es war halt einfach nur so eine Idee.

2002Andreas

Zitat von Mira_Belle

Mir grätscht der Code der style-5.css dazwischen

Ok, das hatte ich nicht bedacht, sorry also.

Sören Hentzschel

Zitat von Mira_Belle

Das ist eine Grafik (like.svg) und einfach den Code so um zu schreiben,
dass da .reactionType { content: "\f164" !important; } steht anstatt des "langen" Code,
funktioniert irgendwie nicht, oder halt anders als ich mir das gerade so vorstelle.

Die Eigenschaft content gibt es nur für Pseudoelemente, d.h. ::before oder ::after. Allerdings kannst du kein Pseudoelement auf .reactionType anwenden, weil es sich dabei um ein img-Element handelt, ein sogenanntes „Replaced Element“. Außerdem wollen wir das img-Element ja ausblenden, damit du keine zwei Icons siehst, was ein zweiter Grund ist, wieso wir kein Pseudoelement für das img verwenden können. Das wäre sonst auch nicht mehr zu sehen. Verwende stattdessen das übergeordnete Element .reactionCountButton. Außerdem musst du die Schrift noch ändern, denn in der „Standardschrift“ gibt es kein Zeichen für diesen Unicode. Der Grund, wieso du das beim Reagieren-Button nicht brauchst, ist der, dass ich das ja schon im CSS des Stils hinterlegt habe. Das ist an der Stelle, die du bearbeiten möchtest, nicht der Fall. Da musst du selbst die font-family setzen.

CSS

.reactionCountButton {
  &::before {
    content: '\f164';
    font-family: 'Font Awesome 6 Free';
  }
  
  img {
    display: none;
  }
}

Mira_Belle

Sören Hentzschel Vielen Dank.
Das sieht, also der Code, ganz toll aus,
aber jetzt habe ich andere Probleme!

Die Größe des Symbols, mit "scale: 1.4 !important;" komm ich da nicht bei.

Ich kann nicht alles haben, und mit dem "langen" Code passt es ja.

AHHH! "font-size: 20px !important;"

Na dann, nehmen wir doch den viel schöneren und kompakteren Code.

Sören Hentzschel

Richtig, font-size ist der korrekte Weg, um Schrift zu vergrößern. Und wenn du das noch etwas schöner ausrichten möchtest, dass die Zahl daneben optimal mittig zum Icon platziert ist, was nicht mehr der Fall ist, sobald du die Schrift so stark vergrößerst, kann die Lösung so aussehen:

CSS

.reactionCountButton {
  display: flex;
  align-items: center;
  column-gap: 2px;
  
  &::before {
    content: '\f164';
    font-family: 'Font Awesome 6 Free';
    font-size: 20px;
  }
  
  img {
    display: none;
  }
}

Alles anzeigen

Mira_Belle

Zitat von Sören Hentzschel

... Und wenn du das noch etwas schöner ausrichten möchtest, dass die Zahl daneben optimal mittig zum Icon platziert ist, was nicht mehr der Fall ist, sobald du die Schrift so stark vergrößerst, kann die Lösung so aussehen: ...

Wow. Habe ich etwas umständlicher gelöst.
Hoffe aber, dass andere auch von dieser schweren Geburt was haben,

Daher hier "mein" kompletter Code.

CSS

  [data-tooltip="Inhalt melden"]::after {
    content: "Inhalt melden" !important;
    margin-right: 10px !important;
    font-size: 13px !important;
  }
  [data-tooltip="Inhalt melden"]:hover::after {
    color: #ff0000 !important;
  }

  [data-tooltip="Zitieren"]::after {
    content: "Zitieren" !important;
    margin-right: 10px !important;
    font-size: 13px !important;
  }
  [data-tooltip="Zitieren"]:hover::after {
    color: #ff0000 !important;
  }

  .reactButton {
    width: 120px !important;
    padding-top: 5px !important;

    &::before {
      content: "\f164" !important;
      font-weight: 400 !important;
      scale: 1.4 !important;
    }

    &::after {
      content: "Gefällt mir" !important;
      padding-left: 5px !important;
      padding-top: 4px !important;
    }

    &:hover {
        color: #00be00 !important;
    }

    &.active {
        color: #333333 !important;
    }

    &.active:hover {
        color: #ff0000 !important;
    }
  }

  .reactionSummary .selected .reactionCount {
    font-weight: 700 !important;
    color: #5c5c5c !important;          /* für die Farbe des Zählwertes */
    padding-bottom: 5px !important;
  }

  .reactionCountButton {

    &::before {
      content: '\f164' !important;
      font-family: 'Font Awesome 6 Free' !important;
      font-size: 20px !important; 
      color: #5c5c5c !important;        /* für die Farbe des Symbols */
    }
    
    img {
      display: none;
    }
  }

Alles anzeigen

PS: Die Farbwerte am Ende, weil beim "hovern" bei mir der Text von dem dunklen Grau zu Schwarz gewechselt hat.

Ich entschuldige mich für meine extremst lange Leitung,
und bedanke mich noch einmal ausdrücklich bei Euch beiden.
2002Andreas & Sören Hentzschel

2002Andreas

Zitat von Mira_Belle

und bedanke mich

Was mich davon betrifft...immer gern geschehen

Forum: Gefällt mir Button austauschen

Beitrag von 2002Andreas (20. November 2024 um 11:29)

Ä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