User:Underscorre/Ruckus

= This page intended for = Okay, you're doing well with the colours, but as Dupin said above, you do need to link to your profile, otherwise there's no point in having the signature in the first place. Your current code looks like this:

You should change it to this:

Doing this will make it link to your profile, so it appears like this:
 * I' l l j u s t l e a v e t h is message h <font color="#808080">e <font color="#696969">re. 

Okay, now I'm going to move away from your example to quickly show some pieces of CSS you can use to change how things look. For this, we're going to use the HTML style attribute. Instead of using the tag used above, we're going to use the  tag. This is just because the font tag is no longer officially part of HTML. Take a look at the example below, in which we change the size of some text and make it green.

This will output:
 * -TheRuckus-

The code is quite intuitive. The "style" thing means that what follows is how the text will look. The "font-size: 150%;" thing means that the font's size will be 150% of its normal size and the "color: green;" thing means the color of the text will be green. If we changed the 150% to 200% and the green to red, this is how it would look.
 * -TheRuckus-

You can change which font is used using "font-family". Let's take the code from the previous example and add a custom font.

I've highlighted what's been changed in green. This will output:
 * <span style="font-size: 150%; color: green; font-family: 'Georgia', serif;">-TheRuckus-

What this is basically saying is "use the font family 'Georgia' to display the text. If you don't have that font, use the default serif font."

Now we'll move on to some more interesting stuff. First, adding glow effects to text. Take a look at the following code, which is based on the previous examples. Again, the code changed is highlighted in green.

Here's how that will display:
 * <span style="font-size: 150%; color: green; font-family: 'Georgia', serif; text-shadow: 0 0 15px green;">-TheRuckus-

If you want to make the glow less/more obvious, you can decrease/increase the number 15. You can also change the word "green" for a different coloured glow. Now we'll take a look at borders. Borders are interesting ways to draw attention to your signature, although they can be intrusive if you make them too large. Here's some code, it's different from the previous examples, but I've highlighted the important stuff:

This would output:
 * -TheRuckus- talk contrib

The important part here is the "border" thing. The "2px" refers to the thickness of the border. The "solid" means that there are no breaks in the border. The "red" means the colour of the border. The "padding" thing probably shouldn't be changed, as it ensures things don't look too cramped. Now, let's say you wanted this effect:
 * <span style="border: 2px dotted green; border-radius: 20px 0 20px 0; padding: 5px; color: green; font-size: 125%;">-TheRuckus- talk contrib

Here's the code behind that:

The "dotted" part makes the border dotted. There are a couple of other things you can use there - "dashed", "double", etc. Google "css border styles" for more. The border-radius thing is what makes the circular corners. You can increase or decrease the 20px to change how circular the corners are. You can also just put "20px" instead of of "20px 0 20px 0", which will output this:
 * -TheRuckus- talk contrib

If you want, you can set a background for this. This might look as follows:
 * <span style="border: 2px dotted green; border-radius: 20px 0 20px 0; padding: 5px; color: green; font-size: 125%; background-color: white;">-TheRuckus- talk contrib

The code for this would be as follows:
 * <span style="border: 2px dotted green; border-radius: 20px 0 20px 0; padding: 5px; color: green; font-size: 125%; background-color: white; ">-TheRuckus- talk contrib