User blog:Ichindar/Fancy Signatures......and just normal signatures

2

Signature's are bit of text that are added at the end of a talk page or voting page by typing ~~~~. This will add a signature and a timestamp. To put display only a signature you can use ~~ and for only a timestamp ~~~~~. Your default signature should look like this:
Example ^talk While is works at the basic level, you may notice that many users have more fancy signatures. To create a more fancy signature you will need to learn a bit of basic HTML. HTML stands for HyperText Markup Language. It is used in the creation of web pages. On Brickimedia a watered down version of HTML is used called WikiText. This language is designed to be easier than HTML. In this tutorial we will be using WikiText and HTML to create a signature that looks like this:
LK901.

The Basic Code

HTML uses 'tags' to display information. Tags are bits of text surrounded by < and > signs. Every tag also has a closing tag. a closing tag is nearly the same as an opening tag except that it has a / sign before the word (please note many HTML tags are replaced with simpler formatting in WikiText). These are example tags: We will now create the basic code for our signature. Click on your name at the top left of the screen and then click on 'Preferences' (please note you must be a registered user to do this). Scroll down until you see the 'Treat Signature as WikiText' checkbox. Tick it and copy the following code into the 'New Signature' form:

<span>(add your username here)</span>

Scroll down to the bottom of the page and click 'Save'.

Code explained

 and 
The span tags currently do nothing to change the look of the the signature. However, once we add something attributes (more about that later), our signature will suddenly jump to life!

Fancy!

Now we have a working signature. That is cool, but it is supposed to be 'fancy', right? To make our signature fancy we need to add attributes. Attributes are little bits of code that changes how a tag works. In fact they are inline CSS, but that's too complicated to talk about in this tutorial. This signature uses only three attributes, background-color, text-shadow and font-family. To start off we will add the background-color attribute. To add an attribute you need the style="" attribute.

Change your signature code so that it looks like this:

<span style="background-color:red">(ADD YOUR USERNAME HERE)</span>

Its starting to look better, eh? As you may have guessed 'red' can be changed to whatever color you want. So, blue grey, white whatever! If you have read through this tutorial you probably will have guessed how to add the font-family and text-shadow attributes (without there value). If not take a peek at the code below.

<span style="background-color:red;text-shadow:0 0 6px lightgrey;font-family:Vijaya">

New Code

You might have guessed what the font-family value is, but what the h*** is the text-shadow value?! As you might have guessed you can asign a font through the font-family attribute. you mioght not have guessed however that the capitalisation of the font name is absolutely required. Also, if a font isn't installed on a viewer's computer they will just see there default font. Now onto text shadow! text-shadow adds a drop shadow to a bit of text. But our text doesn't have a drop shadow?! The 0 0 value's before the 6px make sure that the shadow is a 'glow' shadow. You can change the numbers if you want. See what happens! Have fun created signatures!

LK901^{^{100 AE - TLM RP}}