Adding a CSS class name to the VFE body tag

CodeMonster

I am trying to set up a Data Capture Template which uses our production stylesheet inside the Visual Format Editor. This wasn't a problem - I used a custom config file and all was good in TeamSite land.

The problem is that the CSS was designed expecting this content to be within a parent style class named 'mainContent'. Therefore, I need to add that class to the body tag of the VFE for the styles to look correct.

Example of what I want to set via JavaScript:

body class="mainContent"

I realize I could edit the CSS and create a modified file just for this, but that will become a maintenance nightmare. I am hoping to do something like the following, but I don't know how to get to correct VFE DOM.

top._dcWin.eWebEditPro["MyContent1"].document.body.className="mainContent";

Does anyone know how to add a class name to the body tag of the VFE?

BTW, I'm not talking about the BodyStyle parameter which only sets inline styles.

Thank you in advance!

CodeMonster

I'm getting closer - so I thought I would share this with the community. Some day you guys may need to do this also.

Using the following code replaces "body" with "body class=mainContent".

top._dcWin.eWebEditPro["MyContent1"].setDocument(top._dcWin.eWebEditPro["MyContent1"].getDocument().replace("body","body class=mainContent"));

This approach feels sloppy but it's working.

When the template first loads, the VFE isn't active, so this bombs out. I tested this using a setTimeout and then quickly activating the VFE before the timeout fires and it works.

Don't forget that just because the VFE doesn't show you a BODY tag when you view source, doesn't mean it's not there. They are hiding it from you.

Does anyone know how to get this to fire once the VFE is activated?