[Tutorial] BB Codes - F.A.Q.

3 Mar 2019, 23:44

This is a thread that will be used to list the various, interesting custom (and not so custom) BB codes this site offers in the form of a tutorial.

Code Tag

First and foremost you will notice that parts of my post show the code and some parts of my post do not. This is due to the [ code ] tag.

Code: Select all

[b]Happy[/b]

This is an interesting tool if you want to show off your code skill or if you want to make something easier for other users to copy and paste. An example of this might be an application.

[ code ]Name:
House:
Interests:[ /code ]

To make something look like the above you would nestle your code between two brakets that state "code" like below:

Code: Select all

[code][b]Name:[/b]
[b]House:[/b]
[b]Interests:[/b][ /code]

View Source

The View Source Option on the far right of your post bar is designated by the pair of brackets <>. When you click on this, you will see all of the code that has been used in your post. This is very useful when you have a complicated post that uses a lot of code and it is not showing up correctly or you are having a problem escaping some codes. For example you cannot seem to leave a bulleted list for whatever reason. If you use this option, then you can start typing after the final bracket of code and have some nice, clean, not-so-fancy text.

This is the "Game Master" account. Please do not owl this account, unless specified. This account is not moderated actively and therefore, you may not receive a response.

Contact a Head of House or the Headmaster if you need anything.

Solomon Lear

Headmaster of Hogwarts, I

9 069 19 894

4 Mar 2019, 00:46

Your Toolbar

B Bold

Code: Select all

[b]Bold[/b] 
[i]i[/i] [i]Italics[/i] [code][i]Italics[/i]

U Underline

Code: Select all

[u]Underline[/u]

S Strike

Code: Select all

[s]Strike[/s]

X2 Subscript

Code: Select all

[size=1]Subscript[/size]

X² ^Superscript

Code: Select all

[sup]Superscript[/sup]

Align Left

Code: Select all

[left]Align Left[/left]

Align Right

Code: Select all

[right]Align Right[/right]

Center Alignment

Code: Select all

[center]Center Alignment[/center]

Justified

Code: Select all

[justify]Justified[/justify]

Font Sizes

Your font size can be anywhere from Size 1 to Size 200. by using the following code:

Code: Select all

[size=1]Size 1[/size] to [size=200]Size 200[/size]

. Or you can use the drop down to pick from several options.

Font Colors

Font colors use the hex code system. You can also use color names as well.

Code: Select all

[color=#660000]Font[/color] [color=#783F04]colors[/color] [color=#274E13]use[/color] [color=#1C4587]the[/color] [color=#20124D]hex[/color][color=#20124D] code[/color] [color=#4C1130]system[/color]. [color=purple]You[/color] [color=grey]can[/color] [color=red]also[/color] [color=orange]use[/color] [color=pink]color[/color] [color=teal]names[/color] [color=green]as[/color] [color=saddlebrown]well[/color].

A great example resource for hex color numbers or hex color names would be a site such as THIS. You can also use the drop down menu above for a limited arrangement of easy to click and use color options as well.

Inserting an Image
Posting a picture can add interest to a post.

Code: Select all

[img]files/44ab6ad2df93bbeb.jpg[/img]

This is where you can also consider nesting certain codes. Remember to open and close codes in the same order you posted them. For instance, if I want to center align my picture, show a picture and have the picture clickable so that I could send a user that clicks the image to another part of the site i can do the following:

In the second picture, if you click it you will be sent to the library forum area.

Notice how I nest these codes:

Code: Select all

[center][url=https://www.hogwarts.io/viewforum.php?f=23][img]files/44ab6ad2df93bbeb.jpg[/img][/url][/center]

If you do it in the wrong order, it will not work.

There is something about ambition, how it not only propels you but also defines you.

Solomon Lear

Headmaster of Hogwarts, I

9 069 19 894

14 Apr 2019, 19:49

"Fancy" Table Making

The code for this is two separate things.

First you need to make a TABLE. The code for a table emulates that of the html code, except we have to use a custom BB code to replicate it. It sounds complicated but it is not. In reality it is more tedious than difficult.

Hottest Professors in Hogwarts	Professors that wish they were hot
Solomon Lear	Sebastián Cazarez Bonabé Bonet

This can be done by clicking on the TABLE icon next to "revelio." Tell the table how many columns and rows you desire and you will have something similar to this. You can also write out the code the long way.

Code: Select all

[table][tr][td]Hottest Professors in Hogwarts[/td]
[td]Professors that wish they were hot[/td][/tr]
[tr][td]Solomon Lear[/td]
[td]Sebastián Cazarez

Bonabé Bonet[/td][/tr][/table]

We use the tag table to designate the start and end of the table code. TR is what makes the lines. So the tag TR starts a line and then ends a line. This is also used in html code. TD designates the cell. You will notice I have TD around "Hottest Professors in Hogwarts" as a tag and then again around the next title. That creates the cells. The only problem with this is that I consider this to be quite bland. We can spice this up a bit with some extra coding.

Hottest Professors in Hogwarts	Professors that wish they were hot
Solomon Lear	Sebastián Cazarez Bonabé Bonet

You can add additional interest using quote boxes around the text like so for instance. To do this you simply use the quote tag around the words you wish to fill.

There is something about ambition, how it not only propels you but also defines you.

Solomon Lear

Headmaster of Hogwarts, I

9 069 19 894

18 Apr 2019, 17:28

Fonts

Not every font is supported by every browser and device. This has caused issues for players viewing pages on a mac that were written up by someone on a device that uses Windows or a user that is viewing the site on an android device. This is problematic for that reason because some fonts are difficult to read, other fonts just do not show up correctly on this site at all so what looks good on your device might not look good on someone else's device. It is for that reason the ability to post in -any- font was disabled on this site. However, the site does support four fonts that will show up consistently on all devices:

Default

That is the font that we are all looking at now. This font is the default all your posts will come in. You do not need to do anything special to make your post appear in this font.

Signature

The "signature font" is a font that resembles printed writing. It is still legible but you may want to be careful using it excessively because it is not as easy to read as the default option but it may add dimension to a post.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

To use the "signature font" you would place the following code around the words you wish to make in a particular font:

Code: Select all

[font=signature]This is where you place your words[/font]

Cursive

This has a bit more flourish and looks again like written word. This is harder to read than the signature font, however the "cursive font" has its uses as well. A handwritten document, a name at the end of a letter, etc. Again, I would caution against using excessively, cursive is an uncommon writing style and harder to read in large paragraphs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

To use the "cursive font" you would place the following code around the words you wish to make in a particular font:

Code: Select all

[font=cursive]This is where you place your words[/font]

Typewriter

This is a monospaced font that has a mechanical appearance to it. This emulates printed media such as newspaper. This may add some flavor to your posts, it is relatively easy to read also.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

To use the "typewriter font" you would place the following code around the words you wish to make in a particular font:

Code: Select all

[font=typewriter]This is where you place your words[/font]

There is something about ambition, how it not only propels you but also defines you.

Solomon Lear

Headmaster of Hogwarts, I

9 069 19 894

4 Aug 2019, 23:35

Embedding Music and Youtube

This is the ability to embed a youtube screen into your post can be done with the following code:

Code: Select all

[youtube]Tx1XIm6q4r4[/youtube]

The numbers and letters are the last section of the web address on a youtube page after the equal (=) sign.

If you just want to listen to the channel, perhaps some ambient music, then you can use the music tag instead. That looks like the following:

Code: Select all

[music]Tx1XIm6q4r4[/music]

There is something about ambition, how it not only propels you but also defines you.

Hjørdis Jensen

Deputy Headmistress of Hogwarts, I

3 483 2 796

13 Aug 2021, 21:48

Additional Resources

➤ Site Icons ―
A neat list of icons that Zach has included on the site.
➤ Text Manip ―
Skip the font commands and simply copy and paste. You can make your text appear neat, 𝖑𝖎𝖐𝖊 𝖙𝖍𝖎𝖘!
➤ Unicode Symbols ―
Great for creating dividers or adding a little something extra.
➤ Photo Hex Code Picker ―
A wonderful site for making a pallet look appealing.
➤ Font Space ―
Create fancy looking text headers or signatures for your characters.
➤ Text to Handwriting ―
Generate images that look like handwritten letters.
➤ EZGIF ―
Create and edit GIFS.
➤ Textcolorizer ―
Make your text fade from one colour to the next.

Credit to Winnie Harper for collating these links.
If any links break, please let a staff member know.

Cunning is the art of concealing our own defects, and discovering other people's weaknesses.
STA: 15 | EVA: 9 | STR: 2 | WIS: 20 | AP: 10 | ACC: 14
Sixth Sense | Evasive Maneuvers | Perfectionist | Poison Resistance

Solomon Lear

Headmaster of Hogwarts, I

9 069 19 894

19 Aug 2022, 22:48

Making Lists

There are a few ways a user can make a list. The most common is to use the code

Code: Select all

[list][/list]

to make a list. When you use this code, you use brackets around an Asterix [*] to signify the bullet. So it would look like as follows:

Item 1
Item 2
Item 3

Code: Select all

[list][*] Item 1
[*] Item 2
[*] Item 3[/list]

You can also number a list like so:

Item 1
Item 2
Item 3

Code: Select all

[list=1][*] Item 1
[*] Item 2
[*] Item 3[/list]

You can also make lists within lists like so:

Item 1
- I am another list.
- I am a second item in this list.
Item 2
Item 3

Code: Select all

[list][*] Item 1
[list][*] I am another list.
[*] I am a second item in this list.[/list]
[*] Item 2
[*] Item 3[/list]

You can also use the indent command.

Code: Select all

[indent]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The further you indent the more indent commands you use.

Code: Select all

[indent][indent][indent]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/indent][/indent][/indent]

There is something about ambition, how it not only propels you but also defines you.

Magdalena Wickham-Deakin

Head of Slytherin, I

868 68

1 Feb 2023, 11:16

HOW TO CODE AN ENCY (ENCYCLOPEDIA)

Thank you to Winnie Harper for writing this section

Having an ency is a requirement to be entered into the site's official index. The index is very important if you want your character to graduate to the next year, or if you want to partake in official events where staff members need to see your stats so they can roll for your actions. These events include things such as the two annual balls Hogwarts hosts, spots clubs (Quidditch, Broom Racing, and Duelling), and errands.

We understand making an ency can be a bit intimidating for new players, which is why we have crafted this guide to help you know what kind of information the index staff is looking for. I would suggest reading it before you start coding!

Fancy coding isn't necessary for your ency, but many feel more confident with it, and it can make things a bit easier for members of the index team if your ency is easier to read. Here you will learn how to apply the site's bbcode. You can find a list of all bbcodes available on the site here.

BASIC POST: Your first post should hold your character's BASIC information.

To create a basic ency, we will be combining the follow codes; bolded text, centered text, quotes, font size, font colour, and reducio.

Keep in mind when closing out codes, you must close them out in the order you wrote them in, for example :

Code: Select all

if you use [b] first then [size=150], you will need to close them
by using [/size] then [/b].

With a combination of bbcodes, we can make a basic post that is appealing to the eye. For the purpose of this tutorial, I will be using Harry Potter's information:

ABOUT ME

Full Name: Harry James Potter
House: Gryffindor
Age: 11
Wand: 27.9cm Holly Wood and Pheonix Feather Core
School Year: First
Patronus: Unknown (at this time)
Species: Human (Parseltongue)
History/Background Story:
Reducio
Harry James Potter was born on 31 July 1980, at Godric's Hollow in the West Country, England. Lord Voldemort, who believed Harry was a part of a proficiency that had been made on his downfall, targeted the Potters, causing them to hide during the first part of Harry's life. After Voldemort murdered his parents, but failed to kill Harry and had his killing curse backfire on him, Harry was discovered by Hagrid. He was taken to live with his only living relatives; his mother's muggle sister, Petunia, her husband Vernon Dursley, and his cousin, Dursley. The family hated magic and resented Harry for possessing it, though he himself did not know he was a wizard. They lied to Harry about his parents' death, claiming they had died in a car crash and treated Harry as if he were a servant.

Harry's first instance of magic happened when his Aunt Petunia cut his hair because she was angry it would not lay flat. This upset Harry greatly, as she left the boy basically bald. Petunia was horrified to discover it had grown all back the next morning.

On the week of Harry's birthday, hundreds of letters began arriving at the Dursleys' home, addressed to him from a place called Hogwarts School of Witchcraft and Wizardry. When the Dursleys saw the first letter was addressed as "cupboard under the stairs", they panicked and Uncle Vernon disposed of them. The Dursleys moved Harry to the upstairs bedroom, but were horrified to discover that the address on the letters changed to "the smallest bedroom".

In a final desperate move, the Dursleys moved to a shack on a rocky island at the edge of the sea. At midnight on Harry's 11th birthday, Rubeus Hagrid appeared in person to find out why Harry had not received his letter. He was furious to discover how the Durleys had treated Harry, and that the boy had no idea that he was a wizard. Hagrid told Harry the truth about his parents, how he was a wizard, how he had defeated Voldemort as a baby, and how he was going to attend a magical school for wizards. This is where Harry's story begins.

Copy and paste the code below to test it out yourself:

Code: Select all

[quote][center][b][size=150][color=#000000]ABOUT ME[/color][/size][/b][/center][/quote]
[quote][b]Full Name:[/b] Your Character's Name
[b]House:[/b] Your Character's House
[b]Age:[/b] Your Character's Age
[b]Wand:[/b] Your Character's Wand
[b]School Year:[/b] Your Character's School Year
[b]Patronus:[/b] Unknown until sixth year
[b]Species:[/b] Character's Race
[b]History/Background Story:[/b] [reducio]You can copy and paste the information you wrote in your main biography when you were first joining the site here.[/reducio][/quote]

You might want to add some extras into your ency after looking through others and noticing they have written things about their characters that were not required for index. Offering more information about your character can be a helpful tool for those who are RPing with you and wish to know more about your character.

Many people take advantage of the tables command to help spice their ency up, so we'll be taking a quick look at controlling tables. Tables are pretty easy to understand. Let's look at the basic code the site gives you when trying to add a table:

Code: Select all

[table][tr][td][/td][/tr][/table]

The [tr] part of the table counts as rows. This is more important if you are making a traditional looking table, if you do not care if your rows are even, you can simply press the enter button while in the same [td] section. Putting text within the [td][/td] will separate what you write into columns.

To learn more about how tables work, check out this helpful tutorial.

Using the table command and the [font=] command (I selected the font Bookman Old Style), we can create a visually appealing basic ency post:

BASIC POST:

ABOUT ME:

[font=Bookman Old Style]Full Name: Harry James Potter
House: Gryffindor
Age: 11
Wand: 27.9cm Holly Wood and Pheonix Feather Core
School Year: First
Patronus: Unknown (at this time)
Species: Human (Parseltongue)
History/Background Story:
Reducio
Harry James Potter was born on 31 July 1980, at Godric's Hollow in the West Country, England. Lord Voldemort, who believed Harry was a part of a proficiency that had been made on his downfall, targeted the Potters, causing them to hide during the first part of Harry's life. After Voldemort murdered his parents, but failed to kill Harry and had his killing curse backfire on him, Harry was discovered by Hagrid. He was taken to live with his only living relatives; his mother's muggle sister, Petunia, her husband Vernon Dursley, and his cousin, Dursley. The family hated magic and resented Harry for possessing it, though he himself did not know he was a wizard. They lied to Harry about his parents' death, claiming they had died in a car crash and treated Harry as if he were a servant.

Harry's first instance of magic happened when his Aunt Petunia cut his hair because she was angry it would not lay flat. This upset Harry greatly, as she left the boy basically bald. Petunia was horrified to discover it had grown all back the next morning.

On the week of Harry's birthday, hundreds of letters began arriving at the Dursleys' home, addressed to him from a place called Hogwarts School of Witchcraft and Wizardry. When the Dursleys saw the first letter was addressed as "cupboard under the stairs", they panicked and Uncle Vernon disposed of them. The Dursleys moved Harry to the upstairs bedroom, but were horrified to discover that the address on the letters changed to "the smallest bedroom".

In a final desperate move, the Dursleys moved to a shack on a rocky island at the edge of the sea. At midnight on Harry's 11th birthday, Rubeus Hagrid appeared in person to find out why Harry had not received his letter. He was furious to discover how the Durleys had treated Harry, and that the boy had no idea that he was a wizard. Hagrid told Harry the truth about his parents, how he was a wizard, how he had defeated Voldemort as a baby, and how he was going to attend a magical school for wizards. This is where Harry's story begins.
[/font]

Try it out yourself! Here is the code:

Code: Select all

[table][tr][td][quote][center][b][size=150][color=#000000]ABOUT ME[/color][/size][/b][/center][/quote]
[quote][font=Bookman Old Style][b]Full Name:[/b] Your Character's Name
[b]House:[/b] Your Character's House
[b]Age:[/b] Your Character's Age
[b]Wand:[/b] Your Character's Wand
[b]School Year:[/b] Your Character's School Year
[b]Patronus:[/b] Unknown until sixth year
[b]Species:[/b] Character's Race
[b]History/Background Story:[/b] [reducio]You can copy and paste the information you wrote in your main biography when you were first joining the site here.[/reducio][/font][/quote][/td][td][quote][img]IMAGE URL HERE[/img][/quote][/td][/tr][/table]

TRUNK POST: As for your TRUNK code, it is something that needs to be standardized to make it easier for staff to update your trunk and read it. You can find out more about trunk coding and what is acceptable in this helpful thread.

OPTIONAL POSTS: Many students on the site want to provide additional information about their character for people wishing to roleplay with them. Some of the posts that are common include; appearance details, personality details, relationships, and a tracker for one's threads.

The soul becomes dyed with the colour of its thoughts

Magdalena Wickham-Deakin

Head of Slytherin, I

868 68

1 Feb 2023, 11:17

Using the Mention System

Mentions are a unique system we have on this site where you can "mention" another user and their Rememberall will light up, prompting them to check the place (post and thread) where they were "mentioned". This is a good way to direct someone to your thread, to let someone know that they were in character mentioned, that you replied to them in a thread or to help them find your post in a large group thread such as a ball thread where dozens of players may be interfacing at once.

You can either use the "@" key and type between the tags it supplies the user name or manually type the tags and the user name. It should look something like this: [mention]Solomon Lear[/mention] and when you post your post the name will have an @ symbol before it and be a goldenrod color. Looking something like this: @Solomon Lear.

You can click the "@" button on the code box instead of typing it manually.

A few helpful hints (originally written by Marius Brown:

Don't use "@" manually (by typing it) because it will not be recognized by the program.
If a character's name contain accent (such as é), it must be included. So if you're trying to tag Carlos Gonzáles for example, it won't work if you type their name as Carlos Gonzales.
If you have posted your post and then later on edit it to add the tags, it won't notify the users. So it's better to make sure everyone's tagged before you post.

The soul becomes dyed with the colour of its thoughts

Back