BIONICLEsector01:Help/Advanced Wiki-Coding

Help

Return to BS01 Help

Advanced Wiki-Coding

What is Advanced Wiki-Coding?

Advanced wiki-coding is wiki-coding which is usually more complex then normal Wiki-coding, and is mainly restricted to templates, major pages or userpages.

Email Link

There are several protocols that are used on the web. Some examples are http, https, and ftp. There is in fact a protocol for email: mailto. To create an email link, simply use the same code as you would for an external link except with a mailto protocol.
[mailto:boo@gmail.com Email Me]
The above is a basic email link. When someone clicks on it, their default email program (ex. Outlook Express, Mozilla Thunderbird, etc) or email service (ex. Gmail) will create a new email with the "To" line already filled in. It is also possible to fill in the "Subject" and "Message" boxes as well. To fill in the "Subject" line, add this after the email address: ?subject=. Add the subject and the code should look like this:
[mailto:boo@gmail.com?subject=Hello Email Me]
This would create a new message with a "To" line of boo@gmail.com with a "Subject" line of 'Hello'.
It is also possible, as stated above, to preload text in the "Message" box. We add this line to it: &body=. Our code would then look something like this:
[mailto:boo@gmail.com?subject=Hello&body=Message Email Me]
Please note that any spaces in the subject or the message must be replaced by %20 otherwise the code will not work.

Warning:
This will make your email address susceptible to bots which scan the internet for email addresses. If you don't want to take a chance, don't use an email link! If you still want to let people email you, you shouldn't simply write your email as boo[at]gmail[dot]com since, unfortunately, there are real people hired to scour the internet manually for email addresses. The only way to remain safe from spam but still allow people to publicly email you is to use a service similar to Anonomi which prevent spam bots and employees from getting your email address.

#switch Function

The "#switch" function is a Wiki function which allows the coder to store multiple versions of a template in one go, and can then "switch" to these versions by inserting or changing various variables. In this tutorial, we will learn about how to use the #switch function through images.

The beginning of a basic "#switch" function coding looks like the following:

{{#switch: {{{1}}}|

For the purpose of the tutorial, we'll stick with the coding above as our base.

In this tutorial, we'll make a "#switch" template with two images, named "Image 1" and "Image 2", with "Image 1" being the default image which will show up when the template is not used.

To start, we add in "Image 1":

{{#switch: {{{1}}}| Image 1=[[Image:Noimage.jpg]]|

The "Image 1=" defines the name of the variable, and the content ("Image:Noimage.jpg") defines what will appear when the variable is activated. The pipe ("|"), as normal, ends the variable tag.

We can now add in "Image 2" using the same method:

{{#switch: {{{1}}}| Image 1=[[Image:Noimage.jpg]]| Image 2=[[Image:Sandbox Header.PNG]]|

As seen above, the "Image 2" variable is located beneath the "Image 1" variable. This is not compulsory, but helps to prevent confusion in some cases.

Now to finish off the template, we add in the final, "default" variable:

{{#switch: {{{1}}}| Image 1=[[Image:Noimage.jpg]]| Image 2=[[Image:Sandbox Header.PNG]]| #default=[[Image:Noimage.jpg]]}}

...which will set "Image 1" as the image which will appear when the template is not being used.

There are also many other ways to manipulate this function and use it for a variety of purposes. For example, a variable can be named differently, and {{#switch: {{{1}}}| can be altered so the template will only work for certain, assigned words. Although these uses are not taught nor included in this tutorial, you can always ask around for experienced Wiki-coders who can help you. If you're at loss as to who you should ask, you can always direct your search towards a PR staff, a person holding a Badge of Trust level 8 or above, or simply ask around the Wiki for members who can help you.

Magic Words

MagicWords are small codes that turn into page-specific words, time-specific words, or BS01 specific words/numbers before the page is parsed, meaning they can be used for actual words or for switches, links, and images as well.

MagicWords generally are in all capitals with two curly brackets on each side or in rare cases, two underscores on each side. They aren't confused with templates because the Wiki has the ability to tell the difference.

Here is a list of common MagicWords:

MagicWord	Description	Preview
Page-Specific MagicWords
`{{PAGENAME}}`	Inserts the page name including the subpage name without the namespace.	Help/Advanced Wiki-Coding
`{{FULLPAGENAME}}`	Inserts the page name, namespace, and subpage name.	BIONICLEsector01:Help/Advanced Wiki-Coding
`{{BASEPAGENAME}}`	Inserts only the page name without the namespace or the subpage name.	Help Please note that, in this instance, /Advanced Wiki-Coding is not a subpage, it is part of the page's name.
`{{NAMESPACE}}`	Inserts the page's name space.	BIONICLEsector01
BS01-Specific Words/Numbers
`{{SERVER}}`	Inserts the top level domain (TLD).	https://biosector01.com
`{{NUMBEROFPAGES}}`	Inserts the total number of pages on BS01.	22,511
`{{NUMBEROFARTICLES}}`	Inserts the total number of pages in the main namespace.	1,504
`{{NUMBEROFUSERS}}`	Inserts the total number of BS01 members.	1,758
Time-Specific Words
`{{CURRENTYEAR}}`	Inserts the current year.	2024
`{{CURRENTMONTH}}`	Inserts the number of the current month.	11
`{{CURRENTMONTHNAME}}`	Inserts the name of the current month.	November
`{{CURRENTDAY}}`	Inserts the number of the current day (with regards to the current month).	4
`{{CURRENTDOW}}`	Inserts the number of the current day (with regards to the current week). 0=Sunday; 1=Monday; 2=Tuesday, etc.	1
`{{CURRENTDAYNAME}}`	Inserts the name of the current day.	Monday
`{{CURRENTHOUR}}`	Inserts the current hour (In 24-hour format)	03
`{{CURRENTTIME}}`	Inserts the current hour with minutes (24-hour format)	03:29
Table of Contents
`__TOC__`	Inserts a table of contents wherever the code is placed (overrides `__NOTOC__`).	Contents 1 What is Advanced Wiki-Coding? 2 Email Link 3 #switch Function 4 Magic Words 5 Math (#expr Function) 6 Everything you need to know about DIV and SPAN 7 Further Assistance
`__NOTOC__`	Hides the table of contents (if `__TOC__` is used, `__NOTOC__` is overridden).

{{PAGENAME}}, {{BASEPAGENAME}}, and {{FULLPAGENAME}}, when used for links, must have a capital 'E' added to the end like this:
{{PAGENAMEE}}, {{BASEPAGENAMEE}}, and {{FULLPAGENAMEE}}.
To use a MagicWord with a link, you must use an external link. Simply insert the magic word where the page name would be.
[{{SERVER}}/wiki/index.php/{{FULLPAGENAMEE}} A Link To This Page]
produces:
A Link To This Page

To use a MagicWord with a switch, it is not necessary to add a capital 'E.'
{{#switch: {{BASEPAGENAME}}| Help/Advanced Wiki-Coding=1| Sidorak=2| #default=3|}}
produces:
3
If you wanted to make a code to display a message every Friday, the coding would look something like this:
{{#switch: {{CURRENTDOW}}| 5=I love Fridays!| #default=It's not Friday yet.|}}
producing:
It's not Friday yet.
If you wanted it to count down to Friday, read on to learn how to use math with BS01.

Math (#expr Function)

The #expr function acts like a calculator, completing an equation and inserting the result before the page is parsed, meaning it can be used for links and switches like a MagicWord.

All basic operators will work in an equation, including (but not limited to) +, -, /, *, and ^ as well as <, >, and = .
If you wished to make a countdown until Friday, you would subtract the current day's number of the week from 5 (Friday's number):

{{#expr: 5-{{CURRENTDOW}}}}

producing:
4 (Since today is Monday and 5-1=4)
The problem is, if it's Saturday, the result will be -1 and Sunday will be -2, so you need to use a switch to change -1 to 6 and 2- to 5.
Now the coding looks like this:

{{#switch: {{#expr: 5-{{CURRENTDOW}}}}
|-1=6
|-2=5
|#default={{#expr: 5-{{CURRENTDOW}}}}
}}

producing:
4
Now, we wanted a message to be displayed on Friday and a countdown for every other day, so we need to add a value for 0 (5-5=0) and a message to -1 and -2 as well #default

{{#switch: {{#expr: 5-{{CURRENTDOW}}}}
|-1=There's still 6 more day(s) until Friday.
|-2=There's still 5 more day(s) until Friday.
|0=Yay, it's Friday!
|#default=There's still {{#expr: 5-{{CURRENTDOW}}}} more day(s) until Friday.
}}

producing:
There's still 4 more day(s) until Friday.

If you wanted to put your age on your UP but don't want to edit it every year, you can use math and switches to automatically write your age. To start off, you would subtract your birthday from the current year. If you were born in 1993, it would look like this:

{{#expr: {{CURRENTYEAR}}-1993}}</nowiki>

That would produce this:
31 (Since 2024-1993=31)
Now, the problem is, that only works in the days after your birthday, not the days before. So to fix this, we use a switch to determine the current month. If you were born in July, you'd need a switch to detect what the current month is and change the result if it's after July. The switch would look something like this:

{{#switch: {{#expr: {{CURRENTMONTH}}>=7}}
|1={{#expr: {{CURRENTYEAR}}-1993}}
|0={{#expr: {{CURRENTYEAR}}-1994}}
}}

The first line basically checks if the current month is after (greater than or equal to) July (7). If it is, the answer is true (1) and if it isn't, the answer is false (0). If the answer is false, the answer needs to be one number larger so we could either add one to the true (1) answer or just add one to our birthday (which is what we did). Since November occurs after July and 2024-1993=31, the code produces this:
31
Now, it will show your age and update itself without you having to do anything!

For those who are REALLY picky and want it to show their birthday exactly (according to the date, not the time) can use the code below which uses the same idea but adds to it. This code would be for someone who was born on August (8) 9th (9), 1993.

{{#switch: {{#expr: {{CURRENTMONTH}}<8}}
|1={{#expr: {{CURRENTYEAR}}-1994}}
|0={{#switch: {{CURRENTMONTH}}
|#default={{#expr: {{CURRENTYEAR}}-1993}}
|8={{#switch: {{#expr: {{CURRENTDAY}}>=9}}
|1={{#expr: {{CURRENTYEAR}}-1993}}
|0={{#expr: {{CURRENTYEAR}}-1994}}
}}
}}
}}

Everything you need to know about DIV and SPAN

Probably the most useful HTML tag is <div>. "div" is short for divider though it's purpose is nothing of the sort. A <div> tag can be used to apply CSS (Cascading Style Sheets) to a specific section of a page. It can be as simple as a background color or text alignment to as complicated as an absolute position. <span> is pretty much the same thing, but less recommended. The most useful purpose of the <span> tag is to hide the icon next to external links.
style
An attribute is basically something inside of a tag that appears in this format: <tag attribute="stuff"></tag>. The style attribute is the most important. You are able to put any CSS inside of it. Below is a chart of CSS properties to place inside the style attribute.

Property	Usage		Example
background-color	Applies a background color to the entire div.		<div style="background-color: #FFFFFF;"></div>
border	Applies a border to the entire div. Add the color, followed by the design, followed by the size.		<div style="border: black solid 1px;"></div>
color	Applies a color to the font.		<div style="color: blue;"></div>
height	The height of the div. Either use a pixel amount, or to make it auto-fit to the content, use `auto`.		<div style="height: 100px;"></div>
overflow	To hide anything that doesn't fit, use `hidden`. To show anything that doesn't fit, use `show`. To use scrollbars to fit everything inside, use `auto`		<div style="overflow: auto;"></div>
width	The width of the div. Either use a pixel amount, or to make it auto=fit to the content, use `auto`.		<div style="width: 200px;"></div>
opacity & filter: alpha(opacity=)	Changes the opacity of the `div` or `span`. It is a numerical value ranging from 0.0 (transparent) to 1.0 (opaque). In order for opacity to work for IE users, the filter property must be used as well. It is a numerical value ranging from 0 (transparent) to 100 (opaque). To convert `opacity` values to `filter` values, multiply by 100. To convert `filter` values to `opacity` values, divide by 100.		<div style="opacity: 0.5; filter: alpha(opacity=50);"></div>
Position
position	There are several options for this: relative, absolute, fixed, and static. Relative allows one to specify where to move the div from its current position. Absolute lets one specify where the div is to be placed no matter what. Fixed specifies a location on the screen that never changes, even if the visitor scrolls. Static is the default and it disables top/bottom/left/right. Below is a comparison of top/bottom and left/right as they apply to relative positioning and absolute positioninf.		<div style="position: absolute;"></div>
top/bottom	Pixels can be used for definite positions. If you need it to change depending on screen resolutions, use a percentage instead of pixels.		<div style="position: foo; top: 5px;"></div> <div style="position: foo; top: 5%;"></div>
top/bottom	Absolute Dictates how far away from the top/bottom the div should be.	Relative Dictates how much the div should move up/down.
left/right	Pixels can be used for definite positions. If you need it to change depending on screen resolutions, use a percentage instead of pixels.		<div style="position: foo; left: 5px;"></div> <div style="position: foo; left: 5%;"></div>
left/right	Absolute Dictates how far away from the left/right the div should be.	Relative Dictates how much the div should move left/right.
z-index	How far above or below the div should be. -1 is below normal page content and 1 is above normal page content. From there, you make some divs above/below other ones by using higher/lower numbers.		<div style="z-index: 1;"></div>

So if you wanted a message to appear at the top left of a page in a blue box, you might use the following:
<div style="background-color: blue; position: absolute; top: 10px; left: 10px;">Boo</div>
More about div and span
To align text using a div, simply use the align attribute like so: <div align="right"></div>.

To remove the icon next to an external link, use the following code: <span class="plainlinks"></span>.

And that's everything you need to know about div and span.

Further Assistance

Members with the following badges will be able to assist you. To see the list of members, simply click on the image and scroll down to the list at the bottom of the page.