How to Handle Handles

Features

Matsi883

16 July 2014

2354 views

Intro

Hello, my name is Matsi883. Previously, I have been writing the Oh, the Ways you can Play series, but since the majority of people on T/O are not new to the game, I have decided to discontinue those articles., and instead, write the occasional feature. This feature is one of two about computer code. I have tried to boil them down just to give what people need to know, and the number of supercool names following this article will be my judge.

Before, people have always been referring to the thread custom-names-who-does-them for how to change everything about your name. That thread is a discussion, where ShadowLand asks TappedOut for answers and then answers his own question halfway down the first page. It’s confusing, and you need to understand what’s happening just from the code. I have taken all of that, and added some more, so you can take exactly what you need and paste it.

How To

Once you upgrade, go to your page. In the user menu, you will see a new box: the “Customize Username” box. Clicking it will have something like the picture below show up. Alternatively, you can get there from your Settings.

You can add the english color name of a color, and it will work just fine. But for anything more than that, you need CSS, and here is the CSS.

My Code

Before I talk about how you customize your own name, I’m going to show you the source code for mine (to see this, click on “View Source” or select something and click “Inspect Element”).

There are two important things going on here. The first is my name links to my page (the part where it says: < a href=”’/users/Matsi883 > and then < /a >) [EDIT: Disregard this part. The name I chose to screenshot is the first name on my page, next to where it says --(S)Liver of a Good Life. It doesn’t link to my page there.], but the other part is the name color, which also appears on my page. That begins with < span style=. What goes behind the equals is everything you have to put in, and what T/O inputs as the attributes for your name.

The Code

Color

The first thing you add is color, using either the hexadecimal for the color (a full list of hexadecimals can be found here) the color name (here’s that list), or RGB color values (no link to that, just play around). Here are the three different ways to do it.

Another attribute you can use is background. I put this here because it also uses a color value. It will surround you name in a color. Headers13 is the only active user I know of who uses background in his name, but it’s another attribute you can use.

EDIT: (Hopefully) due to this article, I see a lot more names with background colors. Yay, me.

Shadows

The next thing you might want to do is add shadow. The element you will use to add shadow is the text-shadow: attribute. You will first need the color (hexadecimal and English names), but then you will need the shadow. The shadow works in three instances of a number and then px. So, using X, Y, and Z as my numbers it would look like: text-shadow: COLOR Xpx Ypx Zpx.[EDIT: The actual way is text-shadow: Xpx Ypx Zpx COLOR. Also, Z is optional.] What do the three numbers mean? X (in this case) means how high it will be. So if X= is 10, then the shadow would appear 10 pixels farther to the right than the actual word, whereas X is -10, the shadow would appear 10 pixels farther to the left than the actual word. Y stands for how high the shadow is. If Y is 10, the shadow will be 10 pixels higher than the actual word, whereas if Y is -10, the shadow will be 10 pixels lower than the actual word. Z stands for how thick the shadow is. As Z gets bigger, so does the shadow.

EDIT: The forum page, upgraded-users-do-you-want-to-make-your-username-better had to do with multiple shadows, so I'll put that here. Basically, you separate the shadows with a comma, so a line with multiple shadows will look like text-shadow: Xpx Ypx COLOR, Xpx Ypx COLOR, and so on...

Fonts

The next thing you can do is change the font family. Keep in mind that after the color attribute, anything can be used interchangeably, but I do it in the way I’ve found them out, and I’ll order the possible attributes in this article the way it the way it appears in my username. You can use any web-safe font in the name, and here are all the web-safe fonts. You can use spaces when naming the font.

Sizes

Next, we are able to change the font size. You can do that in one of two ways: with values and with percents.

Weights

Next, we change the thickness of your name. Font-weight has 12 properties we care about: 100, 200, 300, 400, 500, 600, 700, 800, 900, lighter, bold, and bolder. 100 is will turn out the lightest font, and 900 is the heaviest. A weight of 700 is the same weight as bold and the default weight is 400. The exact syntax is font-weight: XXXpx;

Small Caps

The next property you can use is font-variant. There is one value, and it is small-caps, to make your name be small caps. Nobody I know of uses this, so we’re going to pretty much skip this. The exact syntax is font-variant: small-caps;

Italics

To make your name in italics, you use the font-style property. There are two properties we care about: italic and oblique, which is pretty much the same. The main difference is that the italic font is a new typeface, whereas oblique styles are the distorted version of the normal typeface, but they mostly look the same. The exact syntax is: font-style: italic;

Lines

The last property I’m going to go over is the text-decoration property. This has four attributes: none, underline, overline, and line-through. They do pretty much what they say they do: a line under, over, or through; or no line at all. The exact syntax is text-decoration: none;

Cases

Another property you can use to modify your name is the text-transform property, which has three properties: capitalize, uppercase, and lowercase. They do pretty much what they say; capitalize the first letter of every word, make the whole text in uppercase, or lowercase, respectively.

Review

A few things to know before I leave you

• Do not begin with the HTML tag span. It will have your name have random angle brackets and you don’t want that.
• Each property should end with a semicolon and a space. For example, an example syntax is “property: value; property: value;” where property is what you are modifying: the color, shadow, or size, and value is what you modify it to be: red, blue, or twice as big.
• As I was writing this article, I came across a post by miracleHat about customizing your name: upgraded-users-do-you-want-to-make-your-username-better. It has to do with his name and the shadows around it. Read it.
• The most important comment in that post was by NobodyPicksBulbasaur. It basically says: don’t overdo it. However cool your name is, it should still be legible (Skyfolk is a prime example of how not to make your name legible). Your name is how we know you, and turning it into blobs and squiggles isn’t going to help us know people know you.
• Also, don’t make the font size too big or Epochalyptik will intervene.
• If anybody has any other properties, please tell me, and I’ll add them in.
• My next article is going to be HTML T/O1, which is going to tell you what you need to know about HTML for this site.

Until we meet again,

Matsi883

Changelog

1. 7/17/14, 2:30 PM: Added edit on shadows, text-transform property, changelog.
2. 8/13/14, 11:15 AM: Added info on multiple shadows.