User and Object Appearance in v5

This document describes the new way object appearance is dealt with in v5.

1. CSS in v5

In previous enCore versions, all web objects had a property use_external_stylesheet inherited from $enCore_web_class. If this was set on an object, the external styesheet would ovrride other appearance settings.
This meant that a user had a limited set of options for manipulating her own or her objects' appearance:

  1. She could set the value for each of the pre-defined parameters like font size, font family, etc., where the value of each of the parameters had to be chosen from a pre-defined set of values.
  2. She could use an external stylesheet. If selected, this would override other style options.

In v5, this way of defining style has been replaced by a system which we believe adds flexibility and power to enCore.

1.1 Static CSS

In v5, CSS is used for style and appearance and is also recommended for styling of e.g. note texts. The CSS has been broken into static files:

This is referred to as static stylesheets in v5.
Browsers load the static stylesheets in the order in which they appear above.

1.2 Internal CSS

In addition to the static CSS, v5 makes use of internal CSS.
The internal CSS is set on objects in-MOO, is inserted into HTML as internal CSS and overrides definitions set in the static CSS.

Internal CSS can be set on all objects, including users. This is done by selecting `Appearance' while editing the object. The internal CSS shown in the screenshots below is inherited from #1.css, and can of course be changed and extended at will.

1.3 External CSS

In addition to the internal CSS, one may attach an external stylesheet. This can come in handy if a user wishes to use the same stylesheet across multiple MOOs and wants to use some or all of the pre-defined CSS definitions. In order to attatch external CSS, type the URL of the external stylesheet into the `Additional CSS file' field of the form in the first image below.

2. Changing Object Appearance

Editing the appearance of an object:

Here, the body text color of the object has been changed from the default black to red. You can also see some of the classes defined in themed_all.css.

Editing the appearance of a player:

Here, the body text color has been changed to white, while the background color has been changed to black. Also, the font size has been raised from 100% to 200% and the font family has been changed to Verdana.

There is even a `preview' feature allowing you to view your changes by saving changes and selecting `view/update in web frame'.

Note: under Edit Theme and Appearance, users can decide to override object styles.

3. The HTML Chat

Even the HTML chat of enCore v5 utilizes CSS. Here, CSS is - or can be - used in order to distinguish

This way you may customize the look of the chat, and it may be easier to participate in a conversation where e.g. move-messages are shown in for example gray text (or perhaps even not shown at all).

Users can change the HTML chat CSS through Preferences → Chat settings.

4. Using CSS definitions

4.1 Object descriptions and texts

It is recommended that one uses the style definitions in general.css when adding style to e.g. $note texts.

A typical case would be to make use of the class bold, italic, underline, left, right, justify, aqua, black, bgblack, etc. or the title and subtitle classes inherited from #1.css.


<div class="title">My note</div>
<div class="subtitle">It's mine</div>
<p>I tell you, it <span class="italic">is</span> definitely <span class="bold red bgblack">mine</span>. 

Which browsers will render as

By using the pre-defined classes it becomes easier for users to customize their view of the MOO-world. If someone has set .red { color: #FF3333 } then red colored text in the image above would show up in their kind of red instead of red. This also means that users e.g. can change the font size too, so that e.g. visual impaired users can have a better MOO-experience.

4.2 Spice up the MOO

If you want to use geek-style chat, set the HTML chat CSS to e.g.

body#htmlChat      { color: lime; background: black; margin-right: 1em; }
.htmlChat          { font: 90% normal 'Lucida Console'; font-weight: bold}
.htmlChat a        { font-family: 'Courier New Roman', Monospace; }
.htmlChat .indent  { text-indent: -1em; margin-left: 1em; margin-top: 0; }
.htmlChat .playerMoveMessage { color: #444; }
.htmlChat .objectMoveMessage { color: #444; }
.htmlChat .echo    { color: #00CC00; font-weight: bolder }
.htmlChat .teacher { color: lime; }
.htmlChat .buddy   { color: blue; }

...with `Local echo?' set to `Yes' (Chat settings) and me.echo_prompt set to [root@lingo ~]$ , causing the chat to be rendered as:

...or, for a different kind of geek-style, to

body#htmlChat      { color: #DDD; background: blue; margin-right: 1em; }
.htmlChat          { font: 90% normal 'Lucida Console'; font-weight: bold}
.htmlChat a        { font-family: 'Courier New Roman', Monospace; }
.htmlChat .indent  { text-indent: -1em; margin-left: 1em; margin-top: 0; }
.htmlChat .playerMoveMessage { color: #05059e; }
.htmlChat .objectMoveMessage { color: #05059e; }
.htmlChat .echo    { color: #BBB; font-weight: bolder }
.htmlChat .teacher { color: #DDD; }
.htmlChat .buddy   { color: blue; }
 .htmlChat .gag     { display:none; }

Resulting in

(Here, me.echo_prompt is set to C:\> ).

(End of file)