mit dem o.g. WordPress-Theme und im Hintergrund laufenden Gutenberg-Editor, können den Elementen „Bilder“, „Gruppen“ o. Ä. in den Block-Einstellungen der „Rand“, der „Radius“ und der „Schatten“ individuell angepasst werden. Bei dem Typ Bilder werden im Block-Editor die Stile: „Standard“ oder „Abgerundet“angeboten.
Leider haben nicht alle Elemente diese Funktionen. Besonders ärgerlich ist es bei dem Element Video. Das WordPress-Theme stellt mit seinen Vorlagen ein einheitlichen UI sicher. Jedoch Fallen eingefügte Videos mit seinen Ecken schon auf, wenn alle anderen Elemente runde Ecken haben (können).
Ich würde gerne das Element Video im Gutenberg-Editor mit den gleichen Funktionen wie bei dem Element Bildern ausstatten. Welche Anpassungen müsste ich in PHP/CSS vornehmen und an welcher Stelle, um das umzusetzen?
Über Eure Hilfe wäre ich sehr dankbar.
Anbei noch ein Screenshot für das bessere Verständnis:
Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
In diesem Beispiel habe ich ein Video (1) und ein Bild (2) eingefügt, wobei ich dem Bild-Block über die Sidebar den Stil Abgerundet zugewiesen habe. Diese Einstellung gibt es für das Video nicht.
Um alle Videos nun im Front-End ebenfalls mit abgerundeten Ecken darzustellen, kannst du in Design > Website-Editor die Stile bearbeiten und dort in der Sidebar rechts ganz unten über den Link Zusätzliches CSS eine eigene CSS-Regel einfügen. Dabei kannst du entscheiden, ob die abgerundeten Kanten bei jedem Video angezeigt werden sollen oder nur bei einem einzigen.
Um alle Videos mit abgerundeten Kanten auszugeben, verwendest du
.wp-block-video video { object-fit: cover; border-radius: 2vw; }
Soll das nur für ausgewählte Videos verwendet werden, kannst du den Video-Block anklicken und in der Sidebar unter Erweitert eine CSS-Klasse hinzufügen, z.B. video-runde-ecken (bitte ohne einen Punkt vor dem Klassen-Namen). In diesem Fall änderst du die oben genannten CSS-Regel ein wenig um:
.video-runde-ecken video { object-fit: cover; border-radius: 2vw; }
(hier hat die CSS-Klasse einen Punkt vor dem Klassen-Namen)
Betrifft es wirklich nur eine einzige Seite, kannst du sogar wie in meinem Screenshot einen HTML-Block mit der ersten CSS-Regel einfügen (3). Das ist nicht ganz sauber, da CSS-Regeln eigentlich in den Dokumenten-Header gehören, scheint aber zu funktionieren.
@bscu Ein Link zur Website mit einem Beispiel macht es tatsächlich leichter, weil man die Auswirkung von CSS-Regeln direkt im Browser testen kann. In diesem Fall haben ich rasch eine eigene Demo-Seite in einer Testumgebung aufgesetzt. Das berücksichtigt natürlich nicht irgendwelche möglichen Besonderheiten der Website, die uns unbekannt sind. Aber ich wollte @denniswolfram auch nicht gleich bei seinem ersten Thread im Forum verschrecken.
An dieser Stelle noch der obligatorische Hinweis, dass wir hier keine Grundlagen (HTML, CSS, JS, PHP, …) vermitteln können und auch nicht auf Zuruf passende CSS-Regeln liefern, wenn jemand sein Theme ändern möchte. Wir machen (wie in diesem Fall) gerne eine Ausnahme, wenn eine Lösung naheliegend ist, aber daraus begründet sich kein Anspruch anderer Teilnehmenden, ebenfalls CSS-Regeln „abfordern“ zu können.
Mein Wunsch/Ziel: Ich wollte im Kern (Gutenberg- / Block-Editor) den Block ».wp-block-video« die selben „Funktionen“ wie dem Block ».wp-block-image« zuweisen. Ist das möglich? Warum diese Nachfrage: Es gibt verschiedene Situationen, wo ein Video (wie beim Bild) alle 4 abgerundet haben soll, oder auch nur bestimmte (oben/unten/diagonal/nur eine Ecke). Auch der Radius soll individuell anpassbar sein. Und das ganze halt für meine Freund/Familie die von CSS keine Ahnung haben.
Über weitere Ratschläge wäre ich sehr dankbar. Mir ist bewusst das mir die Grundlagen selber bei bringen muss. Ich bin der Meinung oder bilde mir ein, diese zu haben (CSS).
Ich wollte im Kern (Gutenberg- / Block-Editor) den Block ».wp-block-video« die selben „Funktionen“ wie dem Block ».wp-block-image« zuweisen.
Das ist weder im Theme noch im WordPress-Core so vorgesehen.
Du kannst (sehr gute Programmierkenntnisse vorausgesetzt) eigene Blöcke mit den Features programmieren, die du unbedingt brauchst. Für die Entwicklung eigener Blöcke findest du unter Block Editor Handbook eine Dokumentation.
Übrigens hatte es einen Grund, dass ich für die abgerundeten Ecken als Einheit vw (für Viewport Width) statt px(Pixel) genommen habe: Bei den Bildern ändern sich die Ecken in Abhängigkeit der Bildschirmgröße.
Das kann man so nicht sagen. Viewport-Width ist die Breite deines Browser-Fensters, die du auch auf dem Desktop-PC beliebig ändern kannst. Den Wert von 2vw habe ich grob geschätzt; ich müsste ins Stylesheet des Themas schauen, um den korrekten Wert zu ermitteln. Der Unterschied ist aber vermutlich marginal.
Denk bitte daran, den Thread als „gelöst“ zu markieren, wenn deine Frage ausreichend beantwortet wurde. Damit können sich die anderen Helfer aus dem Support-Team direkt noch unbeantworteten Fragen widmen.
Viel Erfolg mit deiner Website.
Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
