Welcome to Knockturn Bound!
Be sure to look at our Getting Started guide to learn more about the story we are telling!
If you have any questions, join our Discord server!
Be sure to look at our Getting Started guide to learn more about the story we are telling!
If you have any questions, join our Discord server!
Ready to Cast Some Magic??
After you're approved, be sure to check out the Whomping Willow Exchange and sign up for a report card!
This is how we track your magical progress on KB!
After you're approved, be sure to check out the Whomping Willow Exchange and sign up for a report card!
This is how we track your magical progress on KB!
| Coding Guide | ||||||||||||||||||||||
| -- | ||||||||||||||||||||||
|
Coding Guide
Coding on MyBB is a little bit different than you might be used to. Check out this thread to see what special features we have available. If you have any questions or requests for features, please let us know! Table of Contents
Introduction to Coding
On message boards, we code using something called BBCode. On MyBB it is called MyCode. It works the same, only MyCode is more secure. With that, it can be pickier than BBCode about syntax.It can seem very overwhelming at first, but code is actually really fun! The most important thing to remember is to not give up. There are always members of the community that are eager and willing to help you out. If you need help -- ask! Tips - The width is 680px maximum. Feel free to code anything up to that size. - Because MyCode is more secure, and more precise, there are some things that are not needed when coding. Just play around and learn it. Standard Coding
Below are the standard MyCode. Most are in the bar on the Reply/New Thread/Edit Post pages.Alignment
Left aligned
Center aligned
Right aligned
Cupcake ipsum dolor sit amet candy canes I love. Danish sesame snaps lemon drops macaroon chocolate gummi bears pie dragée. Jujubes I love jelly beans chocolate bar candy sweet roll. Code: [left]Left aligned[/left]Anchor
Anchor link When you click on the link above, it automatically comes down here. These will only work if the two tags are on the same page. Note, the target tag does not require a closing tag. Code: [link=anchorName]This is the linked text[/link]Text & Lines
Bold Italic Underline Strikethrough Combinations are even available: Bold and italic Horizontal line is available: Code: [b]Bold[/b]Quote Box & Code Box
Here is a quote. The box will expand to the content: Quote: You can see the code box over there --> It is a fixed height and will automatically scroll. You use it by wrapping the code in [ code] and [/code ] (remove the spaces) Code: Here is a quote:Indention & Tabs
You can indent a whole block of copy: Cupcake ipsum dolor sit amet brownie soufflé wafer. Candy muffin pastry chocolate bar icing brownie sweet roll cake toffee. Muffin tart I love danish liquorice chocolate dragée.
Or you can add tabs to the beginning: This line has only one tab. But really you can use a ton of them. I really don't know if there is a maximum amount. This line has two tabs. But really you can use a ton of them. I really don't know if there is a maximum amount. Code: You can indent a whole block of copy:Lists
You can do unordered (bulleted) lists:
Code: You can do unordered (bulleted) lists:Quick Links
You can easily link to specific forums, threads, or profiles. When you are in a page you would like to link to, check the address bar. You'll see a URL that ends in numbers. You'll put the numbers here. Forum https://knockturnbound.net/forumdisplay.php?fid=16 This link goes directly to the Summer board! Thread https://knockturnbound.net/showthread.php?tid=43 This link goes directly to the Face Claim thread. Post https://knockturnbound.net/showthread.php?tid=74&pid=204#pid204 This link goes directly to the Summer Facility Program Timeline. Profile https://knockturnbound.net/member.php?action=profile&uid=9 This goes to the Vanishing Cabinet's profile page. Code: [b]Forum[/b]Tables
Tables are a quick way to show a lot of information while keeping things need.
Code: Tables are a quick way to show a lot of information while keeping things need.Div Coding
Divs are considered the go-to for coding. They are very customizable and there are a lot of different attributes you can use to make your stuff look fancy.This will probably take a lot of trial and error, but it does get easier! The Basics
A div is a block level element that, by default, takes up 100% of the available horizontal space. All div objects automatically stack vertically, however there are a lot of attributes that you can add to modify how these blocks look. To use a div on KB, you must include at least one attribute, or else it will not render correctly.Code: [div style="attributes-go-here"]Content for the div here[/div]
Advanced
Advanced div properties can add background colors and/or images, horizontal scrolling, put two boxes next to each other, among so many more things!This site has some very handy tools that can help you set up the right codes for you to use. Just change the < > to [ ] and you're good to go!
Span Coding
Span tags are automatically inline with each other. Meaning, if you put something in a span, it will remain on the same line. Example:This line is using a span tag to make the text look like this.
Code: This line is using a [span style="font-variant:small-caps; background:#000; color:#fff;"]span tag[/span] to make the text look like [span style="font-family:monospace; font-size:12px;"]this[/span].Most of the Div attributes can be used successfully on the span tag. The best way to learn is to just try it out! Installed Fonts
We have a small handful of installed fonts that are ready for you to use! Note: Some of these do not have various styles, so be sure to test them! **Only use these installed fonts (and font awesome) in your signatures. If there is a font you need, do reach out to the admin team.** Lumierepolis - Bold - Italic - Bold Italic - Lighter Italic
Code: [size=20][font=Lumierepolis Regular]Lumierepolis - [b]Bold[/b] - [i]Italic[/i] - [b][i]Bold Italic[/i][/b] - [span style="font-weight:lighter;"][i]Lighter Italic[/i][/span][/font][/size]Barrow - Bold - Lighter Code: [size=20][font=barrow]Barrow - [b]Bold[/b] - [span style="font-weight:lighter;"]Lighter[/span][/font][/size]Braven Code: [size=20][font=braven]Braven[/font][/size]Didact Code: [size=20][font=Didact Gothic]Didact[/font][/size]Flair Deco Code: [size=20][font=Flair Deco]Flair Deco[/font][/size]Grotesk - Lighter Code: [size=20][font=grotesk]Grotesk - [span style="font-weight:lighter;"]Lighter[/span][/font][/size]Heading Code: [size=20][font=heading]Heading[/font][/size]Hourglass Code: [size=20][font=hourglass]Hourglass[/font][/size]Limelight Code: [size=20][font=limelight]Limelight[/font][/size]Retro Signature Code: [size=20][font=retrosignature]Retro Signature[/font][/size]Rozina - Bold Code: [size=20][font=Rozina]Rozina - [b]Bold[/b][/font][/size]Santiole Script Code: [size=20][font=santiole script]Santiole Script[/font][/size]Santiole Swash Code: [size=20][font=santiole swash]Santiole Swash[/font][/size]Smythe Code: [size=20][font=Smythe]Smythe[/font][/size]Stagera Code: [size=20][font=stagera]Stagera[/font][/size]Font Awesome
Font Awesome is an awesome resource to include icons that are not images. Yes, you heard that right. In fact, there is a whole library of over 59,000 icons available for use. Note: We have access to the "FA PRO" level icons. How do you use them? To do this:
You would use this: Code: [span class="fa-solid fa-otter"][/span]And if you'd like to make it bigger, or change the color: Code: [size=20][color=crimson][span class="fa-solid fa-otter"][/span][/color][/size]Google Fonts
If there is a font on Google Fonts that you want to use, you can! There can only be 6 different Google fonts on a page, so please do not use them for your signatures. A couple of examples: Inconsolata Code: [gfont=Inconsolata]Inconsolata[/gfont]Mozilla Headline Code: [gfont=Mozilla Headline]Mozilla Headline[/gfont] |
||||||||||||||||||||||
| Last edited: 09-01-2025, 04:20 AM |
