Since the start of the project in 2004 eLML has been building on CSS (Cascading Style Sheets)CSS (Cascading Style Sheets). With the launch of eLML 3.0 in April 2006 the "core" files have changed to fully support CSS and even use custom CSS classes defined by the projects themselves. All the CSS definitions are made in the elml.css file located within the corresponding templates folder. In eLML there are structural elements like "clarify", "look" and "act" parts of a learningObject and there are content elements like "table", "box" or "paragraph". The latter can be overridden by the @cssClass attribute of these elements. The available list of @cssClass attribute values is defined within the _config/validate.xsd file of the project and should not be changed by the author. It is imperative that the project defines as a whole if they want to use custom CSS classes and if so, how these classes will be named. Then the designer can do the implementation of these classes. But remember that each eLML element already is assigned to a CSS class (usually named the same as the element name). So customized CSS classes would only make sense if e. g. you want two or three different representations of a <box> element. But if all your boxes should look the same, you can just use the "box" CSS class and define it as you like. Here is an example:
<box>Hello World!</box>
within your eLML XML file will be transformed in your XHTML document as follows:
<div class="box">Hello World!</div>
and the elml.css file contains the definition of this class:
.box {background-color:#BADE17; background-position:0 100%; padding:0 1em 1em; border:solid 2px #747566;}
Which will look like this on the eLML website:
In this example with only two words the box looks a bit strange. Therefore let's say you define your own CSS class called "fancylooking" and you use it for your box:
<box cssClass="fancylooking">Hello World!</box>
the code of your XHTML document would look like this:
<div class="fancylooking">Hello World!</div>
We now define a totally different kind of box display for the CSS class "fancylooking":
.fancylooking {background-color:red; padding:1em; border:solid 2px black; margin-bottom:2em; width: 100px;}
Which this time will look like this on the eLML website:
All other "box" elements without the @cssClass attribute will still all be assigned to the "box" CSS class. The same is true for most eLML elements: If no @cssClass attribute is set the elements name is used as CSS class name. Have a look at the source code!
The following elements will all have the possibility to define a "cssClass" attribute to override the default CSS class. If this attribute isn't used, the element's name is used as a CSS class in the final XHTML document (as illustrated above).
The bibliography listings by default uses HTML tags for bold and italic but these tags can also be customized as following:
The default navigation created by eLML is a special case since it does not only use CSS classes but also CSS IDs to identify the exact position of the navigation item.
As can be seen in the source code of this documentation file, the navigation of eLML is built up by lists (UL tag) and list items (LI tag) that are then defined in the elml.css file. These two HTML tags belong to the following CSS classes:
The whole eLML website navigation is built up only by defining the corresponding fonts, list-stlye-image etc. within the elml.css file. Have a look at the source code of this page and at the elml.css file for more information :-)