HotDoodle Support

Custom Theme: HotDoodle HTML Editor

The HTML editor used by HotDoodle opens in a frame and does not use the page structure defined in your layout. Instead, it uses the following html:

<html>
<head>
<base href="http://www.hotdoodle.com/formattest/" /><style>
@import url(/formattest/files/theme/compiled/Custom_editor.css);
</style>
</head>
<body>The text to be edited goes here</body>
</html>

This difference can cause complications, for example: If the body background of your website is set to black and the main background to white, the web site would look fine. However, the editor would open with black text on a black background because it uses HTML that does not have divmain in it.

body [
    background-color: black;
]

.divmain [
    background-color: white;
]

Note: We compensate for this issue by allowing the CSS to be different in the editor frame than it is in the main document. However, rather than have 2 full sets of CSS declarations we use the pre-processor:

body [
     border: 0px;
     {if $editor}
      background-color: {$MODULE_BODY_BG_COLOR}; /* MODULE_BODY_BG_COLOR */
      width: 600px;
     {else}
      text-align: center;
      background: {$BODY_BG_COLOR};
     {/if}
    ]

Note: The {if $editor} is false, and the main document is centered and has the BODY_BG_COLOR. The editor window has the MODULE_BODY_BG_COLOR and the text in it is not centered. Also it has a limited width. This makes content in the editor window look much like it does in a typical block.