FANDOM


Heya, it's Hollywhisker!

Recently, there has been quite a lot of new users joining the wiki, so I decided to help you guys on how to code your own signature! I hope this makes sense for you guys, as I'm not the best at explaining things, but if you have any questions about coding, feel free to ask me!

Beginning

First, you have to create a subpage. A subpage is a branch of your userpage. So, while making a sig, you would name your page User:{{{1}}}/Sig. This page is where you will put all of your coding for your siggie!

Note: Make sure to always code in source mode! Typing in visual mode does work depending on your code, but source mode is always the easiest option. I recommend editing in Classic Editor, which you can access by clicking the arrow next to "EDIT," and click "Classic Editor" in the dropdown menu. Classic Editor's source mode color codes everything automatically which helps you code easier, and also gives you a preview option so you can see what the code looks like before you publish the edits!

The Basics

How wikitext code works

Wikitext code is the type of code that we use on wikis such as this one, which is very similar to HTML/CSS.

Most code in wikitext look the similar, with the code replaced by the actual code, and text replaced by whatever text you want to be affected by that code:

<span style="code">text</span>

Links

Of course, siggies have to have links! Adding a link to your talk page helps other users easily tell who left them a message and respond to it. You can also add links to other fanfics/pages you've created in your sig c:

To add a link, just type these brackets ([[ ]]) around the page you're linking it to, and the text you want the link to be on, separated by a |. For example, if I want a link to my talk page on the text "hello," the code would look like this:

[[User talk:Hollywhisker|hello]]

Which would look like this:

hello

Combining code

To combine two different codes, just put them all together in between these (< >) and separate each code with a semicolon (;). At the end of the text, you just have to type one </span>. For example, if we wanted our previous "hello" text to be red and in the Georgia font (the code for color and font family are listed below), we would write:

[[User talk:Hollywhisker|<span style="color:red;font-family:georgia">hello</span>]]

Which would look like this:

hello

Note: While combining code isn't necessary, typing it separately can be tedious and easy to mess up the code. Instead, combining the code, like the above example, makes it much more organized and easier to work with.

Actual code

COLOR

If you want to change the color of your text, put in this code and replace COLOR NAME with whatever color you want:

<span style="color:COLOR NAME">text</span>

For example to make text red, this would be the code:

<span style="color:red">This text is red</span>

Which would turn out like this:

This text is red

Check out this page for a list of color names you can use in your code! You can also use a color code (hex, rgb, etc) instead for a wider spectrum of colors. Click here for a color picker tool you could use to get these codes!

BACKGROUND

You can add a background/highlight color to your sig.

Code (again, replace COLOR NAME with the actual color):

<span style="background-color:COLOR NAME">text</span>

For example, to make the text have an orange background, this would be the code:

<span style="background-color:orange;">This text's background is orange.</span>

Which would look like this:

This text's background is orange.

Again, you can use color codes instead of a color name. An easy tool for finding color codes is linked above in the color section.

FONT

You can change the font of the text in your sig.

Code, change FONT NAME to any font family. You can change it to any font (keep in mind some fonts aren't automatically installed on other people's devices. If the font isn't installed on your device, the text will show up in another auto-installed font):

<span style="font-family:FONT NAME">text</span>

Example with Impact font:

<span style="font-family:impact">This text is in Impact.</span>

Result:

This text is in Impact.

SIZE

Of course, you can change the text size:

Code, change NUMBER to the size you want. The pt is important! The higher the number is, the bigger your text will be:

<span style="font-size:NUMBERpt">text</span>

Example, with 48pt font size:

<span style="font-size:48pt">This text is 48pt.</span>

Result:

This text is 48pt.

BOLD, ITALICS, UNDERLINE, AND STRIKETHROUGH

BOLD: surround the text with 3 apostrophes on each side: '''text'''

ITALICS: surround the text with 2 apostrophes on each side: ''text''

UNDERLINE: put <u> in front of the text and </u> after it: <u>text</u>

STRIKETHROUGH: put <s> in front of the text and </s> after it: <s>text</s>

RAISE AND LOWER

raising text: put <sup> in front of the text and </sup> after it: <sup>text</sup>

lowering text: put <sub> in front of the text and </sub> after it: <sub>text</sub>

You can raise the text even higher or lower the text even lower if you want, just add even more <sup> </sup> or <sub> </sub> around the text, depending on if you want it more raised or lowered.

Note: Raising/lowering text makes the text smaller, so whenever you use it, make sure to type another font size code: <sup><span style="font-size:24pt">text</span></sup>

BORDER

You can also add borders to your text!

Code, replace NUMBER with the number of pixels you want the border thickness to be, TYPE with the type of border (solid, double, dashed, dotted, groove), and COLOR with the color name/code:

<span style="border:NUMBERpx TYPE COLOR;">text</span>

Example, a dotted blue border that is 5 pixels wide:

<span style="border:5px dotted blue;">This text has a dotted blue border.</span>

Result:

This text has a dotted blue border.

SHADOW

You can add shadow to your text in your sig!

Code, replace COLOR with color name/code, X with how much left/right you want to the shadow to be compared to the text (positive numbers are to the right, and negative to the left), Y with how much higher/lower you want the shadow to be (positive numbers are lower, negative is higher), and Z with how blurry/clear you want the shadow to be (the higher the number, the more blurry it is):

<span style="text-shadow:COLOR Xpx Ypx Zpx;">text</span>

Example, a red shadow that's 5px to the right of the text, 10px below the text, and 3px blurriness:

<span style="text-shadow: red 5px 10px 3px;">This text has red shadow.</span>

Result:

This text has red shadow.

Finishing your sig

1. After you're done coding your sig (remember, this all has to be on the subpage you made earlier!) click publish.

2. Go to your Preferences.

3. Scroll down until you see the Signature section. In the text box, type in {{SUBST:User:YOUR USERNAME/Sig}} (replacing YOUR USERNAME with your username. Under it, make sure to check "I want to use wikitext in my signature."

4. Try it out by leaving a message and signing it with the signature button at the top!

Done!

I hope this blog helped! If you have any questions, leave a comment or leave a message on my talk page! Good luck with making your signature!

~ Holly

you gave me a forever within the numbered days 01:32, December 20, 2019 (UTC)

Community content is available under CC-BY-SA unless otherwise noted.