it's madness

WIP

Basic BBCode Guide Draft:

Most of you checking this out know what bbcode is already. Long story short: it's what you use to make your posts pretty using lines of code. Your first stop shop for bbcode help should be this link, right here: BB Codes | IwakuRoleplay.com

But we understand that this brief overview is far from comprehensive, and some parts need some elaboration, so we're starting a three-part guide to all things BBcode that will go through Basic, Intermediate, and Advanced levels of coding. In basic, we'll be going through how to elaborate on some of the codes mentioned in the help section. The intermediate section will explain something called "div codes" which are a lot more versatile, but a lot more complicated. The advanced guide will cover how to combine these things, and something known as "slave tags," which will include a lot of accordion manipulation. We will not be reiterating all the codes in the basic help guide, however, because all that information is already there!


Things on the list for basic:

Adding a link to an image - [url][img]
Quoting a SPECIFIC POST (without using the reply button)
Setting a spoiler TITLE in the center: [spoiler = center | Title]
The difference between img, imga, and bimg (bimg will also automatically change size of pic).
The difference between tabs and stabs.
Manipulating tabs?
Changing the color of info, dash, dotted, question, roleplay, and warning without using color names such as "red" but hexcodes. (rgb works normally but not with these)
Underlining and double underlining will be white unless also covered with color tag
Go deeper into fieldbox commands
Difference between spoiler, spoili, and spoilerbb
Table, td, tr.

Things you cannot do without breaking code:
making one side of the element a certain color or underlined or italicized and not the other duplicates the code, but does not strictly speaking break it.

A note about indents: Indents are auto-breaking. You can also do [indent=2] to make it bigger, but be forewarned that every time you edit your post, the indent will disappear, no exceptions. Every time you edit a post with an indent in it, you need to backspace and reapply the indent. Does not appear to apply to spacer. INDENTS ARE NOT AUTOBEREAKIGN ANYMOREWTGMYBRAINHASBEENBLOWN. Also making one element a certain color and not the other does not break code anymore, either. Okay... it kinda does, duplicates the code.

Things I have no experience with so someone else can add if you know more:
article, drop, encadre, fieldset, hdor, hsub, hr commands, latex, solid, spacer, spoilerbb,

Slider, stabs, and accordion will both be covered in advanced.

Link holmi's color guide and mention stealing?
 
Last edited:
  • Like
Reactions: darkflames13
Manipulating tabs?
To what extent of manipulation are we adding here? Just the basics like changing the font face and colour?

Changing the color of info, dash, dotted, question, roleplay, and warning without using color names such as "red" but hexcodes (I can't quite remember if this is possible or not yet)
Hex values work c:
rgb / rgba and hsl / hsla values don't tho

I don't think the latex bbcode works rn. It's showing an error on the bbcode page and when I try to use it. Or is it just on my end? o:

Go over table, td, and tr in this section or in intermediate or advanced?
I think tables fit into basics.
 
  • Useful
  • Thank You
Reactions: firejay1 and rissa
rgb / rgba
*nods* i dunno about the hsl / hlsa but i've used rgb a few times in my test chamber. you just have to type them precisely. i was working on this last night actually xD



[div=
height: 50px;
width: 450px;
background-color: rgb(124,252,0);][/div]
 
*nods* i dunno about the hsl / hlsa but i've used rgb a few times in my test chamber. you just have to type them precisely. i was working on this last night actually xD




I meant that they don't work with the colour tag when changing the info block colour. :'D Not sure if it doesn't work with the colour tag in general or it's just info blocks.

*tests*
This text should be black //rgb(0,0,0)
[color=rgba(0,0,0,0.3)] This text should be black and have an opacity of 30% //rgba(0,0,0,0.3) [/color]

[color=hsl(10,10%,10%)] I don't actually know what colour this is supposed to be :'D //hsl(10,10%,10%) [/color]
[color=hsla(10,10%,10%,0.3)] Still don't know what colour this is, but it should have opacity of 30% //hsl(0,10%,10%,0.3) [/color]

Edit: Looks like only rgb works with the colour tag o:
hmmmmm
 
Last edited:
  • Bucket of Rainbows
Reactions: rissa
I meant that they don't work with the colour tag when changing the info block colour. :'D Not sure if it doesn't work with the colour tag in general or it's just info blocks.

*tests*
This text should be black //rgb(0,0,0)
[color=rgba(0,0,0,0.3)] This text should be black and have an opacity of 30% //rgba(0,0,0,0.3) [/color]

[color=hsl(10,10%,10%)] I don't actually know what colour this is supposed to be :'D //hsl(10,10%,10%) [/color]
[color=hsla(10,10%,10%,0.3)] Still don't know what colour this is, but it should have opacity of 30% //hsl(0,10%,10%,0.3) [/color]

Edit: Looks like only rgb works with the colour tag o:
hmmmmm
Oops yeah my bad, I thought you just meant in general xD
 
Forgot about the font awesome icon code. [fa][/fa] It's not in the bbcode help list so I think we should include it. c:
 
  • Useful
  • Like
Reactions: firejay1 and rissa
That was one of the things I wanted to include in basic and it just woops and slipped my mind. Are there any other missing ones you think we should add to basic?
 
Maybe how you can add border properties into an hr? (Size, style and color)
 
That's one thing I actually have no experience with, listed up there ^ so if someone else knows a little bit more about them maybe they could write it up?
 
It basically looks like [hr=border:2px solid blue][/hr]


 
  • Like
Reactions: rissa
That was included in the help guide already, but let me play around with it a bit then I guess and see what more can be done with it or said about it. :)
 
Wait... It was? Lol wow. I swear there's a brain up in my head somewhere...
 
Outline (everything divs)

  • Basics of div
    • Syntax
    • Units
  • Overwriting properties (!important)
  • The Box Model
    • Margin
      • individual sides
      • shorthand
    • Border
      • individual sides
      • style
      • width
      • color
      • radius
      • shorthand
    • Padding
      • individual sides
      • shorthand
    • Content
      • width
      • height
      • max & min width
      • max & min height
    • Calculating dimensions
  • Adding Backgrounds
    • colour
      • colour name
      • hex
      • rgb / rgba
      • hsl / hsla ? Maybe? idk. It's not a common thing to use xD
    • images
      • background-repeat
      • background-position
      • background-size
    • gradients
      • linear
      • radial
    • Shorthands
  • Text Properties
    • font-color
    • font-family
    • font-variant
    • font-weight
    • font-style
    • text-decoration
    • text-transform
    • letter-spacing
    • word-spacing
    • line-height
    • word-wrap
    • text-align
  • Adding Scrollbars
    • overflow
    • overflow-x
    • overflow-y
  • Shadows
    • text-shadow
    • box-shadow
  • Positioning
    • float
    • top
    • right
    • bottom
    • left
  • Transform property
    • translate
    • scale
    • rotate
  • Making Columns
    • columns property
    • display property
    • flexboxes
  • Centring divs
    • horizontal centring
    • vertical centring
    • horizontal & vertical centring
  • Layers (z-index)

These are all that I can remember off the top of my head that are usually used. Let me know if I missed anything else that should be added xD

Edit:
Added sections Shadows, Positioning, Transform, Columns, Centring, Layers
Added subsection Gradients to Background
Moved sections Display and Flexboxes under Columns

Edit 2:
Moved section Units under new section Basics
Added subsection Syntax under Basics
 
Last edited:
Transform and columns?
 
  • Thank You
Reactions: darkflames13
Outline so far: (No definite structure)

- Basic Definition List [Nemopedia]
- Basics Outline (BBCode) [firejay1]
- Div Code Intro (Box model, etc) [darkflames13]
- Div Code Basics (most commonly used div codes)*
- Div Code Intermediate (the z-index and all that harder stuff)*
- Div Code Advanced (bbcode + Div code fusion)*
- Codes master list [FieryCold]
- Step-by-Step guide [Nemopedia]

*For Div guides see darkflames13's master list to claim individual codes to explain. It is a big project.
 
Division of work so far

Notes:
Crossed out = Already in div draft
Subsections in claimed full sections are in spoilis


Basics of div
Syntax
Unit

Overwriting properties (!important)

The Box Model
Margin
Border
Padding
Content

Calculating dimensions - Claimed by Flakes

Adding Backgrounds
Colour - In Coding Hell
Images (includes repeat, positioning, etc.) - In Coding Hell
Gradients (linear & radial)
Shorthand

Text Properties - Claimed by rissa
[spoili]font-color
font-family
font-variant
font-weight
font-style
text-decoration
text-transform
letter-spacing
word-spacing
line-height
word-wrap
text-align[/spoili]

Adding Scrollbars
overflow
overflow-x - In Coding Hell
overflow-y - In Coding Hell

Shadows
text-shadow - In Coding Hell
box-shadow

Positioning
float
top
right
bottom
left

Transform property
translate
scale
rotate - In Coding Hell

Making Columns
columns property - Claimed by Elle
display property - Partially In Coding Hell
flexboxes - Claimed by Flakes

Centring divs - Claimed by Flakes
[spoili]horizontal centring
vertical centring
horizontal & vertical centring[/spoili]

Layers (z-index) - Claimed by Flakes

Divs + Stabs - Claimed by Flakes

Things in Ricey's coding hell that were not covered here:
Text Indent
Text transform
Text overflow
White space
Background Attachment
Opacity


Probably missed some things. You guy can edit the post to claim xD