I am working on a CMS. One of its functions is the editing of HTML “chunks” in a WYSIWYG editor that are displayed as individual pages.
I have an area in the CMS where these chunks are previewed.
The chunks rely on a “foundation.css” file that is loaded into the WYSIWYG editor. It does some small resets, defines a default font and text color, and is overall very simple.
The CMS, obviously, comes with a ton of CSS statements, many of which affect general settings like font size, family, color, line-height, paddings and the like.
Naturally, when I try to display a HTML chunk in a CMS page, it looks different from when it is displayed only with the foundation.css stylesheet.
Can anybody think of a way to clean a defined area in a HTML page (say, a DIV) from all previous style definitions? I can’t.
-
an Iframe displaying the chunk and embedding foundation.css would help, but I fear for the user’s workflow when 5-10 IFrames have to be rendered and then adjusted in height via JS once they are loaded. Yuck.
-
I have thought about “lifting” all other CSS to a sub-class (i.e. adjusting the CMS’ CSS), but that would involve touching a lot of files, some probably PHP source code, and I’d rather not do that.
I don’t think this has a solution but you never know.
you could give all of the divs that contain code from the WYSIWYG editor a class, and then reset everything inside of that div.