steve
/
orion-old


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
							<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  <head>
    <title>Orion - Style Sheets</title>
    <link rel=StyleSheet href="doc.css" type="text/css" media="screen"/>
    <link rel=StyleSheet href="docprint.css" type="text/css" media="print"/>
<style type="text/css">
.myemph { color: #800000;
	 font-style: italic }
</style>
  </head>
<body>


<table>
  <tr>
    <td>
      <table class="menu">
	<tr><td><a href="index.html">Index</a></td></tr>
	<tr><td><a>Installation and Administration</a></td></tr>
	<tr><td><a href="index.html#RunApplet"><b>Orion</b> as a Java Applet</a></td></tr>
	<tr><td><a href="index.html#RunApplication"><b>Orion</b> as a Java Application</a></td></tr>
	<tr><td><a href="keys.html">Key Mappings</a></td></tr>
	<tr><td><a href="bugparade.html">Bug Parade</a></td></tr>
        <tr><td><a href="licenses.html">Licenses</a></td></tr>
      </table>
      <p>
<a href="http://validator.w3.org/check?uri=referer"><img
	src="http://www.w3.org/Icons/valid-xhtml11"
	alt="Valid XHTML 1.1" height="31" width="88" /></a>
      </p>

    </td>
    <td>
<img alt="[Orion Logo]" style="text-align: right" src="images/orion3.jpg"/>
<h1>Orion - Style Sheets</h1>
<p>The <a class="Orion">Orion</a> 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.</p>
<p>In order to help you get <a class="Orion">Orion</a> 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.</p>
<p>In order to fully apprciate the following descriptions, you should obtain a
CSS reference book and take time to understand the concepts.</p>
<h2>Default Configuration</h2>
<p>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.</p>
<p>For example, the basic HTML page will contain the following HTML:</p>
<pre class="codesnippet">
&lt;head&gt;
&lt;style&gt;
  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% }
&lt;/style&gt;
&lt;/head&gt;
</pre>


<h2>Making the pages use your style sheet</h2>
<p><a class="Orion">Orion</a> 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 <a class="configparam">cssURL</a> 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.</p>
<p><a class="Orion">Orion</a> 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.</p>
<p>For example, if you set the <a class="configparam">cssURL</a> to
<a class="configvalue">http://sample.ruelgnoj.co.uk/site.css</a> would
result in the following HTML being generated.</p>
<pre class="codesnippet">
&lt;head&gt;
&lt;style&gt;
  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% }
&lt;/style&gt;
&lt;link rel="stylesheet"
      href="http://sameple.ruelgnoj.co.uk/site.css"
      type="text/css"
      title="Style"&gt;
&lt;/head&gt;
</pre>

<h2>Generated Page overview</h2>
<p>The figure below shows a typical piece of generated HTML.
It can be seen that the majority of the tags used have a
<a class="fileref">class</a> 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.</p>

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

<h2>What styles should be overridden?</h2>

<p>In general, most if not all HTML tags in the generated code have a
<a class="fileref">class</a> specification.
This means that the display of the attribute of a particular attibute can be
modified in several ways.</p>
<h3>Global Overrides</h3>
<br/>
<h3>Class overrides</h3>
<br/>
<h3>Item Overrides</h3>
<br/>
</td>
</tr>
</table>
<div class="copyright">
<p><a href="http://www.ruelgnoj.co.uk/">Copyright &#169; 1997,2015 by Steve Millington. All Rights Reserved.</a></p>
<img src="http://www.w3.org/Icons/valid-xhtml11"
alt="Valid XHTML 1.1!" height="31" width="88"/>
</div>
</body>
</html>