Page stolen from Elftown's elftownstylesheets, but works nicely here to:


You can define your own stylesheets on Elftown and then other people can use them.

What is possible?

It is possible to change colours, move things, resize boxes and change background-images.

What is not possible?

You can't change buttons, text and reconfigure tables.

How to do it?

First you need to have access to the tech-page (link at top of the page). You have that if you have selected that you want to be a part of the Elftown crew in your personal data.

Then you can upload your stylesheet there.

How does it work?

Let's begin with examples:

    TH {
      text-align: left;
    }

First is the html-tag TH. This means that everything between {} will be used on every TH-cell (it is a table cell.). Then there it says that the text should be aligned to the left.

Another example:

    .WELCOME { font-size: large } 

Note that this starts with a dot! It means that WELCOME is not a tag, but a class. On the entrance-page of Elftown there is html that says <DIV CLASS=WELCOME> and it's the appearse of that text we change with this definition. We make the text large.

    .NEWSTEXT P {
      background: black;
      font-family: times; 
      margin-top: 0;
      margin-right: 0em;
      margin-bottom: 0em;
      margin-left: 0;
     } 

Here you have two things before the {}-block. This means that the definition is applied to every P-block inside any NEWSTEXT-block. P is a html-tag and NEWSTEXT is a defined class in the Elftown html, as you can tell by the dot.

And then something simple:

    .NEWNEWSBUTTON {}

This doesn't mean anything! It's just there so that you should see that you can put something there.

How your stylesheet should look like

It's very important that your stylesheet is as small as possible. The reason is that Elftown changes a lot, and you don't want to change your stylesheet all the time. Therefore the standard Elftown stylesheet is included in your stylesheet with the line:

     @import url(http://elftown.eu/index.css); 

Then you see a copy of the entire stylesheet again. There you can for example change all colour. Then you remove every line that you haven't changed!

Like this. It says:

    BODY {
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 60px;
      background-image: url(leaves1.jpg); 
      /*  background-image: url(test.jpg); */
       background-repeat: repeat-y;
       background-color: #DEF8D8; 
       color: black;
       font-family: verdana, arial, serif;
       font-size: 14px;
       /*
         color: #FFFFFF;
         background-color: black;
         background-image: url(bg1.jpg); 
         font-family: Arial, sans-serif;
      */
     } 

(The things between /* and */ is just comments, so they can be left or removed as you wish.)

You change the lines:

    background-image: url(leaves1.jpg); 
    color: black;

to

    background-image: url(go.gif); 
    color: #500000;

This means that the entire block should be:

    BODY {
      background-image: url(go.gif); 
      color: #500000;
     }

The rest of the definitions of the body should be left out. Maybe you should add

      margin-left: 60px;

because you know that you don't want the margin to the left to change.

More

Read more about the stylesheets on http://www.w3.org/ There you also have a stylesheet-validator, which I suggest that you use, so that you can see if you have forgotten a ; or something like that.

Hope this is enough information to get you going. Good Luck.