How To: Coding

User avatar
Willoria
Posts: 12128
Joined: Fri Jul 31, 2009 8:00 pm
Location: Dancing with his Demons
User flair: Heart of Gold, Encased in Stone.
Contact:

How To: Coding

Post by Willoria » Tue Mar 06, 2018 4:42 pm

Coding is a fairly important part of the site, at least a very basic knowledge of it. But as someone who has done forum based rping for over ten years, I know it can be hard to get used to different types of coding when you change forums and types. It can be confusing, and hard to navigate, even when you're handed a coded form and told to just fill in the 'blanks'. I am going to try and help you to learn the way the bbcode works here. If it raises any questions, feel free to pm me and I'll do my best to answer them or update this How-To accordingly.

Before I start in, so I don't confuse you, you'll see me refer to coding pieces as 'tags' pretty often. I use it to describe pieces of the coding. This will start to make more sense as you read through this how-to. The number one thing you need to remember as you go through and do coding is the simple fact that when you start something, you have to end it. As part of this every thing has a way to start and to end the code, you'll see this more as I continue on.


Changes to TextPost OrganizationEasy Navigation
Bold Text
Italics Text
Underline Text
Color Text
Text Font
Change Text Size
Text Orientation
Lists
Quote Boxes
Tables
Image Display
Linking
Spoilers
Anchors & Go-To's
Last edited by Willoria on Sun Oct 20, 2019 10:51 pm, edited 6 times in total.
The Tales of the Aes Sedai Fukusha Reina - Iwagakure No Sato - Jounin - #EF2B2D Atsushi Cho - Tea Country - D Rank Samurai - #A34402 Hanzo - Sunagakure No Sato - Genin - #35C4AF

User avatar
Willoria
Posts: 12128
Joined: Fri Jul 31, 2009 8:00 pm
Location: Dancing with his Demons
User flair: Heart of Gold, Encased in Stone.
Contact:

How To: Coding

Post by Willoria » Sun Oct 20, 2019 8:54 pm

Much like when you're typing on a Word document, or similar Word Processing Program, the thing you'll do the most often is manipulate your text. This is anything from making it bold, making it bigger, changing the font, changing the color, and so many other things. It also happens to be one of the easiest things to do with coding. As stated before, the number one thing you must always remember though, is if you start something, make sure you end it.



If you want your text to appear bold, like this, then what you need to type out is:
[b]like this[/b]

The key thing to remember here is that [b] must be followed eventually by [/b]. The first starts the code's effect, and the second ends it. If you forget the last one, your text will just continue being bold with no end.



If you want your text to appear italics, like this, then what you need to type out is:
[i]like this[/i]

The key thing to remember here is that [i] must be followed eventually by [/i]. The first starts the code's effect, and the second ends it. If you forget the last one, your text will just continue being italics with no end.



If you want your text to appear underlined, like this, then what you need to type out is:
[u]like this[/u]

The key thing to remember here is that [u] must be followed eventually by [/u]. The first starts the code's effect, and the second ends it. If you forget the last one, your text will just continue being underlined with no end.



If you want your text to appear a specific color, like this, then what you need to type out is:
[color=#5E99AA]like this[/color]

Now this one is a little different than before. You can clearly see where the coding starts, [color=#5E99AA], and where the coding ends, [/color]. But where the coding starts you also have a part where you need to define the code. When doing a color you have to chose a color and '#5E99AA' is the color chosen.

For an entire list of available colors, and their corresponding codes, please see this post.



If you want your text to appear a specific font, like this, then what you need to type out is:
[font=Cursive]like this[/font]

Now this one is a little different than before. You can clearly see where the coding starts, [font=Cursive], and where the coding ends, [/font]. But where the coding starts you also have a part where you need to define the code. When doing a font you have to chose a font and 'Cursive' is the font chosen.

For an entire list of available fonts, and their corresponding codes, please see this post.



Changing text size is relatively simple. If you want your text bigger, then what you need to type out is:
[big]your text bigger[/big]

The more you use [big], the bigger the words get.

Such as: This = [big][big]This[/big][/big]
And: That = [big][big][big]That[/big][/big][/big]

Much like the other codes you can plainly see the part where the coding starts and where the coding ends. Don't forget, in coding if you start something, don't forget to end it.

Similarly, you can make your text smaller if you wish, to do so what you need to type out is:
[small]your text smaller[/small]

Just like with the [big] code, you can use the [small] more than once to increase its effect. Of course with small, there's going to get to be a point where you just can't read it.



Setting up your text orientation is probably one of the simplest tasks to do in the BBcoding options. When you're typing up a post your text is going to automatically be oriented to the left of the post. If you want it centered, you use a [center] tag. If you want it oriented to the right, you use a [right] tag. Like other codes you need to end the code as well.
Centered Text is written as [center]Centered Text[/center].
Right-Side Text is written as [right]Right-Side Text[/right].

As always, don't forget to end a code that you've started.
The Tales of the Aes Sedai Fukusha Reina - Iwagakure No Sato - Jounin - #EF2B2D Atsushi Cho - Tea Country - D Rank Samurai - #A34402 Hanzo - Sunagakure No Sato - Genin - #35C4AF

User avatar
Willoria
Posts: 12128
Joined: Fri Jul 31, 2009 8:00 pm
Location: Dancing with his Demons
User flair: Heart of Gold, Encased in Stone.
Contact:

How To: Coding

Post by Willoria » Sun Oct 20, 2019 10:43 pm


In the last post I covered a series of basic codes. In this post I'll be covering some tools that are often used as ways of organizing your posts or your character sheets. Much of these codes you've likely already seen in the character sheet example formats, and if those formats have given you any confusion hopefully this will help to better explain it.



There are many times you might uses lists in your posts. It's seen most commonly on various applications for lists of stats, equipment, or similar items. It can also be seen in jutsu when stats or effects may need to be listed. Now this is how the list may appear:
  • Option One
  • Option Two
  • Option Three
But the way it is coded looks like this:
[list][*]Option One[*]Option Two[*]Option Three[/list]

Or it can also look like this:
[list][*]Option One
[*]Option Two
[*]Option Three[/list]

This coding is a bit more complicated than others simply because it has at least three elements to it. It has the starting tag of [list] and it has the ending tag of [/list]. But in addition it has in the middle the [*]. This middle item simple translates into the dot in the list. If you'd rather a numbered list you can change the starting code to [list=1] and it'll number the options for you instead and look like this:
  1. Option One
  2. Option Two
  3. Option Three
As with all things, don't forget that if you start something, you have to end it as well.



Quotes are usually assumed to just be quotes of what someone has said, but quote boxes have a surprising amount of uses. They can be used to quote techniques in a post (so can spoilers which will be mentioned later), they can be used to organize character sheets as well, to separate one thing from an entire paragraph.
Quote:
Here is what a quote box looks like.
A simple quote box is what you see above, to code it, it is literally a start and end and looks like this:
[quote]Here is what a quote box looks like.[/quote]

You can also label a quote box.
Naruto:
Here is a quote box with a name.
In order to give a quote box a name such as above, the coding simply looks like this:
[quote=Naruto]Here is a quote box with a name.[/quote]



Now tables are where things can get a little complicated. There are several elements to a table that can go wrong. When setting up a table you need to know how many cells (downward separation) you want in it, if you want to title it, and if you want a title line to label each cell with. If that confused you, then you might agree with me, this is where it can get a little complicated. To start with, here is what a table might look like:

Sample Table
Label OneLabel Two
Sample ContentSample Content
The complete coding for this is: [table=2, Sample Table, 1]Label One[c]Label Two[c]Sample Content[c]Sample Content[/table]

Now to break it down, table=2 tells you how many cells you want. 'Sample Table' is the table title. And the '1' shows that you want one label line. Now bear with me, because that is just the starting code to this table. To follow up with something simple, to end the coding you simply need the [/table] line. In order to separate cells we use the [c] coding. Within these cells you can use color changes, font changes, bold, italics, centers, anything you really like.

But remember, using all those combined is where even I get myself in trouble. Finding the error in a complicated code can feel impossible. Be patient, if you have an issue just look at it one piece at a time and remember... if you start a code, you must end it.

One last note on tables. Between [c] codes you need to have both the start and the end of your other codes. If you want three cells side by side of the same text color, they won't carry from one cell into the next without creating errors.

And on a note personal to our current site and hosting site for NSRP... some people like to organize their character sheets with a single cell table, making the starting code a [table=1]. Sadly this will not work here and will just present with a serious error. This is an issue the owner of our site is aware of but so far no resolution has been found.




Now back to something relatively simple, how to display an image using BBcoding. Displaying an image is just as simple as bolding text. It has a start code and an end code, only in this case you're going to put a link to an image in the middle of them in order to display it. For an example I'll use one of my own custom avatar images I used some time ago.



The above is coded as: [img]https://imgur.com/IjBgvG6.jpg[/img][/nocode

The coding of course starts with [nocode][img] and ends with [/img]. In the middle is the link to the image displayed above. As with all other codes, don't forget that whatever you start, you must also finish. Codes have a start, and have an end.




There may come a time where you want to link to a particular word or text. Again as an example I will use something of my own, one of my character sheet links to demonstrate how to link to text. When you link text it will look something like this:
Meiyo Souta

The coding that resulted in the above, looks like this: [url=https://www.narutosaigen.com/forums/viewtopic.php?f=87&t=8340527]Meiyo Souta[/url]

The starting coding is similar to using colors on text in that the start code has to define something. With color text we had to define the color, with links we have to define the destination. So the starting code is [url=Link] though Link would be replaced with the url or link that you want the text to lead to and the end would be [/url]. Between these two are the words you want the link to display as.

Naturally, remember to end any code you start to avoid errors.




Spoilers! They aren't just for movies anymore! Okay but joking aside, spoilers are a very simple mechanism that you also probably saw on the example character sheet formats. You can name them just like you can with quotes, or you can use them simply with just a start and an end. Below you can see an unnamed spoiler example:
SpoilerShow
Content
This is done with the following coding: [spoiler]Content[/spoiler]

If you wish to name your spoiler you can code it as: [spoiler=Bob]Content[/spoiler]
Which will cause it to display as the following:
BobShow
Content
As with every other section, just don't forget whatever coding you start, you also need to end in order to avoid errors.
The Tales of the Aes Sedai Fukusha Reina - Iwagakure No Sato - Jounin - #EF2B2D Atsushi Cho - Tea Country - D Rank Samurai - #A34402 Hanzo - Sunagakure No Sato - Genin - #35C4AF

User avatar
Willoria
Posts: 12128
Joined: Fri Jul 31, 2009 8:00 pm
Location: Dancing with his Demons
User flair: Heart of Gold, Encased in Stone.
Contact:

How To: Coding

Post by Willoria » Sun Oct 20, 2019 11:01 pm


Some codes may make navigation much easier. When combined with others they can begin to get complicated, but that is true of any code. These particular sets of codes make navigating apps easier, or make communication with mods and other members simpler even.




Now for the most part I have focused on single codes in these sections, but this is technically two codes I'm going to brief you on now. These two codes go hand in hand so you may understand why I chose to talk about these together. Now you may not realize it, but you've seen them working together already, on this very page. At the top in my table of contents, where you can click on an item and it takes you to that part of the page? That isn't a traditional link but rather is a Go-To link, paired with an anchor.

An anchor may appear like this: [anchor]Word234[/anchor]

That is just the coding though, on an actual sheet and in use the anchor will be invisible. But a go-to link will take you straight to this item, wherever you put it on a post. Like all others it has a start and finish, with [anchor] as the start and [/anchor] as the end. In the middle is a unique combination of words, a code in a sense. This combination must be unique on that page otherwise the anchor may not work properly.

A go-to link may be coded as: [goto=Word234]Words[/goto]

Now that will simply appear as: Words

This looks like a link, and function like one save for the fact that instead of opening a new window it would move you to another part of the page (if it was linked to an anchor, and I have not hidden one on this page for this example).

Personally I love these paired codings for easy navigation over a larger character sheet.
The Tales of the Aes Sedai Fukusha Reina - Iwagakure No Sato - Jounin - #EF2B2D Atsushi Cho - Tea Country - D Rank Samurai - #A34402 Hanzo - Sunagakure No Sato - Genin - #35C4AF

REPLY

Return to “Member Section”

×