| abstract
| - What you will need to understand: basic float property understanding, how to write out border names, what margin and padding are, how hexadecimal color values work, how color names work, how to use variables, how to user <includeonly></includeonly> and <noinclude></noinclude> tags, and how to clear out float property. What is preferred you learn (on top of that): how to change font size and line height, how to crop and image using Template:Side crop, what basic tags (such as and <br>) are used for. What we want you to achieve: By the end of this tutorial, we want for you to be able to make your own userbox. Notice: The tutorial is made for absolute beginners. If you have experience, it will also be helpful, but may seem quite slow. To begin our tutorial, we are going to look at the current code for Aang's userbox. (Please note that the <pre></pre> tags in the coding were removed. They just make the yellow box around the text.) {| cellspacing="0" style="width:238px; background:#FFFFE0" | style="background:#FF8C00" | {{Side crop|height=38|width=50|position=-5|left=-10|image=Aang at Jasmine Dragon.png|size=60|link=Aang}} | style="font-size:8pt;padding:4pt;line-height:1.25em;" | This user {{{1}}} [[Aang]] {{{2}}}. |} {{clear}} == Usage == Type and replace "opinion" and "reason" with your opinion and reasons for that opinion about the character. {{User Aang|opinion|reason}} For example: {{User Aang|likes|because he is powerful}} [[Category:Character userboxes|Aang]] Don't be frightened, as only the first six lines of that code make the userbox. It begins with the tag on the first line and edits with it on the sixth line. The <div></div> tags separate the userbox from its documentation, or an explanation on how it should be used. The <div></div> tags also force a line break, so that there is also visual separation. As you have probably already noticed the is not by itself; it is follow by a strange style="float: left; border: solid darkorange 1px; margin: 1px;">. This defines how the box should look: style=" " is used to mark-up the code that makes the box look the way it does. float: left insures that that the box floats left. All userboxes are tagged like that. It is also possible that it floats right, but there is no such thing as float: center. border is the property that defines the border around the box. I would suggest writing it out as such: <i>width type color</i>. So an example of a border code written out like that would be 1px solid black. The color can also be written in its hexadecimal value, #000000, or just #000, as both values of the amount of red, green, and blue are equal. That may sound confusion, so I would suggest writing out the full, six-digit/six-letter code, as it insures you get it right. Just note that you shouldn't leave spaces between the letters/numbers, as it will not be understood correctly. (#00 00 00 will not be understood.) To get the colors' values, see here. Borders' sides can also be specified one by one (so they can practically use different colors); to do so, write border-<i>side</i> (top, bottom, left, right). However, if you are new to this, I do not suggest it. margin is the space between the very outside of the box and the edges of the page. It, too, can be defined separately — margin-<i>side</i> (top, bottom, left, right) — but it is fine if you just use the plain margin which, by the way, defines all four sides. The column (:) is used between the property and the amount, etc. So it should look as such: property:look. You may choose to leave a space between the column and the look part, but it is your choice (I personally don't). The semi-column (;) separates the different properties from each other; however, if you are using just one property, is incorrect HTML5 to put a semi-column after it. (So it's incorrect to have ). If you are listing multiple properties, the last one may or may not have a semi-column after it. You can leave spaces between the semi-column and the next property; it is purely your choice. Moving on, next comes a Wiki table. The first property you see there, cellspacing="0". I would suggest you leave that as it is, since userboxes are formatted to have it that way. Looking at the next markup, we see style=" " again. This time, however, it defines two different properties: width — the width of the userbox. Most userboxes are 238px wide. background — defines the background color of the userbox. I would suggest you write background-color instead, as it simplifies things. Moving on to the next line, we see style=" " again. We also see background. However, if you look at the two codes, they are different. The line we are on defines the background color of the space beneath the image, and it is a different color that they one of the rest of the userbox. What follows is {{Side crop|...}}. When something is placed in two curly parenthesis, it is a template or a magic word. In this case, we are using a template that crops the image. If you want to learn how to do it, please see here. Otherwise, you can just put the image itself. The third line's style=" " defines the style of the text. font-size is (obviously) the size of the font. padding is the space between the text and the text and the, in this case, image and borders. You might have noticed that it is written in pt not in px. That is just another unit of measurement. I suggest you get familiar with one and use it, since then you might be able to predict how it might look. line-height is the height between the lines of text. This time, it is specified using em. The same applies to at as with pt. For those interested, an em is equivalent to 1/72 of an inch. After that code follows a | and comes the text. However, there is something strange about it. Instead of it being complete, it has a {{{1}}} and a {{{2}}}. These are variables. They are defined by the user when they use the userbox. That allows them to give their opinions. Practically, you can name the variable anything, but I suggest you leave them as such, as it would be much easier for the template to be pasted correctly. The finally follows a closing tag, ending the userbox. After it, there are <noinclude></noinclude> tags. That means the following text will not be included when the template is pasted. It is, however, visible on the page. They are the exact oppose it of the tags, as they are always pasted when the template is pasted on the page, but they do not appear on the template page. If you do not put any tags, the userbox will appear on the page and on the page where it is pasted. The last part that follows is the documentation. You can just use the documentation on Aang's userbox, as this is the one we usually use. Don't forget to change the names in the examples, though! To add onto that, please be careful that you add the category correctly. If you are making a userbox for yourself, save it in your userspace, and do not add any categories. Hope this helps! For more questions, contact me here or request help. This tutorial was made on June 16, 2012 and is part of the Coding Companion tutorial collection
|
![[RDF Data]](/fct/images/sw-rdf-blue.png)