| Coding Guide |
| -- |
|
[div style="width:90%; margin:20px auto;"][align=left][span style="padding-top:10px; border-top:1px solid #333; border-bottom:1px solid #333; font-family:Rozina; font-size:38px; font-weight:bold;"]Coding Guide[/span][/align] [i]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![/i] [div class="thead"]Table of Contents[/div] [div class="trow2"][div style="width:45%; display:inline-block;"][b]Coding[/b] [link=codeIntro]Introduction to Coding[/link] [link=codeStandard]Standard Coding[/link] [link=codeDiv]Div Coding[/link] [link=codeSpan]Span Coding[/link][/div][div style="width:45%; display:inline-block; float:right;"][b]Fonts[/b] [link=fontInstalled]Installed Fonts[/link] [link=fontAwesome]Font Awesome[/link] [link=fontGoogle]Google Fonts[/link][/div][/div] [target=codeIntro][align=left][span style="font-style:italic; font-size:28px;"]Introduction to Coding[/span][/align] 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! [b]The most important thing to remember is to not give up.[/b] There are always members of the community that are eager and willing to help you out. [b]If you need help -- ask![/b] [b]Tips[/b] - 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. [target=codeStandard][align=left][span style="font-style:italic; font-size:28px;"]Standard Coding[/span][/align] Below are the standard MyCode. Most are in the bar on the Reply/New Thread/Edit Post pages. [div class="tcat" style="margin-bottom:10px;"]Alignment[/div] [div style="width:45%; float:left;"][left]Left aligned[/left] [center]Center aligned[/center] [right]Right aligned[/right] [justify]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.[/justify][/div][div style="width:45%; float:right;"] Code: [left]Left aligned[/left]
[center]Center aligned[/center]
[right]Right aligned[/right]
[justify]Justify[/justify][div style="clear:both;"][/div] [div class="tcat" style="margin-bottom:10px;"]Anchor[/div] [div style="width:45%; float:left;"][link=anchorExample]Anchor link[/link] [target=anchorExample]When you click on the link above, it automatically comes down here. [span style="font-size:13px; line-height:100%;"]These will only work if the two tags are on the same page. Note, the target tag does [u]not[/u] require a closing tag.[/span][/div][div style="width:45%; float:right;"] Code: [link=anchorName]This is the linked text[/link]
[target=anchorName]This is where the link directs to.[div style="clear:both;"][/div] [div class="tcat" style="margin-bottom:10px;"]Text & Lines[/div] [div style="width:45%; float:left;"][b]Bold[/b] [i]Italic[/i] [u]Underline[/u] [s]Strikethrough[/s] Combinations are even available: [b][i]Bold and italic[/i][/b] Horizontal line is available: [hr][/div][div style="width:45%; float:right;"] Code: [b]Bold[/b]
[i]Italic[/i]
[u]Underline[/u]
[s]Strikethrough[/s]
Combinations are even available:
[b][i]Bold and italic[/i][/b]
Horizontal line is available:
[hr][div style="clear:both;"][/div] [div class="tcat" style="margin-bottom:10px;"]Quote Box & Code Box[/div] [div style="width:45%; float:left;"]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)[/div][div style="width:45%; float:right;"] Code: Here is a quote:
[quote]I am a quote.[/quote]
You can see the code box over there -->
It is a fixed height and will automatically scroll.
You use it by using [ code]code here[/ code] (remove the spaces)[div style="clear:both;"][/div] [div class="tcat" style="margin-bottom:10px;"]Indention & Tabs[/div] [div style="width:45%; float:left;"]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.[/div][div style="width:45%; float:right;"] Code: You can indent a whole block of copy:
[indent]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.[/indent]
Or you can add tabs to the beginning:
[tab=1]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.
[tab=2]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.[div style="clear:both;"][/div] [div class="tcat" style="margin-bottom:10px;"]Lists[/div] [div style="width:45%; float:left;"]You can do unordered (bulleted) lists:
Code: You can do unordered (bulleted) lists:
[list][*]Chocolate
[*]Mint[list][*]Mint + Coffee = delicious
[*]Mint + Cookie = perfection[/list]
[*]Vanilla[/list]
Or you can do numbered lists:
[list=1][*]Item 1
[*]Item 2
[list=a][*]Item 2a
[*]Item 2b[/list]
[*]Item 3[/list][div style="clear:both;"][/div] [div class="tcat" style="margin-bottom:10px;"]Quick Links[/div] [div style="width:45%; float:left;"]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. [b]Forum[/b] https://knockturnbound.net/forumdisplay.php?[b]fid=16[/b] [forum=16]This link goes directly to the Summer board![/forum] [b]Thread[/b] https://knockturnbound.net/showthread.php?[b]tid=43[/b] [thread=43]This link goes directly to the Face Claim thread.[/thread] [b]Post[/b] https://knockturnbound.net/showthread.php?tid=74&[b]pid=204#pid204[/b] [post=204]This link goes directly to the Summer Facility Program Timeline.[/post] [b]Profile[/b] https://knockturnbound.net/member.php?action=profile&[b]uid=9[/b] [user=9]This goes to the Vanishing Cabinet's profile page.[/user] [/div][div style="width:45%; float:right;"] Code: [b]Forum[/b]
https://knockturnbound.net/forumdisplay.php?[b]fid=16[/b]
[forum=16]This link goes directly to the Summer board![/forum]
[b]Thread[/b]
https://knockturnbound.net/showthread.php?[b]tid=43[/b]
[thread=43]This link goes directly to the Face Claim thread.[/thread]
[b]Post[/b]
https://knockturnbound.net/showthread.php?tid=74&[b]pid=204#pid204[/b]
[post=204]This link goes directly to the Summer Facility Program Timeline.[/post]
[b]Profile[/b]
https://knockturnbound.net/member.php?action=profile&[b]uid=9[/b]
[user=9]This goes to the Vanishing Cabinet's profile page.[/user][div style="clear:both;"][/div] [div class="tcat" style="margin-bottom:10px;"]Tables[/div] [div style="width:45%; float:left;"]Tables are a quick way to show a lot of information while keeping things need. [table][tr][td]Row 1, Column 1[/td][td]Row 1, Column 2[/td][/tr] [tr][td]Row 2, Column 2[/td][td]Row 2, Column 2[/td][/tr][/table] [/div][div style="width:45%; float:right;"] Code: Tables are a quick way to show a lot of information while keeping things need.
[table][tr][td]Row 1, Column 1[/td][td]Row 1, Column 2[/td][/tr]
[tr][td]Row 2, Column 2[/td][td]Row 2, Column 2[/td][/tr][/table][div style="clear:both;"][/div] [target=codeDiv][align=left][span style="font-style:italic; font-size:28px;"]Div Coding[/span][/align] Divs are considered the go-to for coding. They are very customizable and there are a [i]lot[/i] 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! [div class="tcat" style="margin-bottom:10px;"]The Basics[/div] 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][table][tr][td][b]Attribute[/b][/td][td][b]Details[/b][/td][/tr] [tr][td style="vertical-align:top;"][span style="font-family:monospace; font-size:12px;"]width[/span][/td][td]You can use either a pixel number here, or a percent. [span style="font-family:monospace; font-size:12px;"]
[tr][td style="vertical-align:top;"][span style="font-family:monospace; font-size:12px;"]padding[/span][/td][td]Padding can be written in a few different ways, and speaks to the space between the content and the boundaries of the div. [span style="font-family:monospace; font-size:12px;"]
[tr][td style="vertical-align:top;"][span style="font-family:monospace; font-size:12px;"]margin[/span][/td][td]Margin is the same as padding, however it is the space between the border and the OUTSIDE contents of the box. [span style="font-family:monospace; font-size:12px;"]
[tr][td style="vertical-align:top;"][span style="font-family:monospace; font-size:12px; white-space:nowrap;"]width & margin[/span][/td][td]When you pair margin and width, you can center a block! [span style="font-family:monospace; font-size:12px;"]
Unfortunately, you cannot use [span style="font-family:monospace; font-size:12px;"]auto[/span] to vertically align something.[/td][/tr] [/table] [div class="tcat" style="margin-bottom:10px;"]Advanced[/div] Advanced div properties can add background colors and/or images, horizontal scrolling, put two boxes next to each other, among so many more things! [url=https://webcode.tools/]This site[/url] 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! [table][tr][td][b]Attribute[/b][/td][td][b]Details[/b][/td][/tr] [tr][td style="vertical-align:top;"][span style="font-family:monospace; font-size:12px;"]background[/span][/td][td]The most basic background you can do is a [span style="font-family:monospace; font-size:12px;"]color[/span]. This can be written a couple of different ways. If the color HEX code is the same number or letter for all 6 spots, then you can use the shorthand version as seen below. [span style="font-family:monospace; font-size:12px;"]
You may also use a background-image. A basic background image is immediately repeated: [div style="padding:10px 5px;border:3px solid black; border-radius:6px; background:url('https://i.imgur.com/zDLQX7m.jpeg');"][span style="font-family:monospace; font-size:12px;"]background:url('https://i.imgur.com/zDLQX7m.jpeg')[/span][/div]
If you would like to prevent the background from repeating, you can pair it with a background color: [div style="padding:10px 5px;border:3px solid black; border-radius:6px; background:#000 url('https://i.imgur.com/zDLQX7m.jpeg') no-repeat;"][span style="font-family:monospace; font-size:12px;"]background:#000 url('https://i.imgur.com/zDLQX7m.jpeg') no-repeat[/span][/div]
But let's say you want a specific background that does not repeat, yet covers the entire area of the container. You have two options: contain and cover. [b]Cover[/b] will stretch the background to [i]cover[/i] the entire container while preserving the image ratio: [div style="padding:10px 5px;border:3px solid black; border-radius:6px; background:url('https://i.imgur.com/zDLQX7m.jpeg') no-repeat; background-size:cover;"][span style="font-family:monospace; font-size:12px;"]background:url('https://i.imgur.com/zDLQX7m.jpeg') no-repeat; background-size:cover[/span][/div]
[b]Contain[/b] will repeat (unelss you tell it not to) the background over the entire container, though it sizes it down so it does not get distorted: [div style="padding:10px 5px;border:3px solid black; border-radius:6px; background:url('https://i.imgur.com/zDLQX7m.jpeg'); background-size:contain;"][span style="font-family:monospace; font-size:12px;"]background:url('https://i.imgur.com/zDLQX7m.jpeg'); background-size:contain[/span][/div] [/td][/tr][tr][td style="vertical-align:top;"][span style="font-family:monospace; font-size:12px;"]border[/span][/td][td]The border is not something that is required, and it's possible you may never use it. There are different types of borders and multiple different attributes you can give them. The standard way to write the border is [span style="font-family:monospace; font-size:12px;"]border:1px solid black;[/span], where 1px is the thickness of the border; solid is the type of border; black is the color. [span style="font-family:monospace; font-size:12px;"]
You can also add rounded borders by using the following: [span style="font-family:monospace; font-size:12px;"]
[tr][td style="vertical-align:top;"][span style="font-family:monospace; font-size:12px;"]float[/span][/td][td]Float can be useful for a couple of different scenarios. Text can wrap around images: [div style="float:left;width:100px;"]
Code: [div style="float:left;width:100px;"][img]https://placehold.co/75/FFFFFF/000000[/img][/div]Powder topping bonbon tiramisu lemon drops candy I love cake. Icing I love cake toffee I love. Marshmallow tart sweet pie tootsie roll. Ice cream cotton candy pie tart sugar plum bonbon tootsie roll topping. Gingerbread jelly muffin chupa chups chocolate bonbon. Dessert chocolate cake icing I love brownie. I love danish jelly-o marshmallow I love bonbon cake carrot cake.Div boxes can float next to each other: [div style="float:left;width:200px;"]
[div style="clear:both;"][/div] Code: [div style="float:left;width:200px;"][img]https://placehold.co/200/000000/FFFFFF[/img][/div] [div style="float:left;width:200px;"][img]https://placehold.co/200/FFFFFF/000000[/img][/div]
[div style="clear:both;"][/div]*You'll notice in the block above, that there is a div with a style of clear:both. This is required when you have floating divs so that the content that comes after knows to not try floating too.*[/td][/tr] [/table] [target=codeSpan][align=left][span style="font-style:italic; font-size:28px;"]Span Coding[/span][/align] 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 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].
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! [target=fontInstalled][align=left][span style="font-style:italic; font-size:28px;"]Installed Fonts[/span][/align] We have a small handful of installed fonts that are ready for you to use! Note: Some of these do [i]not[/i] 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 [i]need[/i], do reach out to the admin team.** [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]
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][size=20][font=barrow]Barrow - [b]Bold[/b] - [span style="font-weight:lighter;"]Lighter[/span][/font][/size] Code: [size=20][font=barrow]Barrow - [b]Bold[/b] - [span style="font-weight:lighter;"]Lighter[/span][/font][/size][size=20][font=braven]Braven[/font][/size] Code: [size=20][font=braven]Braven[/font][/size][size=20][font=Didact Gothic]Didact[/font][/size] Code: [size=20][font=Didact Gothic]Didact[/font][/size][size=20][font=Flair Deco]Flair Deco[/font][/size] Code: [size=20][font=Flair Deco]Flair Deco[/font][/size][size=20][font=grotesk]Grotesk - [span style="font-weight:lighter;"]Lighter[/span][/font][/size] Code: [size=20][font=grotesk]Grotesk - [span style="font-weight:lighter;"]Lighter[/span][/font][/size][size=20][font=heading]Heading[/font][/size] Code: [size=20][font=heading]Heading[/font][/size][size=20][font=hourglass]Hourglass[/font][/size] Code: [size=20][font=hourglass]Hourglass[/font][/size][size=20][font=limelight]Limelight[/font][/size] Code: [size=20][font=limelight]Limelight[/font][/size][size=20][font=retrosignature]Retro Signature[/font][/size] Code: [size=20][font=retrosignature]Retro Signature[/font][/size][size=20][font=Rozina]Rozina - [b]Bold[/b][/font][/size] Code: [size=20][font=Rozina]Rozina - [b]Bold[/b][/font][/size][size=20][font=santiole script]Santiole Script[/font][/size] Code: [size=20][font=santiole script]Santiole Script[/font][/size][size=20][font=santiole swash]Santiole Swash[/font][/size] Code: [size=20][font=santiole swash]Santiole Swash[/font][/size][size=20][font=Smythe]Smythe[/font][/size] Code: [size=20][font=Smythe]Smythe[/font][/size][size=20][font=stagera]Stagera[/font][/size] Code: [size=20][font=stagera]Stagera[/font][/size][target=fontAwesome][align=left][span style="font-style:italic; font-size:28px;"]Font Awesome[/span][/align] Font Awesome is an awesome resource to include icons that are not images. Yes, you heard that right. In fact, there is [url=https://fontawesome.com/search?ic=pro-collection&o=r]a whole library of over 59,000 icons available for use[/url]. Note: We have access to the "FA PRO" level icons. How do you use them? To do this:
[span class="fa-solid fa-otter"][/span] 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: [size=20][color=crimson][span class="fa-solid fa-otter"][/span][/color][/size] Code: [size=20][color=crimson][span class="fa-solid fa-otter"][/span][/color][/size][target=fontGoogle][align=left][span style="font-style:italic; font-size:28px;"]Google Fonts[/span][/align] If there is a font on [url=https://fonts.google.com/]Google Fonts[/url] that you want to use, you can! [b]There can only be 6 different Google fonts on a page, so please do not use them for your signatures.[/b] A couple of examples: [/div]
[gfont=Inconsolata]Inconsolata[/gfont] Code: [gfont=Inconsolata]Inconsolata[/gfont][gfont=Mozilla Headline]Mozilla Headline[/gfont] Code: [gfont=Mozilla Headline]Mozilla Headline[/gfont] |
| Last edited: 09-01-2025, 04:20 AM |
Current time: 06-13-2026, 05:03 AM
