Support » Allgemeine Fragen » Gutenberg zusätzliches CSS

  • Gelöst helmutschmidt

    (@helmutschmidt)



    Hallo, wie muss ein zusätzliches CSS aussehen, wenn ich einen Rahmen um einen Block legen möchte? Danke für jede Hilfe. BB Helmut

Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)
  • Hallo @helmutschmidt und willkommen im Forum,

    du kannst bei jedem Block in der rechten Seitenleiste unter „Erweitert“ eine eigene CSS-Klasse hinzufügen. Nehmen wir an, du gibst dort rahmen ein, dann kannst du im Customizer unter Zusätzliches CSS folgendes hinzufügen:

    .rahmen{
    border: 2px solid red; 
    padding: 10px;
    }

    Rahmen Breite (2px), Art (solid) und Farbe (red) sowie den Innenabstand (padding) kannst du nach deinem persönlichen Geschmack anpassen. Die CSS-Regel gilt für jeden Block, dem du im Block-Editor die CSS-Klasse zuweist.

    Achte darauf, dass der CSS-Klassenname im Block-Editor ohne Punkt, im Customizer jedoch mit Punkt eingegeben werden muss.

    helmutschmidt

    (@helmutschmidt)

    Hallo und danke, das funktioniert jetzt. Ergänzend möchte ich fragen, wie ich beim Block „Spalten“ auch noch die Linien zwischen den Spalten nachzeichnen kann. Also nicht die Blöcke in den Spalten was auch zu horizontalen Linien führt, sondern nur die Trennung zwischen den Spalten
    http://wp5.bemas.de
    Da habe ich einen Block mit 3 Spalten. In jeder sind ein Bildblock und ein Textblock. Die sollen durch die Spaltentrennlinien optisch zusammen gehalten werden. Geht das auch?

    Moderator Bego Mario Garde

    (@pixolin)

    Dein Theme gibt das als Einstellungsoption nicht her, aber du kannst das genauso mit eigenen CSS-Regeln lösen.

    Eine gute Einführung in CSS findest du z.B. beim Mozilla Developer Network.

    bscu

    (@bscu)

    Das hat aber nichts mit WordPress zu tun.

    Siehe https://www.w3schools.com/css/css_border.asp

    Moderator Bego Mario Garde

    (@pixolin)

    Deshalb ja mein freundlich gemeinter Hinweis auf die CSS-Einführung im Mozilla Developer Network. 🙂

    helmutschmidt

    (@helmutschmidt)

    Danke für die Links zu css-Tutorials. Die hatte ich schon. Meine Frage war, wie ich die senkrechten Linien im Block Spalten anspreche. border: setzt hier nur die Außenlinie und nicht wie bei einer Tabellenformatierung auch die Zwischenlinien Danke fürs weiterhelfen.

    Auch das geht wie gesagt mit CSS. Wenn du gute Grundkenntnisse in CSS hast, sollte es kein Problem sein, in den Entwickler-Tools deines Browsers ein wenig mit den Werten für margin, padding und border-right zu spielen.

    Die Spalten haben alle eine eigene CSS-Klasse. .wp-block-column:not(:last-child) ist ein Selektor für alle Spalten mit Ausnahme der letzten.

    Viel Erfolg.

    Danke, das war genau das, was mir noch gefehlt hat. Super!

Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)