Valid XHTML 1.1

[Orion Logo]

Orion - Style Sheets

The Orion Servlet produces a multitude of pieces of HTML. The content of the HTML is dependent on both the requested URL, and the state of the servlet.

In order to help you get Orion to fit well into your web server scheme, the generated HTML uses Cascading Style Sheets (CSS) to govern all aspects of the display. The default configuration will provide HTML that is sufficient for many purposes. However, should you wish to customize it, this page documents what needs to be done and how to do it.

In order to fully apprciate the following descriptions, you should obtain a CSS reference book and take time to understand the concepts.

Default Configuration

By default, the HTML produced by the servlet will contain a set of CSS style definitions that will provide a basic rendering of the content.

For example, the basic HTML page will contain the following HTML:

<head>
<style>
  body { color: #00ffff; background: #400000 }
  h1 { text-decoration: underline; text-align: center }
  a:link,a:visited,a:active,a:hover { color: #c0c0ff }
  td.orionapplettable { border: double white; background: black; text-align: center }
  body.orionerror { color: #ffffff; background: #ff0000 }
  .orionlink { font-size: 70% }
</style>
</head>

Making the pages use your style sheet

Orion is designed such that you can define a style sheet to be used to override the default display characteristics as shown above. This override is performed using the cssURL servlet configuration parameter. The value of this parameter can be set to any URL of a CSS file. This URL may be on the same host, or may even be on a different host.

Orion then puts reference to this defined CSS URL into all of its generated HTML such that the defined CSS can override any of the default values provided.

For example, if you set the cssURL to http://sample.ruelgnoj.co.uk/site.css would result in the following HTML being generated.

<head>
<style>
  body { color: #00ffff; background: #400000 }
  h1 { text-decoration: underline; text-align: center }
  a:link,a:visited,a:active,a:hover { color: #c0c0ff }
  td.orionapplettable { border: double white; background: black; text-align: center }
  body.orionerror { color: #ffffff; background: #ff0000 }
  .orionlink { font-size: 70% }
</style>
<link rel="stylesheet"
      href="http://sameple.ruelgnoj.co.uk/site.css"
      type="text/css"
      title="Style">
</head>

Generated Page overview

The figure below shows a typical piece of generated HTML. It can be seen that the majority of the tags used have a class attribute. It is possible to override the appearance of any of the tags used by the generated HTML to allow the customization of the view.

<body class="orion">
  <table border="0" width="100%" class="orion">
    <col width="25%">
    <col width="50%">
    <col width="25%">
    <tbody>
      <tr class="orion">
	<td class="orion"> </td>
	<td class="orion"><h1 class="orion">Test Source</h1></td>
	<td valign="top" align="right" class="orion">
	<a href="/orion/test/doc/index.html"
	   class="orionlink"
	   target="_blank">Orion Documentation</a>
	</td>
      </tr>
    </tbody>
  </table>
  <center>
    <table border="0" class="orionapplettable" cellpadding="0" cellspacing="0">
      <tbody>
	<tr class="orionapplettable">
	  <td class="orionapplettable">
	    <applet height="600"
		    name="orion"
		    archive="/orion/test/orion.jar"
		    width="560"
		    code="com.sun.emp.tools.orion.OrionApplet.class">
	    </applet>
	  </td>
	</tr>
	<tr class="orionapplettable">
	  <td class="orionapplettable">
	    <a href="javascript:viewsource()" class="orionapplettable">Show file as HTML</a>
	  </td>
	</tr>
      </tbody>
    </table>
  </center>
</body>

What styles should be overridden?

In general, most if not all HTML tags in the generated code have a class specification. This means that the display of the attribute of a particular attibute can be modified in several ways.

Global Overrides


Class overrides


Item Overrides