HTML Rounded Borders für's Bild geht in Wordpress nicht?

Moin,

ich habe ein kleines Problem und weiß mittlerweile nicht mehr weiter.

Es ist recht simpel, ich will, dass auf meiner Wordpress-Seite alle Bilder einen Border-radius von z.B. 7px haben. Allerdings kann ich in Wordpress keinen Borderradius benutzen, es wird einfach nicht angenommen oder so, die Bilder bleiben mit Ecken.

Also habe ich mal eine normale .html Seite erstellt und auf dieser funktioniert es einwandtfrei.

Hier der Code, auf der HTML seite

<img class="rounded-corner" src="https://dummyimage.com/wuxga" width="600px;"/>
<style>
.rounded-corner { 
  border-radius: 7px;
}
</style>

(Das Bild habe ich durch ein Beispielbild ersetzt)

Eben diesen Code habe ich in Wordpress dann auch mal auf die Seite eingefügt, allerdings bleiben die Bilder mit ecken. Ich habe auch über das <img> ein div gelegt mit einer class (dachte das hilft vllt), aber es ging auch nicht.

Ich benutze bei Wordpress den Editor "Elementor" also nicht den Standard Editor von Wordpress selbst. Man kann bei Elementor zwar Bilder manuell round machen an den Ecken, aber ich würde gerne einen Code haben, der dies "Sitewide" macht.

Wenn jemand eine Idee hat, gerne melden ;)

Vielen Dank!

3 Antworten

medmonk

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

30.04.2020, 22:37

Da wir nicht wissen welche Plugins und der Gleichen verwendet werden, würde ich an deiner Stelle ein Child-Theme anlegen und dort alle gewünschten Formatierungen festlegen. Das Child-Theme hat den großen Vorteil, das diese Änderungen nicht verloren gehen, falls du mal dein Theme mit einem Update aktualisierst.

Die abgerundeten Ecken kannst du aber auch mithilfe eines Plugins (siehe Antwort von SasukeUchiha420) hinzufügen. Bei solch kleinen Änderungen rate ich jedoch eher davon ab, da man das Ganze auch schnell ohne zusätzliche Plugins bewerkstelligen kann. Ich würde es daher eher über ein Child-Theme realisieren oder "hart" in das Theme selbst schreiben.

Da sämtliche Bilder so formatiert werden sollen, würde ich alle Bilder über den Element-Selektor ansprechen und dann die gewünschten Formatierungen festlegen.

img {
  border-radius: 7px; 
}

Wenn die Formatierung nicht übernommen wird, wird dies wohl-möglich an einer anderen Stelle festgelegt sein und überschreibt dieses wieder. Daher auch der Tipp ein Child-Theme anzulegen. Damit hast du mehr Kontrolle über das Aussehen und wie gesagt, diese Formatierung so auch bei einem Update des Haupt-Themes nicht verloren gehen.

LG medmonk

Woher ich das weiß:Berufserfahrung

Niklas

30.04.2020, 22:32

<img class="rounded-corner" src="https://dummyimage.com/wuxga" width="600px;"/>

Das Slash am Ende des img-Tags gehört da nicht hin.

Ich vermute, dass irgendwo im Stylesheet des WordPress-Themes bereits diese CSS-Eigenschaft definiert ist, weswegen deine Anpassung keine Auswirkungen hat.

Ich rate davon ab, CSS über das Style-Element der Seite hinzuzufügen. Such stattdessen lieber nach den CSS-Dateien des Themes, erstelle ein Child-Theme und triff dort deine Anpassungen. :)

Woher ich das weiß:Berufserfahrung – Freelance IT Consultant