EditLive! 9 Documentation : Setting CSS in the Applet Code

Created by Jessica Hardy, last modified by Kristin Repsher on May 22, 2012 
<!--
******************************************************
 
 setStyles.html --
 
 This tutorial shows developers how to specify the CSS to be used by EditLive!.
 
 Copyright © 2001-2012 Ephox Corporation. All rights reserved.
 See license.txt for license agreement
 
******************************************************
-->
<html>
       <head>
               <title>Setting the CSS to be Used by EditLive! - Tutorial</title>
               <link rel="stylesheet" href="stylesheet.css">
               <!--
               Include the EditLive! JavaScript Library
               -->
               <script src="../../redistributables/editlivejava/editlivejava.js" language="JavaScript"></script>
       </head>
       <body>
 
               <h1>Setting the CSS Used by EditLive!</h1>
 
               <p>This tutorial shows how to specify the CSS used by an instance of EditLive!</p>
 
               <p>The instance of EditLive! featured in this tutorial uses styles specified in a CSS file, as well styles explicitly passed to editor using it's load-time properties.</p>
 
               <!--
               The instance of EditLive!
               -->
               <script language="JavaScript">
                       // Create a new EditLive! instance with the name "ELApplet", a height of 400 pixels and a width of 700 pixels.
                       var editlive = new EditLiveJava("ELApplet", 700, 400);
 
                       // This sets a relative or absolute path to the XML configuration file to use
                       editlive.setConfigurationFile("styles_config.xml");
 
                       // Specifying CSS for use by editor
                       editlive.setStyles(encodeURIComponent("h5.warning{color:red;font-weight:bold;}"));
 
                       // Before sending HTML to the instance of EditLive!, this HTML must be URL Encoded.
                       // Javascript provides several URL Encoding methods, the best of which is
                       // 'encodeURIComponent()'
                       editlive.setBody(encodeURIComponent("<h1>Specifying CSS for Use with EditLive!</h1><h3>Using the EditLive! Configuration File</h3><p>The EditLive! Configuration File can be used to explicitly define CSS or to reference an external CSS file.</p><h3>Using the Styles Load-Time Property</h3><p>The <em>Styles</em> load-time property for EditLive! can be used to specify CSS.</p><h5 class=\"warning\">Note: The Styles load-time property cannot be used to reference an external CSS file.</h5>"));
 
                       // .show is the final call and instructs the JavaScript library (editlivejava.js) to insert a new EditLive! instance
                       //  at the this location.
                       editlive.show();
               </script>
       </body>
</html>