Themes in Seraphiel

Seraphiel offers a number of themes which you can use to customise your playing experience. By default, Seraphiel comes with the following themes:

  • Utopia (essentially the current Utopia format)
  • Crikey! (Australiana green & gold)
  • Stars and Stripes Forever (red, white & blue)
  • Dutch Courage (black on orange)
  • Teh 1 (Matrix-inspired green on black)
  • Comrade Mehul (black on red)

You can set your theme on the (ingame) Preferences page using the buttons on the left.
Note that at the moment your theme will apply to both WoL and Genesis (there’s no technical reason why they couldn’t or shouldn’t be independant, that’s just the way they are).

If you’re interested, however, you can create your own themes; it really is very easy, particularly if you know some basic CSS. And if you don’t know some basic CSS, you could learn (it’s not that hard), or alternatively post the sort of colours you want on the forums and either I or someone else will have a look at it.

The process goes

  1. Find the section in the code (to get at the code, go to Tools->Manage User Scripts->select Seraphiel->click “Edit”) that goes somewhat like this:
    	Styles[0]=new Style("Utopia", "", "", "", "", "", "",
            "", "", "", "", "", "", "", "", "", "");
    	Styles[0].body="{background-color:#000000;color:#fffffe;background-image:none;}";
    	Styles[0].resources="{background-color:#400000;color:#fffffe;width:100%;}";
    	Styles[0].label="{color:#b0b0b0;}";
    	Styles[0].value="{color:#ffeecc;font-weight:bold;}";
    	Styles[0].report="{background-color:#000040;color:#ffeecc;}";
            Styles[0].button="{position:fixed;left:0;cursor:pointer;
            width:10em;height:3em;background-color:#003366;}";
    	Styles[0].link="{color:#ffeecc;text-decoration:underline;}";
    	Styles[0].vlink="{color:#ffddbb;text-decoration:underline;}";
    	Styles[0].kdColumnHead="{background-color:#000040;cursor:pointer;}";
    	Styles[0].kdColumn1="{background-color:#000000;color:#ffffff;}";
    	Styles[0].kdColumn2="{background-color:#303030;color:#ffffff;}";
    	Styles[0].kdProv="{color:#ffffff;}";
    	Styles[0].kdMeKing="{color:#ffaaaa;font-weight:bold;}";
    	Styles[0].kdKing="{color:#ffaaaa;}";
    	Styles[0].kdMe="{color:#66ccff;font-weight:bold;}";
    	Styles[0].kdOnline="{color:cyan;}";
    	Styles[0].kdMeKingOnline="{color:#ffaaaa;font-weight:bold;}";
    	Styles[0].kdKingOnline="{color:#ffaaaa;}";
    	Styles[0].kdMeOnline="{color:#66ccff;font-weight:bold;}";
    	Styles[0].kdInactive="{color:yellow;}";
    	Styles[0].kdProtection="{color:#99ffbb;}";
    	Styles[0].throneTime="{color:#a0a0a0;}";
  2. Copy one of the styles and paste it immediately after the last other theme (it doesn’t have to be this way but it will make things convenient).
  3. Go through and change each of the indexes (eg Styles[0] the index is 0) to the next available number (for your first custom theme, this is 6).
  4. Edit the properties as you like. Just above the first theme is a brief explanation of what each of the values changes. It’s a good idea to stick to changing text properties like color, background-color, font-weight, text-decoration, font-size, etc – many of the other properties have a substantive effect on functionality.
  5. You’re done – you can now set this theme on Utopia’s preferences page

Some notes:

  • The .throneTime element does not actually do anything at the moment. That will change, though.
  • CSS uses US English. “colour” or “background-colour” will not be recognised.
  • The curly brackets are there for a reason

One disclaimer: it will be substantially harder to add themes if you are using a .XPI version of Seraphiel. Basically, to get at this code you’d have to change the name from seraphiel.xpi to seraphiel.xpi.zip, take out the content folder, modify the seraphiel.js in there and then put it back in place.

Also please note that if you upgrade Seraphiel, your themes will be lost.
It would be a good idea to save your changes in some other file, and then you can put them back in after upgrading.

If you’ve created a theme, please share it with us. It may well find its way into a future version of Seraphiel!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: