Banners (and use of old HTML tags)

[Kaz]

XHMTL 1.0 became a W3C recommendation in 2000, XHTML 1.1 in 2001.

Parts of the monarchy game code (and a lot of current banners) uses tags that were already depreciated in HTML 4.01 (e.g. <center>, <font>, <strike>).

In order to allow the screens to function while I slowly clean up, we are currently using the XHTML 'Transitional' document type, which tell browsers to render the page according to those specifications.

That means that - for now - some of the older depreciated tags (e.g. <font> and <center>) still work. However, there are other elements that no longer function.

The align attribute is a good example of this. <p align="center">, <td align="center"> etc do not work at all.

As the doctype is XHTML it is important that tags are opened and closed in the same order, it is important that the same case is used for an opening and closing tag, it is important that all tags ARE closed.

e.g.

<p>...........</p> <-- close it
<B>.......</B> <-- same case
<p><b>........</b></p> <-- close in the correct order

Tags like <br>, <img> and <hr> that do not have a second closing tag should be closed by adding a space and forward-slash to the end of the opening tag e.g. <br />, <img /> and <hr />

You should also get in the habit of surrounding an attribute with either single-quotes or double-quotes e.g. <p style='...'> or <p style="....">

Gradually we will be moving towards a website that is optimised for modern browsers, smartphone etc. That means HTML5 is the eventual fate. It also means that - for now - your banner habits need to improve. Otherwise a layout might work for you, but not for guildmates using a different browser, phone etc.

That also means a whole host of additional tags and attributes that will stop working.

Basically, in the long run we're going to need to take away the ability to custom code banners using HTML, and switch to widgets that have been formatted and tested to make sure they work for all browsers.

That's a way off though.


--------------------------------------


In the mean time you need to get an understanding of CSS2 in order to satisfy your needs to have pretty looking banners.

http://www.w3schools.com/cssref/default.asp

Relying on these older inline attributes to change the look of text is fine, until you try and change something that I've already set via CSS. At that point you'll probably notice that nothing seems to happen.

That's because the CSS I've set, is overriding the old HTML attributes.

If you want to override something I've set as the standard syle for a tag (such as <p> being centered), you need to do one of two things.

1. Start your banner with <style> tags, and add a selection of css classes or ids to style things how you want.

You can then use the class="" or id="" attributes to change the style of a tag.

If you go for this method make sure that you pick class names that do not interfere with the standard layout

2. Use the style="" attribute on any tag that you wish to change the style.


--------------------------------------

This thread can be used to discuss (or ask questions about) how to use CSS, and also to start thinking about what sort of banner plug-ins you like to see in the future.

[Igneous]

Wow! Thanks Kaz! Awesome! Amazing! Fantastic! You Rock!

[Kaz]

Two other points I thought I'd make.

Firstly, for those of you who are in the habit of using the <font> tag, the closest alternative that would be best to switch to is most likely the <span> tag. Basically <span> is an inline tag (like <font> was), that means that it doesn't start a fresh line (like <p> would).

Secondly, if you would like to make use of the preferences of your members, you can use the following classes. These are the classes that get used in game and they use the various settings that you can select from on the preferences module.

All the following classes will use the font scheme preference that you've chosen (e.g. font face and bold/not bold). The S, M and L represent the size of the font. Generally the game uses medium sized fonts for most things.

Text
These will use the selected colour scheme for 'text'. Generally this means white or a shade of grey.
class="fontTextS"
class="fontTextM"
class="fontTextL"

Heading
These will use the selected colour scheme for 'head'. There's quite an array of possible colours used here.
class="fontHeadS"
class="fontHeadM"
class="fontHeadL

Sub-Heading
These will use the selected colour scheme for 'sub'. There's quite an array of possible colours used here.
class="fontSubS"
class="fontSubM"
class="fontSubL

There are a few other CSS classes that you might want to make use of.

Set the colour of the text in an element to be the classic colours used to represent the different training levels.
class="trainGreen"
class="trainRed"
class="trainBlue"

Set the colour of the text in an element to be the classic colours used to represent the gods
class="godColor1" OR class="Angelique"
class="godColor3" OR class="Barnabas"
class="godColor5" OR class="Leto"

These training and god colours will not make use of the font family and bold preferences chosen on the prefs screen. To get around this you could use two classes.

e.g. class="fontTextM Angelique"

As both classes define the colour of the text the colour choice from the second listed class will overwrite the first. The font choice from the first set (having not been set by the God colour choice) will remain as per the first class.

You also might like to float an element to the left or right. Note that to do this with a block level element like a <p> or <div> will require also setting a width using a style attribute.
class="float_left"
class="float_right"