Wikia

Star Wars Fanon

Star Wars Fanon:Userbox tutorial

Talk6
41,550pages on
this wiki
Blue i icon

This page is a Star Wars Fanon guide or help page.

It gives an in-depth explanation about its subject, such as a policy or Star Wars Fanon feature. Feel free to update the page as needed, but please use the discussion page to propose major changes.

This userbox tutorial aims to explain what userboxes are in brief, demonstrate how to use and organize userboxes found on Star Wars Fanon, and show a new user, or a user without knowledge of markup languages or wiki templates, how to create their own userbox.

What is a userbox?Edit

See also: Help:Userboxes

Userboxes are small templates (Wikia calls them "colored boxes") that are placed on user's pages. While there are a small collection of semi-official userboxes that the Star Wars Fanon community has put together for use by every user, userboxes are entirely customizable and easy to create. They are generally used to provide relevant or interesting information about a user that can be found in a single place on their userpage. Most userboxes are accompanied by images, although they do not have to be.

Preexisting userboxesEdit

Over the years, users have taken it upon themselves to create a large number of userboxes. As a result, hundreds of userboxes have already been created and are ready to use. The most popular userboxes can be found on the "Templates" page; a complete list of categorized and widely used userboxes can be found in the appropriate category.

When you find userboxes you like, simply copy and paste the name of the userbox, surrounded by braces, onto your userpage. For example, if you found a userbox called "Template:Test", you'd paste {{Test}} into your page. That would display:

TEST This is a Test Userbox.


Creating your own userboxesEdit

Creating your own userboxes using existing templates is very simple. Creating your own userboxes from scratch requires knowing a bit of HTML. This tutorial will explain the first way in detail and briefly touch on the second.

Using templatesEdit

This wiki has two templates for creating new userboxes. These templates can be found here and here. These two templates are essentially the same, and they can be used interchangeably with little issue. The most obvious difference is the first template generally displays black text, and the second displays white text. Keep this in mind when creating your userboxes.

The following code, using those two templates, can create any and all userboxes:

{{userbox (or userbox/2)|BGC1|BGC2|Primary Text|Secondary Text}}

Each segment of information is separated by a piped link ("|"). The first segment is the template being used. Next is the background color for the left side and the border color of the userbox, followed by the right side's color. The last two segments display the text on the left and right side, respectively.

For the sake of example, let's assume that you wanted to create a userbox that said you love Star Wars Fanon. This userbox will be blue on the left side and gray on the other. The code to create this userbox is {{userbox|blue|white|SWF|This user loves ''Star Wars'' Fanon!}}.

And, of course, the userbox would display:

SWF This user loves Star Wars Fanon!


You can also put an image on the left side of a userbox instead of just text. To do so, just insert an image link in the "Primary Text" field of the userbox's code. You can use any image you like, but keep in mind that userboxes are generally smaller than uploaded images, so you will have to reduce the size of the image. Going back to our example, that would look like {{userbox|blue|white|[[File:Wiki.png|75px]]|This user loves ''Star Wars'' Fanon!}}. The piped link following the image name is used to adjust its size. In this example, the image is about 75 pixels large, which is an appropriate size for most userboxes. Now, our example userbox looks like:

Wiki This user loves Star Wars Fanon!


As you can see, because blue was used as a background color, the image has a blue background. On some images, this is not or hardly noticeable.

Using HTMLEdit

The basic HTML code for new userboxes is as follows:

 <div class="userbox" style="float: left; border: 1px solid {BORDER}; margin: 1px">
 {| style="border-spacing: 1px; width: 238px; color: {TXT}; background: {BGC1}"
 |  style="width: 45px; height: 45px; background: {BGC2}; text-align: center; font-size: 12pt" |{FILE/TXT}
 |  style="font: 8pt/1.25em Arial,sans-serif; padding: 4pt;" |{MAIN TEXT}
 |}</div>
<noinclude>[[category:Userbox templates]]</noinclude>
<includeonly>[[category:{ADDED CAT}]]</includeonly>

Although you could technically adjust just about any part of the userbox, for the sake of this tutorial, only the mutable objects in braces will be discussed. All color options take either hexadecimal color codes or English color names.

  • {BORDER}: Alters the color of the border.
  • {TEXT}: Alters the text color.
  • {BGC1}: Alters the userbox's primary color.
  • {BGC2}: Alters the userbox's secondary color. Not always visible if an image is used.
  • {FILE/TXT}: The 'box'. This can contain either text or an image. As noted earlier, if an image is used, it should be reduced in size.
  • {MAIN TEXT}: The text that displays adjacent to the box.
  • {ADDED CAT}: Unlike [[category:Userbox templates]], which should be added to all created userboxes to properly categorize them, this is an optional category. When this category is added, the userbox will automatically put any pages it is placed on into said category. The category page would have to be created if it does not already exist. If you do not require additional categories, you can remove the entire line.

An example userbox would look like this (removable comments are in braces):

 <div class="userbox" style="float: left; border: 1px solid #000000 {"black"}; margin: 1px">
 {| style="width: 238px; color: #FFFFFF ("white"); background: #0000FF {"blue"}"
 |  style="width: 45px; height: 45px; background: #00FFFF {"cyan"}; text-align: center; font-size: 12pt" |Tutorial
 |  style="font: 8pt/1.25em Arial,sans-serif; padding: 4pt;" |A custom-made [[:Category:Userbox templates|userbox]] for {{PAGENAME}}.
 |}</div>
<noinclude>[[category:Userbox templates]]</noinclude>

This userbox would look like:

Tutorial A custom-made userbox for Userbox tutorial.


However you choose to make your userboxes, don't be afraid to play around with the options and experiment!

OrganizationEdit

The user infobox template provides a field that allows users to easily sort their userboxes. This is the most popular and by far the easiest way to organize userboxes so they all appear in one place.

If userboxes are not put in the infobox, they end up scattered and unorganized. To fix this, you can use a table to organize your userboxes.

 {| border="{SIZE}" style="margin: auto; width: 238px; padding:2px;" ! style="text-align: center; background:{BGC};"
 |{HEADER}
 |- 
 |{TEMPLATE}
 |-
 |}

A more minimalist approach would look like this.

 {|align={ALIGN} border="{SIZE}" ! style="border-spacing: 0px; text-align: center; background={BGC};"
 |
 |-
 |{TEMPLATE}
 |-
 |}

As before, you could very well edit all the features in the table, but this tutorial will highlight a few important ones.

  • {SIZE}: Alters the size of the border around the userboxes.
  • {BGC}: The background color of the table. Takes hexadecimal codes and English names for colors.
  • {HEADER}: Text that displays at the top of the table. It defaults black, so you have to change the text color to have a black table.
  • {TEMPLATE}: Userboxes go here. Each userbox must be separated by a piped link and a hyphen ("|-"), or else the userboxes will not display as intended.
  • {ALIGN}: Used to align the table's location on the page. "left", "right", and "center" are valid options here.

Some example tables have been provided below, followed by their respective code.

standard table
Wiki This user loves Star Wars Fanon!
Tutorial A custom-made userbox for Userbox tutorial.
SWF This user contributes to Star Wars Fanon.
4th This is the fourth userbox.
TEST This is a Test Userbox.
big border'd table
Wiki This user loves Star Wars Fanon!
Tutorial A custom-made userbox for Userbox tutorial.
SWF This user contributes to Star Wars Fanon.
4th This is the fourth userbox.
TEST This is a Test Userbox.
Wiki This user loves Star Wars Fanon!
Tutorial A custom-made userbox for Userbox tutorial.
SWF This user contributes to Star Wars Fanon.
4th This is the fourth userbox.
TEST This is a Test Userbox.
Wiki This user loves Star Wars Fanon!
Tutorial A custom-made userbox for Userbox tutorial.
SWF This user contributes to Star Wars Fanon.
4th This is the fourth userbox.
TEST This is a Test Userbox.


From left to right...

Table 1:

 {| border="1" style="margin: auto; width: 238px; padding:2px;" ! style="text-align: center; background:#FFFFFF;"
 | standard table
 |- 
 |{{userbox goes here}}
 |-
 |}

Table 2:

 {| border="10" style="margin: auto; width: 238px; padding:2px;" ! style="text-align: center; background:#FF0000;"
 | big border'd table
 |- 
 |{{userbox goes here}}
 |-
 |}

Table 3:

 {|align=right border="1" ! style="border-spacing: 0px; text-align: center; background=#000000;"
 |- 
 |{{userbox goes here}}
 |-
 |}

Table 4:

 {|
 |- 
 |{{userbox goes here}}
 |-
 |}

Around Wikia's network

Random Wiki