The following skills are required prior to working with this tutorial:
- Basic Knowledge of XML
Required Tutorials Completed
The following tutorials are required to be undertaken before attempting this 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:
Remove the <!-- and --> characters wrapping to tag.
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.
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.
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
could easily have been written by a server-side script.