Support » Allgemeine Fragen » Gutenberg-Buttons benutzerdefinierte CSS Klasse zu wp-block-button__link anfüge

  • Gelöst watzweb

    (@watzweb)


    Hallo zusammen,

    ich stehe mal wieder vor einem Problem.
    Ich baue gerade eine Seite in einer Testumgebung und jetzt stehe ich vor einem Problem. Ich brauche verschiedene Buttons. Die Klassen dafür sind in der style.css des Themes definiert. Leider verwendet dieses Theme nicht wie vorgesehen die Klasse „wp-block-button“, sondern „wp-block-button_link“ für die Definition des Buttons.
    Leider steht im Editor nur die benutzerdefinierte Klasseneingabe nur für wp-block-button zur Verfügung.
    Würde mich freuen, wenn mir jemand weiterhelfen kann.

    Vielen Dank im Voraus!

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 15)
  • Hallo,
    wenn du dann noch die URL oben einträgst, dann können wir uns das auch ansehen und dir sicher besser helfen.
    Viele Grüße
    Hans-Gerd

    Thread-Starter watzweb

    (@watzweb)

    Hallo,

    es gibt leider keine URL da ich die Seite in einer lokalen Testumgebung baue.

    LG

    Hallo,
    dann wird es schwierig.
    Wenn du allerdings zumindest das Theme nennen kannst (möglichst auch URL), können wir uns das ggfs. auf einer eigenen Testumgebung ansehen.
    Viele Grüße
    Hans-Gerd

    Leider verwendet dieses Theme nicht wie vorgesehen die Klasse „wp-block-button“, sondern „wp-block-button_link“ für die Definition des Buttons.

    Da gibt es zwei Möglichkeiten:

    1. Du weist dem Button die CSS-Klasse wp-block-button_link zu. Dazu findest du in der Sidebar im Abschnitt Block [1] unter Erweitert [2] ein Eingabefeld „Zusätzliche CSS-Klasse(n)“ [3]:
      Screenshot Einstellungen
      (zum Vergrößern anklicken)
      Nachteil dieser Variante ist, dass du das jedesmal neu einfügen musst, wenn du einen neuen Button erstellst.
    2. Du kopierst aus dem Theme die CSS-Regel(n) für die CSS-Klasse wp-block-button_link und fügst sie im Customizer unter Zusätzliches CSS mit dem abgeänderten Selektor wp-block-button ein.
    Thread-Starter watzweb

    (@watzweb)

    Hallo,

    ich habe deine Vorschläge probiert, aber leider hilft mir das nicht da der Buttonstil nicht richtig definiert wird. Ich habe selber recherchiert und eine Vorlage für ein Plugin gefunden das den definierten CSS-Code in die Spalte einfügt (Plugin). Ist vielleicht möglich den Code so anzupassen die Klassen „btn btn-lg btn-default“ eingefügt werden?

    Falscher Code:
    <div class="wp-block-button btn btn-lg btn-default"><a class="wp-block-button__link" href="https://www.google.de" target="_blank" rel="noreferrer noopener">Test</a></div>

    Richtiger Code:
    <div class="wp-block-button"><a class="wp-block-button__link btn btn-lg btn-default" href="https://www.google.de" target="_blank" rel="noreferrer noopener">Test</a></div>

    Dankeschön!

    • Diese Antwort wurde geändert vor 2 Jahren, 12 Monaten von watzweb.
    • Diese Antwort wurde geändert vor 2 Jahren, 12 Monaten von watzweb.

    Hallo,

    ich habe deine Vorschläge probiert, aber leider hilft mir das nicht da der Buttonstil nicht richtig definiert wird.

    Dann hast du das wahrscheinlich nicht so umgesetzt, wie das Bego in seiner Antwort sehr schön beschrieben hat. Was genau meinst du mit

    da der Buttonstil nicht richtig definiert wird

    ?
    Wie und wo hast du denn die CSS-Regeln definiert?
    Viele Grüße
    Hans-Gerd

    Thread-Starter watzweb

    (@watzweb)

    Hallo,

    der Button wird mit den Klassen btn btn-lg btn-default definiert.
    Die Klassen sind in der style.css des Themes definiert.

    LG

    Hallo,
    sorry, die Infos kennen wir schon und ich weiß nicht, wie wir dir hier noch helfen können. Bego hat eigentlich alles gesagt, was du machen könntest. Aber offensichtlich hast du das nicht oder nicht richtig ausprobiert.
    Ich versuche es noch mal: Wenn du z. B. einen Button in einer anderen Form gestalten willst, als das vom Theme vorgesehen ist, dann definierst du entsprechende CSS-Regeln entweder in der style.css des Child Themes oder du packst die CSS-Regel(n) unter Design > Customizer > Zusätzliches CSS.
    Nehmen wir mal das Beispiel von dem Button hier unten (der „Senden“-Button in blau) und nutzen das als eigene CSS-Klasse wp-block-button_link, allerdings mit einer roten Hintergrundfarbe. Dann sieht das so aus:

    wp-block-button_link {
        background: red;
        border-color: #0073aa #006799 #006799;
        box-shadow: 0 1px 0 #006799;
        color: #fff;
        text-decoration: none;
        text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799;
    }

    Diesen Code packst du wie oben beschrieben (als eine Möglichkeit) in Design > Customizer > Zusätzliches CSS.
    Dem Button weist du dann – wie im Bild von Bego dargestellt – im Block zu dem Button bei den Eigenschaften unter „Zusätzliche CSS-Klasse“ die Klasse wp-block-button_link zu. Damit sollte es dann funktionieren.
    Viele Grüße
    Hans-Gerd

    Ich habe selber recherchiert …

    Sehr gut. 🙂

    Wir können hier nur Hilfe zur Selbsthilfe anbieten und haben nicht den Anspruch, fertige Lösungen zu präsentieren.

    … und eine Vorlage für ein Plugin gefunden das den definierten CSS-Code in die Spalte einfügt (Plugin).

    Eine Vorlage. Für ein Plugin. Dass CSS einfügt.

    Das sind zwei Schritte zuviel. Du brauchst weder ein Plugin, um CSS einzufügen, noch eine Vorlage um das Plugin zu erstellen.
    Design > Customizer > Zusätzliches CSS > dort CSS-Regeln einfügen. Fertig.

    Ist vielleicht möglich den Code so anzupassen die Klassen „btn btn-lg btn-default“ eingefügt werden?

    Ich verstehe die Frage so, dass der Button-Block den du verwendest nicht die CSS-Klassen nutzt, die in deinem Stylesheet vorhanden sind.
    Meine Antwort dazu war, entweder dem Block über das Eingabefeld Erweitert wie im Screenshot angegeben beliebig viele CSS-Klassen hinzuzufügen …
    oder im Customizer eigene CSS-Regeln hinzuzufügen, die genau die CSS-Klassen verwenden, die bereits im Button-Block vorhanden sind.

    Um den Block so zu ändern, dass die CSS-Klassen nach deinem Wünschen eingebaut werden, müsstest du den Block entfernen und einen eigenen Block erstellen. Das scheint mir aber unverhältnismäßig viel Aufwand für diese simple Anforderung.

    Thread-Starter watzweb

    (@watzweb)

    Hallo,

    vielen Dank für die schnellen Antworten.

    Ich verstehe die Frage so, dass der Button-Block den du verwendest nicht die CSS-Klassen nutzt, die in deinem Stylesheet vorhanden sind.

    Das ist richtig! Aber leider wird der Button auch mit Angabe dieser Klassen nicht richtig dargestellt (siehe Screenshot)

    Screenshot

    Dankeschön!

    • Diese Antwort wurde geändert vor 2 Jahren, 12 Monaten von watzweb.
    • Diese Antwort wurde geändert vor 2 Jahren, 12 Monaten von watzweb.
    • Diese Antwort wurde geändert vor 2 Jahren, 12 Monaten von watzweb.

    Das ist nur eine Frage der richtigen CSS-Regeln.
    Du kannst mit eigenen CSS-Regeln auch eine vorhandene Formatierung überschreiben.

    Ohen Link zu einem Beispiel kann ich das nur theoretisch beschreiben.

    Hallo,
    aber wo ist denn jetzt das Problem? – Die Einstellungen kannst du doch alle über den Block-Editor bei den Eigenschaften des Buttons vornehmen und dazu musst du noch nicht mal zusätzliches CSS definieren, siehe hier (Farbeinstellungen, Rand-Einstellungen):
    Einstellungen
    Viele Grüße
    Hans-Gerd

    An die inidividuellen Einstellungen (und die Vorgabe als Standard-Stil) habe ich gar nicht mehr gedacht – gute Ergänzung, Hans-Gerd!

    Hallo Bego,
    wobei es sicher besser ist, wenn man dafür eine eigene CSS-Regel definiert. Aber dazu haben wir ja hier schon mehrfach etwas geschrieben. 🤔
    Viele Grüße
    Hans-Gerd

    Thread-Starter watzweb

    (@watzweb)

    Hallo zusammen,

    ich habe das Problem jetzt direkt mit einem HTML-Block gelöst.
    Ist zwar nicht so wie ich es mir vorgestellt habe, aber es funktioniert.

    Trotzem vielen Dank für Eure Mühe!

    LG

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 15)
  • Das Thema „Gutenberg-Buttons benutzerdefinierte CSS Klasse zu wp-block-button__link anfüge“ ist für neue Antworten geschlossen.