Getting Started

Required Skills

The following skills are required prior to working with this tutorial:

Basic client-side JavaScript
Basic Knowledge of XML

Required Tutorials Completed

The following tutorials are required to be undertaken before attempting this tutorial:

Tutorial

Step 1. Create a Reference to the External CSS File in the EditLive! Configuration File

To specify an external CSS file for use with EditLive!, you'll need to make changes to your EditLive! Configuration File. As outlined in the Creating and Editing Configuration Files Tutorial, this can be done using a text editor.

Using a Text Editor to Specify an External CSS File

Open the sampleeljconfig.xml file packaged with EditLive! using a text editor. Locate the following line of code:

<!-- <link rel="stylesheet" href="http://www.yourserver.com/style.css" type="text/css"/> -->

Remove the  characters wrapping to tag.

<link rel="stylesheet" href="http://www.yourserver.com/style.css" type="text/css"/>

Change the href attribute to reference the main.css file packaged with this SDK. The URL for the location of the main.css can either be absolute or relative to the webpage where EditLive! is instantiated from.

<link rel="stylesheet" href="main.css" type="text/css"/>

Save this configuration file as styles_config.xml.

Step 2. Create an Instance of EditLive! for Java in a Webpage

As shown in the Instantiation Tutorial, create an instance of EditLive! in a webpage.

<html>
       <body>
               <script src="../../redistributables/editlivejava/editlivejava.js" language="JavaScript"></script>
               <script>
                       var editlivejava = new EditLiveJava("ELJApplet", "700", "400");
                       editlivejava.setConfigurationFile("../../redistributables/editlivejava/styles_config.xml");
 		       editlivejava.show();
               </script>
       </body>
</html>

Use the setConfigurationFile Method to specify the styles_config.xml file.

Save this webpage as setStyles.html

Step 3. Specify a String of CSS Using the Styles Load Time Property

Many web-based applications store CSS in a server-side database. Developers can update these CSS values and the application architecture can use server-side scripting to write the CSS values from the database to the desired webpage.

EditLive! provides the setStyles Method to allow developers to load CSS values directly into EditLive!. The CSS string passed to this property could be printed to the page using server-side scripting, as mentioned above. This would ensure the CSS applied to EditLive! would always be the most up to date CSS extracted from the server.

For this tutorial, no server side scripting is used. However, the CSS string

h5.warning{color:red;font-weight:bold;}

could easily have been written by a server-side script.

<html>
       <body>
               <script src="../../redistributables/editlivejava/editlivejava.js" language="JavaScript"></script>
               <script>
                       var editlivejava = new EditLiveJava("ELJApplet", "700", "400");
                       editlivejava.setConfigurationFile("../../redistributables/editlivejava/styles_config.xml");
                       // Specifying CSS for use by editor
                       editlivejava.setStyles(encodeURIComponent("h5.warning{color:red;font-weight:bold;}"));
 
                       editlivejava.show();
               </script>
       </body>
</html>

EditLive! 9 Documentation : Setting CSS in the Applet Tutorial