WordPress styles are overwritten by external HTML code – how do I fix this?
Good Morning,
I have a question. I'm not exactly an experienced coder, but I have the following problem: I want to embed external HTML code, specifically a calculator, into a post on my WordPress website. I can easily insert HTML code using the Gutenberg function. When I do this, the calculator displays and works, but all the global styles that are usually present on my other WordPress posts are overwritten. For example, the font sizes are all different and much larger than normal, and everything looks distorted. What options do I have to avoid this?
Thank you in advance for your reply. You guys are the best 🙂
Best regards,
Henri
(1 votes)
Loading...
(a) The most secure option would be to embed the external code via iFrame, because it cannot affect your page. If you have access to the file level of your web application, you could place an HTML file in a folder separately to WordPress there.
Example iFrame embedding via HTML in your WordPress page:
However, the condition is that the Consent Security Policy header allows the iFrames to be loaded on your side. If that’s the case, you’ll see if you’ve integrated it. Either the iFrame shows the page or an error message.
(b) You can also try to overwrite the styles of the strange code with your own.
Look first where the strange styles come from. Either there’s one style-element with CSS rules or external integration via link– Day.
In both cases, you should consider that these elements are exclusively in the head– belong to your HTML pages. There they should be loaded in front of your styles so that your styles can overwrite them. In cases where this is not true, you would have to create rules with more specific selectors that overwrite the wrong styles (see also here).
In principle, at least CSS basic knowledge is required.
(c) If you have direct access to the foreign styles (because they are, for example, via style-To be integrated tag), it would be good to modify their rules to such an extent that they only apply within a specific area of your website.
For example, place a container that accepts the foreign HTML code:
The CSS selectors must subsequently be modified so that they relate to the class of this container.
Example:
Old CSS:
Modified CSS:
In this case too, there should be at least basic knowledge of CSS.
Moin,
I’m not the WordPress expert, but maybe you took a CSS style from your html code. See if there’s something in the direction.
Greetings from katzebiggi
Hey, thanks for the quick answer. So you want me to remove any CSS style from my code I want to insert?
As I said, I am not an expert in WordPress, but could imagine that here an overlap or Change on the part of your html Css. Make a copy of the html and delete the Css Styles. If they weren’t guilty, they can insert them again.
Probably, other CSS rules overwrite your styles from the computer, so you have to set more specifiers or higher rules, you can do with!important, e.g., hit your code here in or show the page can help you. The best way to send the page is your HTML and CSS.