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.
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:
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.
There is something about ambition, how it not only propels you but also defines you.
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]
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.
There is something about ambition, how it not only propels you but also defines you.
Your Toolbar
B Bold
U Underline
S Strike
X2 Subscript
X2 Superscript
Align Left
Justified
Font Sizes
Your font size can be anywhere from Size 1 to Size 200. by using the following code:
. 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.
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.
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:
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.
B Bold
Code: Select all
[b]Bold[/b]
[i]i[/i] [i]Italics[/i] [code][i]Italics[/i]
Code: Select all
[u]Underline[/u]
Code: Select all
[s]Strike[/s]
Code: Select all
[size=1]Subscript[/size]
Code: Select all
[sup]Superscript[/sup]
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]
Code: Select all
[justify]Justified[/justify]
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]
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].
Inserting an Image
Posting a picture can add interest to a post.
Code: Select all
[img]files/44ab6ad2df93bbeb.jpg[/img]
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]
There is something about ambition, how it not only propels you but also defines you.
"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 |
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]
|
|
|
|
There is something about ambition, how it not only propels you but also defines you.
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]
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]
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.
Embedding Music and Youtube
This is the ability to embed a youtube screen into your post can be done with the following code:
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
[youtube]Tx1XIm6q4r4[/youtube]
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.
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
STA: 15 | EVA: 9 | STR: 2 | WIS: 20 | AP: 10 | ACC: 14
Sixth Sense | Evasive Maneuvers | Perfectionist | Poison Resistance
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]
- Item 1
- Item 2
- Item 3
Code: Select all
[list][*] Item 1
[*] Item 2
[*] Item 3[/list]
- Item 1
- Item 2
- Item 3
Code: Select all
[list=1][*] Item 1
[*] Item 2
[*] Item 3[/list]
- 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]
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.
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.
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.
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].
ABOUT ME
Copy and paste the code below to test it out yourself: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:ReducioHarry 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.
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]
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]
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:
|
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]
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
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