Innova HTML Editor External CSS

I seem to have figured out my own answer and I want to share it here. I would put it in the Wiki, but I don't have time to learn the format right now.

Background: I wanted to give my product manager specific css styles to use when using the html editor in product creation. When using the formatting options in Innova Studio html editor, it inserts all in-line styles, which seems like a lot of extra code AND it prevents the advantage of sitewide style changes by editing an external css file. (If the person editing the products knew all the site wide css tags created elsewhere AND if they knew how to code them in, you wouldn't need to do this.)

I am no css or html wiz, but through persistance, I have discovered a documented way to do this with Innova Studio. (A side note: Innova Studio support is worthless. They would not help me unless I was the developer that purchased the license for the source code. Being a user is not enough.) So, I found documentation scattered around the internet if you search on InnovaStudio documentation.

Here are the steps (Oh, yeah, the disclaimer: USE AT YOUR OWN RISK):

1. You are going to edit two files in the storefront. Although these are simple changes, back them up before you upload the new files.
   
2. Via ftp, upload a new css document to the ../pc folder with the other store css files (pcHeaderFooter.css and pcStorefront.css). I named mine HtmlEditor.css and chose this location because it was with the other store css files, for simplicity. This new css document will contain only the css styles that you want to make available to your product editors. This css will be available when you open your html editor and give you a preview of the formating!
   
3. In this same ../pc folder, find your header.asp file, download it via ftp and open it in a text editor. At the top of the page in the head section, you have to add the link to this additonal css file, so the new css shows in your pages. Just add it under the links to the other two css links like this:
   <link type="text/css" rel="stylesheet" href="pcHeaderFooter.css" />
   <link type="text/css" rel="stylesheet" href="pcStorefront.css" />
   <link type="text/css" rel="stylesheet" href="HtmlEditor.css" />
   Save the file and ftp it back to the same location.
   
4. Go to your admin folder and find the file pop_HtmlEditor.asp and via ftp, download it for editing. This is the file that defines the behavior of the Innova Studio Html editor. Open it up in a text editor and near the end find the following group of lines. Insert the two lines listed in red. The first one tells the editor to use the HtmlEditor.css file and the second line tells the editor to display the styles for use in the editor. (I have also added in blue comments about what some other lines do. You may want to alter those, too) After you have made the changes, save the file and ftp it back to the same location.
   
   <script>
       LoadDoc();
       window.resizeTo(630,570); {Editor popup window size}
       var oEdit1 = new InnovaEditor("oEdit1");
       oEdit1.css="../pc/HtmlEditor.css";   
       oEdit1.btnStyles=true;       
       oEdit1.width=600 {Editor width size within the above popup window size}
       oEdit1.height=400 {Editor height size within the above popup window size}
      
       oEdit1.features=["FullScreen","Preview","Search",
               "Cut","Copy","Paste","PasteWord","|","Undo","Redo","|",
               "ForeColor","BackColor","|","Bookmark","Hyperlink",          "XHTMLSource","BRK","StyleAndFormatting","TextFormatting","ListFormatting",     BoxFormatting","ParagraphFormatting","CssText","Styles","|","Image","Flash","Media","|",
               "Table","Guidelines","Absolute","|","Characters","Line",
               "Form","Clean","ClearAll","BRK","FontName","FontSize",
               "Paragraph","|","Bold","Italic",         "Underline","Strikethrough","|","Superscript","Subscript","BRK","JustifyLeft","JustifyCenter","JustifyRight","JustifyFull",
               "|","Numbering","Bullets","|","Indent","Outdent"];
       <%if session("admin")=-1 then
       if InStr(Request.ServerVariables("HTTP_USER_AGENT"),"MSIE") then%>
       oEdit1.cmdAssetManager="modalDialogShow('assetmanager/assetmanager.asp',640,465)";
       <%else%>
       oEdit1.cmdAssetManager="modalDialogShow('../assetmanager/assetmanager.asp',640,465)";
       <%end if
       end if%>
   
       oEdit1.RENDER(document.HTMLForm.elements.txtContent.value);
   </script>
   
   
5. Clear your browser cache and cookies. This means you will have to log back in to your store.
   
6. Now when you use the html editor within the admin of your store to edit products, if you click on the double A button (Style Selection), a side pane will open up with the available style names previewed in that style definition. (I had a screen shot, but I don't have forum permissions to upload it.) Type your description in plain text, highlight it and then click the style you want to apply from the pane on the right. When you check the code, you will see the style is applied WITHOUT using inline styles. You can edit your HtmlEditor.css file and effect site wide changes now. You can also instruct your store editors to only use those styles. Naming them appropriately will help.
   
7. Notes: You can still apply paragraph styles to place heading tags, etc.
   HTML selectors will NOT be included in the style selection list, so don't bother placing them in the HtmlEditor.css file. When I created my css file, I just put a period in front of my css classes to them show up. Also, the popHtmlEditor.asp file I changed only affects the admin product editing. There are other instances that this could also be applied to.
   
8. Hint: to create css classes for your new HtmlEditor.css file, you can use this free online css creator that I found helpful: http://cssmate.com/csseditor.htm It creates live previews as you style your text. Also, check out www.w3schools.com for a css tutorial. (I am going to do that some day myself! )
   

OK, again, I don't have css under my belt, so I hope those of you who do will add your helpful comments and ideas here. It would be really nice if Early Impact would add their two cents here.

Finally, I believe this is so simple and unobtrusive that Early Impact should consider distributing these two changed files with their updates. They could even add some sample formatting. Then, all we would have to do is edit or add styles to the HtmlEditor.css.

Thanks


Edited by carstone - 05-October-2008 at 11:20pm

Excellent posting, I should have been more detailed in my posting on http://www.earlyimpact.com/forum/forum_posts.asp?TID=1750&KW=innova&PID=5690#5690. What I've learned since then is that neither pcStoreFront.css, nor pcHeaderFooter.css works very well as the Innova css file because of the multiple divs/classes. If you set body to have a colored background then anyone using the Innova Editor will have to cope with a colored background.

Instead of trying to maintain a separate css file for use with the editor, I have created a new style sheet for the site. I had to do this anyway because I like to strip out the defaults
* {
     padding:0px;
     margin:0px;
}


html, body {
     margin: 0;
     padding: 0;
}

To center tables in FireFox, I add
table {
     margin:0px auto;
}

Plus, neither pcHeaderFooter.css or pcStoreFront.css has any definitions for tags like h1, h2, h3, a, ul, li, etc.

I set the body background to white in my style sheet and then override the body background color in pcHeaderFooter.css. That way everyone using the Innova Editor sees text presented very close to how it'll look when the page is styled.

End users s/b instructed to never use Innova's font and font sizes. On the web, there are only a very few fonts that you can be sure that sites guests will have installed. Set your fonts in "body" in your style sheet (current recommendation is "Tahoma, Helvetica, Arial, sans-serif" to cover Mac and PC users) For sizing, Innova creates a static sized, pt based font size that is a huge no-no. Pt sizes vary according to the font that's being used by the browser. Instead create some classes - big, small, etc based on either em or % font sizes.

You can set those to not show - more info at http://www.soyjoy.hk/tc/module.htmlarea/documentation/aspnet_toolbar.htm.

I don't know why EI didn't include the documentation files in PC. I already had a license so I never really noticed it's absence before.Perhaps it's a licensing issue?

A clarification on the above: as far as we know there is no documentation for the Innova Studio Editor. We have contacted them about it several times in the past. There used to be some tutorials, but we can't find those either on the Web site.

Also, pcStorefront.css does include style definitions for H1, H2, etc. tags. In order not to conflict with other cascading style sheets, those definitions specifically targets "ProductCart" page elements, such as "pcMainTable".

Here is the version of this file that currently ships with ProductCart (as of December 2008).
uploads/1/pcStorefront.zip