Wordpress Stile werden überschrieben bei externem HTML Code - wie behebe ich dad?
Moin moin,
ich habe mal eine Frage. Ich bin nicht wirklich der erfahrene Coder, habe aber folgendes Problem: ich möchte auf meiner WordPress Website in einen Beitrag einen externen HTML Code, genauer einen Rechner mit einbinden. Ganz einfach über die Gutenbergfunktion HTML Code einfügen. Wenn ich das mache, wird der Rechner zwar angezeigt und funktioniert auch, jedoch werden alle globalen Stile, die die sonst auf meinen anderen WordPress Beiträgen vorhanden sind überschrieben. Beispielsweise sind die Schriftgrößen alle verschieden und viel größer als normal und irgendwie sieht alles verzerrt aus. Welche Möglichkeiten habe ich das zu vermeiden?
Vielen Dank schon mal im Voraus für die Antwort. Ihr seid die Besten:)
Liebe Grüße,
Henri
3 Antworten
a) Die sicherste Option wäre es, den externen Code via iFrame einzubetten, denn der kann deine Seite nicht beeinflussen. Sofern du Zugriff auf die Dateiebene deiner Webanwendung hast, könntest du eine HTML-Datei in einem Ordner separat zu WordPress dort ablegen.
<!doctype html>
<head>
<title>Rechner</title>
<meta charset="utf-8">
<!-- include or link stylesheets here ... -->
</head>
<body>
<!-- your html -->
</body>
Beispiel-iFrame-Einbettung via HTML in deiner WordPress-Seite:
<iframe height="400" src="url/to/your/html/file" style="border:none" width="200">
Voraussetzung ist allerdings, dass der Consent Security Policy-Header das Laden des iFrames auf deiner Seite erlaubt. Ob dem der Fall ist, siehst du, wenn du ihn eingebunden hast. Entweder zeigt der iFrame die Seite an oder eine Fehlermeldung.
b) Du kannst auch versuchen, die Styles des fremden Codes mit deinen eigenen zu überschreiben.
Schau zuerst, woher die fremden Styles kommen. Entweder gibt es ein style-Element mit CSS-Regeln oder eine externe Einbindung via link-Tag.
In beiden Fällen solltest du eh berücksichtigen, dass diese Elemente ausschließlich in den head-Bereich deiner HTML-Seiten gehören. Dort sollten sie vor deinen Styles geladen werden, damit deine Styles sie gegebenenfalls überschreiben können. Für die Fälle, wo das nicht zutrifft, müsstest du Regeln mit spezifischeren Selektoren bilden, welche die falschen Styles überschreiben (lies dazu hier).
Grundsätzlich sind hierfür mindestens CSS-Grundkenntnisse erforderlich.
c) Wenn du direkten Zugriff auf die fremden Styles hast (weil sie bspw. via style-Tag eingebunden werden), wäre es gut, ihre Regeln soweit zu modifizieren, sodass sie nur innerhalb eines bestimmten Bereichs deiner Webseite gelten.
Lege dir z.B. einen Container an, der den fremden HTML-Code aufnimmt:
<div class="calculator-container">
<!-- foreign html code ... -->
</div>
Die CSS-Selektoren müssen folgend so abgeändert werden, sodass sie sich auf die Klasse dieses Containers beziehen.
Beispiel:
<div class="calculator-container">
<p>Some text</p>
</div>
Altes CSS:
p { color: red }
Modifiziertes CSS:
.calculator-container p { color: red }
Auch in diesem Fall sollten mindestens Grundkenntnisse in CSS vorhanden sein.
Moin,
bin zwar nicht der WordPress Experte, aber vielleicht hast du von Deinem html Code einen CSS Style mit übernommen. Schau mal nach, ob dort etwas in der Richtung ist.
Grüße von katzebiggi
Wie gesagt, ich bin in WordPress kein Experte, könnte mir aber vorstellen, dass hier eine Überschneidung bzw. Änderung seitens deines html Css vorliegt. Mach dir von der html eine Kopie und lösche die Css Styles. Waren die nicht schuld, kannst sie wieder einfügen.
Wahrscheinlich überschreiben andere CSS Regeln deine Stile vom Rechner , deswegen musst die mehr spezifieren oder höhere Regeln setzen , kannst du mit !important machen z.B. , hau mal dein code hier rein oder zeig mal die Seite kann dir helfen. Am besten schickst mir die Seite dein HTML und CSS.
Hey, danke dir für die schnelle Antwort. Meinst du also ich soll jeglichen CSS Stil entfernen aus meinem Code, den ich einfügen möchte?