Fantasy RPG Forum - Standing Trials

A fantasy RPG forum with Immortals, Magics and where players RP in a dynamic, changing world called Idalos.
https://dev.standingtrials.com/

A Guide to BB Code & Box Code Creation!

https://dev.standingtrials.com/viewtopic.php?t=29093

Page 1 of 1

A Guide to BB Code & Box Code Creation!

Posted: Tue Mar 22, 2022 2:50 am
by Pegasus
Image
BB Code
We have the following BBCode on the site.
Name / Type of Formatting Example Code
Basic Formatting Bold, Italic, Underline

Code: Select all

[b]Bold[/b], [i]Italic[/i], [u]Underline[/u]
Color Change 1 Color Change 1 - this uses colour hex codes. A useful site for finding those is here

Code: Select all

 [color=#ff0000]Color Change 1[/color]
Color Change 1 Color Change 2 ~ this just names the colours. A table of colours, hex codes and names is below. If you can't see the colour on the black background, hover over with your mouse and it will turn the table cell white.

Code: Select all

 [color=red]Color Change 2[/color]
colour names and numbers
#F0F8FF Alicewhite #FAEBD7 Antiquewhite #00FFFF Aqua #7FFFD4 Aquamarine
#F0FFFF Azure #F5F5DC Beige #FFE4C4 Bisque #FFEBCD Blanchedalmond
#0000FF Blue #8A2BE2 Blueviolet #A52A2A Brown #DEB887 Burlywood
#5F9EA0 Cadetblue #7FFF00 Chartreuse #D2691E Chocolate #FF7F50 Coral
#6495ED Cornflowerblue #FFF8DC Cornsilk #DC143C Crimson #00FFFF Cyan
#00008B Darkblue #008B8BDarkcyan #B8860B Darkgoldenrod #A9A9A9 Darkgray
#006400Darkgreen #BDB76B Darkkhaki #8B008B Darkmagenta #556B2F Darkolivegreen
#FF8C00 Darkorange #9932CCDarkorchid #8B0000 Darkred #E9967A Darksalmon
#8FBC8F Darkseagreen #483D8B Darkslateblue #2F4F4F Darkslategray #00CED1Darkturquoise
#9400D3Darkviolet #FF1493 Deeppink #00BFFF Deepskyblue #696969 Dimgray
#1E90FF Dodgerblue #B22222 Firebrick #FFFAF0 Floralwhite #228B22 Forestgreen
#FF00FF Fuchsia #DCDCDC Gainsboro #F8F8FF Ghostwite #FFD700 Gold
#DAA520 Goldenrod #808080 Gray #008000 Green #ADFF2F Greenyellow
#F0FFF0 Honeydew #FF69B4 Hotpink #CD5C5C Indianred #4B0082 Indigo
#FFFFF0 Ivory #F0E68C Khaki #E6E6FA Lavender #FFF0F5 Lavenderblush
#7CFC00 Lawngreen #FFFACD Lemonchiffon #ADD8E6 Lightblue #F08080 Lightcoral
#E0FFFF Lightcyan #FAFAD2 Lightgoldenrodyellow #90EE90 Lightgreen #D3D3D3 Lightgrey
#FFB6C1 Lightpink #FFA07A Lightsalmon #20B2AA Lightseagreen #87CEFA Lightskyblue
#778899 Lightslategray #B0C4DE Lightsteelblue #FAF0E6 Linen #FF00FF Magenta
#800000 Maroon #66CDAA Mediumaquamarine #0000CD Mediumblue #BA55D3 Mediumorchid
#9370D8 Mediumpurple #3CB371 Mediumseagreen #7B68EE Mediumslateblue #00FA9A Mediumspringgreen
#48D1CC Mediumturquoise #C71585 Mediumvioletred #191970 Midnightblue #F5FFFA Mintcream
#FFE4E1 Mistyrose #FFE4B5 Moccasin #FFDEAD Navajowhite #000080 Navy
#FDF5E6 Oldlace #808000 Olive #688E23 Olivedrab #FFA500 Orange
#FF4500 Orangered #DA70D6 Orchid #EEE8AA Palegoldenrod #98FB98 Palegreen
#AFEEEE Paleturquoise #D87093 Palevioletred #FFEFD5 Papayawhip #FFDAB9 Peachpuff
#CD853F Peru #FFC0CB Pink #DDA0DD Plum #B0E0E6 Powderblue
#800080 Purple #FF0000 Red #BC8F8F Rosybrown #4169E1 Royalblue
#8B4513 Saddlebrown #FA8072 Salmon #F4A460 Sandybrown #2E8B57 Seagreen
#FFF5EE Seashell #A0522D Sienna #C0C0C0 Silver #87CEEB Skyblue
#6A5ACD Slateblue #708090 Slategray #FFFAFA Snow #00FF7F Springgreen
#4682B4 Steelblue #D2B48C Tan #008080 Teal #D8BFD8 Thistle
#FF6347 Tomato #40E0D0 Turquoise #EE82EE Violet #F5DEB3 Wheat
#FFFFFF White #F5F5F5 Whitesmoke #FFFF00 Yellow #9ACD32 Yellowgreen
Quoting Text 1: Plain quote
This is just a quote

Code: Select all

[quote]This is just a quote[/quote]
Quoting Text 2: Named quote
Basilisk wrote:This is a quote with a name attached

Code: Select all

[quote=Basilisk]This is a quote with a name attached[/quote]
Quoting Text 3: Quoting a post
Avalon wrote: Tue Mar 15, 2022 12:53 amContents of Avalon's post
The name (here, Avalon) will take you to the account profile, and the ↑ will take you to the post you are quoting

Code: Select all

[quote=Avalon post_id=187753 time=1647305607 user_id=5698] Reply with quote [/quote]
Display Code To display code without it being implemented, wrap it in [ code ] (without the spaces).

Code: Select all

 [code]put BB code here
Bullet pointed lists
  • Information following bullet point 1
  • Information following bullet point 2

Code: Select all

[list]
[*] Information following bullet point 1
[*] Information following bullet point 2
[/list]
Ordered Lists: Number
  1. Number 1
  2. Number 2

Code: Select all

[list=1]
[*] Number 1
[*] Number 2
[/list]
Ordered Lists: Letter
  1. Point a
  2. Point b

Code: Select all

[list=a]
[*] Point a
[*] Point b 
[/list]
Ordered list: Dotty i
  1. The first possible answer
  2. The second possible answer
  3. The third possible answer

Code: Select all

 [list=i]
[*]The first possible answer
[*]The second possible answer
[*]The third possible answer
[/list]
Lists: Roman Numerals
  1. The first possible answer
  2. The second possible answer
  3. The third possible answer

Code: Select all

 [list=I]
[*]The first possible answer
[*]The second possible answer
[*]The third possible answer
[/list]
Stacked Lists
  • Information following bullet point 1
    1. Information following bullet point 1a
    2. Information following bullet point 1b
    3. Information following bullet point 1c
  • Information following bullet point 2
    1. Information following bullet point 2.1
    2. Information following bullet point 2.2

Code: Select all

[[list]
[*] Information following bullet point 1
[list=a]
[*] Information following bullet point 1a
[*] Information following bullet point 1b
[*] Information following bullet point 1c
[/list]
[*] Information following bullet point 2
[list=1]
[*] Information following bullet point 2.1
[*] Information following bullet point 2.2
[/list][/list]
Changing Text Size SMALL HUGE!

Code: Select all

 [size=30]SMALL[/size] [size=200]HUGE![/size]
Spoiler 1: Spoil
► Show Spoiler

Code: Select all

 [spoil] Hidden inside this [/spoil]
Spoiler 2: Plain Spoiler
Spoiler
Hidden inside this

Code: Select all

 [spoiler] Hidden inside this [/spoiler]
Spoiler 2: Named Spoiler
This is my spoiler
Hidden inside this

Code: Select all

 [spoiler=This is my spoiler] Hidden inside this [/spoiler]

Re: A Guide to BB Code & Box Code Creation!

Posted: Tue Mar 22, 2022 2:50 am
by Pegasus
BB Code

cont'd
colour names and numbers
#F0F8FF Alicewhite #FAEBD7 Antiquewhite #00FFFF Aqua #7FFFD4 Aquamarine
#F0FFFF Azure #F5F5DC Beige #FFE4C4 Bisque #FFEBCD Blanchedalmond
#0000FF Blue #8A2BE2 Blueviolet #A52A2A Brown #DEB887 Burlywood
#5F9EA0 Cadetblue #7FFF00 Chartreuse #D2691E Chocolate #FF7F50 Coral
#6495ED Cornflowerblue #FFF8DC Cornsilk #DC143C Crimson #00FFFF Cyan
#00008B Darkblue #008B8BDarkcyan #B8860B Darkgoldenrod #A9A9A9 Darkgray
#006400Darkgreen #BDB76B Darkkhaki #8B008B Darkmagenta #556B2F Darkolivegreen
#FF8C00 Darkorange #9932CCDarkorchid #8B0000 Darkred #E9967A Darksalmon
#8FBC8F Darkseagreen #483D8B Darkslateblue #2F4F4F Darkslategray #00CED1Darkturquoise
#9400D3Darkviolet #FF1493 Deeppink #00BFFF Deepskyblue #696969 Dimgray
#1E90FF Dodgerblue #B22222 Firebrick #FFFAF0 Floralwhite #228B22 Forestgreen
#FF00FF Fuchsia #DCDCDC Gainsboro #F8F8FF Ghostwite #FFD700 Gold
#DAA520 Goldenrod #808080 Gray #008000 Green #ADFF2F Greenyellow
#F0FFF0 Honeydew #FF69B4 Hotpink #CD5C5C Indianred #4B0082 Indigo
#FFFFF0 Ivory #F0E68C Khaki #E6E6FA Lavender #FFF0F5 Lavenderblush
#7CFC00 Lawngreen #FFFACD Lemonchiffon #ADD8E6 Lightblue #F08080 Lightcoral
#E0FFFF Lightcyan #FAFAD2 Lightgoldenrodyellow #90EE90 Lightgreen #D3D3D3 Lightgrey
#FFB6C1 Lightpink #FFA07A Lightsalmon #20B2AA Lightseagreen #87CEFA Lightskyblue
#778899 Lightslategray #B0C4DE Lightsteelblue #FAF0E6 Linen #FF00FF Magenta
#800000 Maroon #66CDAA Mediumaquamarine #0000CD Mediumblue #BA55D3 Mediumorchid
#9370D8 Mediumpurple #3CB371 Mediumseagreen #7B68EE Mediumslateblue #00FA9A Mediumspringgreen
#48D1CC Mediumturquoise #C71585 Mediumvioletred #191970 Midnightblue #F5FFFA Mintcream
#FFE4E1 Mistyrose #FFE4B5 Moccasin #FFDEAD Navajowhite #000080 Navy
#FDF5E6 Oldlace #808000 Olive #688E23 Olivedrab #FFA500 Orange
#FF4500 Orangered #DA70D6 Orchid #EEE8AA Palegoldenrod #98FB98 Palegreen
#AFEEEE Paleturquoise #D87093 Palevioletred #FFEFD5 Papayawhip #FFDAB9 Peachpuff
#CD853F Peru #FFC0CB Pink #DDA0DD Plum #B0E0E6 Powderblue
#800080 Purple #FF0000 Red #BC8F8F Rosybrown #4169E1 Royalblue
#8B4513 Saddlebrown #FA8072 Salmon #F4A460 Sandybrown #2E8B57 Seagreen
#FFF5EE Seashell #A0522D Sienna #C0C0C0 Silver #87CEEB Skyblue
#6A5ACD Slateblue #708090 Slategray #FFFAFA Snow #00FF7F Springgreen
#4682B4 Steelblue #D2B48C Tan #008080 Teal #D8BFD8 Thistle
#FF6347 Tomato #40E0D0 Turquoise #EE82EE Violet #F5DEB3 Wheat
#FFFFFF White #F5F5F5 Whitesmoke #FFFF00 Yellow #9ACD32 Yellowgreen
Spoiler 1: Spoil
► Show Spoiler

Code: Select all

 [spoil] Hidden inside this [/spoil]
Spoiler 2: Plain Spoiler
Spoiler
Hidden inside this
(note that the text is the colour set in the style - so in this case it's white and not showing up!)

Code: Select all

 [spoiler] Hidden inside this [/spoiler]
Spoiler 2: Named Spoiler
This is my spoiler
Hidden inside this

Code: Select all

 [spoiler=This is my spoiler] Hidden inside this [/spoiler]
Spoiler 3: Sptitle
These Must Be Named
Hidden inside this!

Code: Select all

 [sptitle=These Must Be Named] Hidden inside this! [/sptitle]
Spoiler 4: Offtopic
Off Topic
Not hidden, but still!
(note that the text is the colour set in the style - so I've changed it to green)

Code: Select all

[Offtopic]Not hidden, but still![/offtopic]
Links 1: Tagging a site I like Standing Trials as a rpg site

Code: Select all

I like [url=www.standingtrials.com]Standing Trials[/url] as a rpg site
Links 2: Displaying a URL www.standingtrials.com

Code: Select all

[url]www.standingtrials.com[/url]
Horizontal Rule A line, across the page Or the cell of a table

Code: Select all

 [hr]
Indent Not indented Indented 30px Indented 100px Please note that this BB Code only works on a PX level. Be aware that this can mess with mobile phone users and so we'd ask that you keep that in mind.

Code: Select all

 [indent=30]
Font Accessible from the drop down menu above "Font Menu"
This is Bradley Hand ITC

Code: Select all

 [font=Bradley Hand ITC] This is Bradley Hand ITC[/font]
Googlefont Turns your text to the relevant Google Font . Note that this is case (and format) sensitive.
This is the font Dancing Script

Code: Select all

  [googlefont=Dancing Script] This is the font Dancing Script [/googlefont]
Image 1: From the image url Image This is how to link to an external image. It can not be resized (although putting it in a table does constrain it).

Code: Select all

  [img]https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_960_720.jpg[/img]
Image 2: From Gallery image url / medium Image This is the "Image URL" from under the image in "My Gallery".

Code: Select all

  [img]  
 https://www.standingtrials.com/gallery/image/15306/medium[/img]
Image 3: From Gallery image url / source Image This is the "Image URL" from under the image in "My Gallery". Same as /medium

Code: Select all

  [img]https://www.standingtrials.com/gallery/image/15306/source[/img]
Image 4: From Gallery image url / mini Image This is the "Image URL" from under the image in "My Gallery".

Code: Select all

  [img]hhttps://www.standingtrials.com/gallery/image/15306/mini[/img]
Linking Image to Page Image Note that this can link to any page - just change the URL. Clicking this image will take you to our home / front page.

Code: Select all

 [url=https://www.standingtrials.com][img]https://www.standingtrials.com/gallery/image/15306/mini[/img][/url]
Highlight Text Highlight your text in a colour of your choice. Can use colour names or hex codes You may need to set the colour of the text, too

Code: Select all

 [highlight=yellow]Highlight your text in a colour of your choice.[/highlight]

Code: Select all

 [highlight=yellow][color=#000000]You may need to set the colour of the text, too[/color][/highlight]
Align Text
Text can be aligned to the left
to the right
or centered
it can also be justified. That means equally aligned both sides and requires more text to really show up. Fundamentally, though, it's just the same options as on most word procesessors.

Code: Select all

 [align=left]Tleft[/align]

Code: Select all

 [align=right]right[/align]

Code: Select all

  [align=center] center [/align]

Code: Select all

 [align=justify] justified.  [/align]

Re: A Guide to BB Code & Box Code Creation!

Posted: Tue Mar 22, 2022 2:51 am
by Pegasus
BB Code


cont'd
colour names and numbers
#F0F8FF Alicewhite #FAEBD7 Antiquewhite #00FFFF Aqua #7FFFD4 Aquamarine
#F0FFFF Azure #F5F5DC Beige #FFE4C4 Bisque #FFEBCD Blanchedalmond
#0000FF Blue #8A2BE2 Blueviolet #A52A2A Brown #DEB887 Burlywood
#5F9EA0 Cadetblue #7FFF00 Chartreuse #D2691E Chocolate #FF7F50 Coral
#6495ED Cornflowerblue #FFF8DC Cornsilk #DC143C Crimson #00FFFF Cyan
#00008B Darkblue #008B8BDarkcyan #B8860B Darkgoldenrod #A9A9A9 Darkgray
#006400Darkgreen #BDB76B Darkkhaki #8B008B Darkmagenta #556B2F Darkolivegreen
#FF8C00 Darkorange #9932CCDarkorchid #8B0000 Darkred #E9967A Darksalmon
#8FBC8F Darkseagreen #483D8B Darkslateblue #2F4F4F Darkslategray #00CED1Darkturquoise
#9400D3Darkviolet #FF1493 Deeppink #00BFFF Deepskyblue #696969 Dimgray
#1E90FF Dodgerblue #B22222 Firebrick #FFFAF0 Floralwhite #228B22 Forestgreen
#FF00FF Fuchsia #DCDCDC Gainsboro #F8F8FF Ghostwite #FFD700 Gold
#DAA520 Goldenrod #808080 Gray #008000 Green #ADFF2F Greenyellow
#F0FFF0 Honeydew #FF69B4 Hotpink #CD5C5C Indianred #4B0082 Indigo
#FFFFF0 Ivory #F0E68C Khaki #E6E6FA Lavender #FFF0F5 Lavenderblush
#7CFC00 Lawngreen #FFFACD Lemonchiffon #ADD8E6 Lightblue #F08080 Lightcoral
#E0FFFF Lightcyan #FAFAD2 Lightgoldenrodyellow #90EE90 Lightgreen #D3D3D3 Lightgrey
#FFB6C1 Lightpink #FFA07A Lightsalmon #20B2AA Lightseagreen #87CEFA Lightskyblue
#778899 Lightslategray #B0C4DE Lightsteelblue #FAF0E6 Linen #FF00FF Magenta
#800000 Maroon #66CDAA Mediumaquamarine #0000CD Mediumblue #BA55D3 Mediumorchid
#9370D8 Mediumpurple #3CB371 Mediumseagreen #7B68EE Mediumslateblue #00FA9A Mediumspringgreen
#48D1CC Mediumturquoise #C71585 Mediumvioletred #191970 Midnightblue #F5FFFA Mintcream
#FFE4E1 Mistyrose #FFE4B5 Moccasin #FFDEAD Navajowhite #000080 Navy
#FDF5E6 Oldlace #808000 Olive #688E23 Olivedrab #FFA500 Orange
#FF4500 Orangered #DA70D6 Orchid #EEE8AA Palegoldenrod #98FB98 Palegreen
#AFEEEE Paleturquoise #D87093 Palevioletred #FFEFD5 Papayawhip #FFDAB9 Peachpuff
#CD853F Peru #FFC0CB Pink #DDA0DD Plum #B0E0E6 Powderblue
#800080 Purple #FF0000 Red #BC8F8F Rosybrown #4169E1 Royalblue
#8B4513 Saddlebrown #FA8072 Salmon #F4A460 Sandybrown #2E8B57 Seagreen
#FFF5EE Seashell #A0522D Sienna #C0C0C0 Silver #87CEEB Skyblue
#6A5ACD Slateblue #708090 Slategray #FFFAFA Snow #00FF7F Springgreen
#4682B4 Steelblue #D2B48C Tan #008080 Teal #D8BFD8 Thistle
#FF6347 Tomato #40E0D0 Turquoise #EE82EE Violet #F5DEB3 Wheat
#FFFFFF White #F5F5F5 Whitesmoke #FFFF00 Yellow #9ACD32 Yellowgreen
Strike Through Text with a strike through

Code: Select all

 [s] Text with a strike through [/s]
Superscript Normal Text Superscript Text

Code: Select all

  [sup]Superscript Text[/sup]
Subscript Normal Text Subscript Text

Code: Select all

  [sub]Subscript Text[/sub]
Glowing Text Text with a glowing effect You choose the colour of the glow You may have to set the text colour too - this must be INSIDE the glow brags. Especially if the glow is light and your text is too

Code: Select all

  [glow=red]Text with a glowing effect[/glow]

Code: Select all

 [glow=red][color=#000000]Especially if the glow is light or dark and your text is too[/color][/glow]
Dropshadow Text Text with a coloured dropshadow Colour can be colour name or hex

Code: Select all

  [dropshadow=blue]Text with a coloured dropshadow[/dropshadow]
Shadow Text Text with a coloured shadow Colour can be colour name or hex

Code: Select all

  [shadow=blue]Text with a coloured shadow[/shadow]
Blur Text Text with a coloured blur Colour can be colour name or hex

Code: Select all

  [dropshadow=blue]Text with a coloured dropshadow[/dropshadow]
FadingText Text which fades in and out

Code: Select all

 [fade]Text which fades in and out [/fade]
Text Direction This text is right to left (This text is right to left) This text is left to right

Code: Select all

 [dir=rtl]This text is right to left[/dir]

Code: Select all

 [dir=ltr]This text is right to left[/dir] [hr]
Marquee Text Marquee Text 1 Left Marquee Text 2 Right Marquee Text 3 Up Marquee Text 4 Down

Code: Select all

  [marq=left]Marquee Text 1  Left [/marq]

Code: Select all

  [marq=right]Marquee Text 2 Right [/marq]

Code: Select all

  [marq=up]Marquee Text 3  Up [/marq]

Code: Select all

  [marq=down]Marquee Text 4  Down [/marq][hr]
OOC Text 1 (hover over the underlined text)
This is in between the open and close ooc brags
.

Code: Select all

 [ooc=This is inside the OOC brag]This is in between the two brags [/ooc]
Note that this is good for text as it always hovers just above the source text, however it doesn't support images etc.
OOC Text 2 (hover over the underlined text) This is inside the note brag This is in between the open and close note brag. It can be an image, too Image

Code: Select all

 [note=This is inside the note brag] This is in between the open and close note brag. 
 It can be an image, too
 [img]https://www.standingtrials.com/gallery/image/19789/medium[/img] [/note]
Hidden From Guests
Hidden Content
This board requires you to be registered and logged-in to view hidden content.

Code: Select all

  [hidden] You have to be logged into the forum to view this [/hidden]
Embed Video

Code: Select all

  [bbvideo]https://www.youtube.com/watch?v=d5TiaQeuNO0[/bbvideo]
Tabs

Tab 1 name

Information here

Tab 2 name

More information here

Code: Select all

  [tabmenu] [tab=Tab 1 name] Information here [/tab][tab=Tab 2 name] More information here [/tab][/tabmenu]
Tables How to create a table. See individual details below
Table 1: Starting and ending a table Denote the beginning and end of a table with table and /table brags

Code: Select all

 [table] [/table]
Table 2: Starting and ending a row in a table Denote the beginning and end of a row with TR and /TR brags

Code: Select all

 [tr] [/tr]
Table 3: Starting and ending a cell in a row Denote the beginning and end of a cell with TD and /TD brags

Code: Select all

 [td] [/td]
Float
Image
Makes an image float so that text will wrap around it. Image Without this the text does not do that.

Code: Select all

[float=left] [img]https://www.standingtrials.com/gallery/image/20029/medium[/img][/float] Makes an image float
 so that text will wrap around it.
An example - very simple - table.

Code: Select all

[table] 
 [tr] 
[td] ~~ a new cell in the first row  [/td] 
[td]  ~~ a second cell in the first row [/td] 
[/tr]
[tr] 
[td] ~~~ second row, cell 1 [/td]
[td] ~~~ second row, cell 2 [/td]
[/tr]
[/table]

Re: A Guide to BB Code & Box Code Creation!

Posted: Tue Mar 22, 2022 2:52 am
by Pegasus
Creating Boxcodes 1: The Basics!
This is a very basic guide to creating boxcodes. We have a number of players who are very talented at this and who can create wonders. The purpose of this guide isn't to give you all the tricks of boxcode making - but to give you enough that you can identify what you're doing, and what each thing means.

Before we begin: A note on width!
The "theme" that we purchased for this forum is fully responsive, which means that it scales with the size of the screen; this is especially important for mobile users. However, if we use the "max-width: 500px" command in a style brag (can be any size, 500px is an example), then it forces the post to be that width. This messes up the screen for mobile users, and we do not allow that command to be used in our coding. We have a script which runs daily which changes that to max-width, in the example below, but we ask that you don't use it. Instead use one of these two:

max-width: 500px - this sets the width to 500px for those whose screen can take it. For mobile users, it allows scaling.
max-width: 50% - this sets the width of the screen to 50% of the screen size, no matter what the screen size is. It's not recommended because what looks good on a larger screen doesn't on a smaller one, and vice versa.

1. Styles!
  • A boxcode covers the whole page of a post, and therefore you use the "style" code (called a "style brag") to tell the forum what you want. It sets information like height of your post, width, colours etc. Therefore, you have to put things into these "style" brags.
  • So - you start with the code

    Code: Select all

     [style= ]
    and you end with

    Code: Select all

     [/style]
  • We can have up to 5 styles in any one post - if you don't close out the first style in the post, then the next style in there will appear inside it .
  • Each bit of information in a style brag must be formatted a certain way. There are rules for this:
    • Each command is formatted as "Command: Details" so - if you are formatting a border, for example, it's "Border: Details".
    • Each command must be separated by a semicolon " ; " That's how the software knows that you've finished talking about the border and have moved on to something else.
  • There are lot of commands / ways to structure your boxcode / style brag. Here are a few.
Command What it does. Example text What the example text would do
max-width Defines the maximum width of your boxcode. This should usually be formatted in px, but can be a % proportion of the whole area available. If the posting area is not as wide as the amount you set, it will scale with the screen. max-width: 500px; Set the maximum width of the posting area to 500px. If 500px aren't available, then it will scale what you see.
Margin: Auto Centers the contants of this style brag in the middle of the posting area margin: auto; makes sure the post is center aligned in the posting area
Padding (%) Puts a "pad" inside the 4 edges of your chosen width. padding: 2% makes sure the text doesn't go right up to the edge of your post. Also adds 4% to your chosen box width
Padding (px) Puts a "pad" inside the 4 edges of your chosen width. padding: 5px makes sure the text doesn't go right up to the edge of your post. Also adds 10px to your chosen box width
background-color: Sets the background colour of your style brag. Can be the name of a colour, the hex code or the rgba of the colour background-color: black makes the background of the post black (note, this could also be #000000 or rgba(0,0,0,1)
Color: Sets the default colour of the text inside this style brag. Is over-ruled by using color bbcode in the text. color: white makes the text of the post white (note, this could also be #ffffff or rgba(255255,255,1)
box-sizing: border-box Stops the padding from increasing the size of the box by forcing the padding to be "inside" max-width: 500px; padding: 2%; box-sizing: border-box; Keeps the max width of the post at 500px, no matter how big the padding.
In the post below this - lets put these together - and have a play about




This post is in the following style brag.

Code: Select all

[style=max-width: 500px; Margin: Auto; padding: 2%; background-color: black;  color: white;]

I write here. 
[/style]


It's 500px wide (where 500px are available, smaller if not), in the middle of the posting area. My text is 2% of the available posting area away from the bottom, top and sides of my style brag, the background is black and the colour of the text is white. These are the things we set up previously, and this is how they look.


This post is in the following style brag.

Code: Select all

[style=max-width: 500px; Margin: Auto; padding: 20%; background-color: black;  color: white;]

I write here. 
[/style]


It's 500px wide (where 500px are available, smaller if not), in the middle of the posting area. My text is 20% of the available posting area away from the bottom, top and sides of my style brag, the background is black and the colour of the text is white. These are the things we set up previously, and this is how they look.


This post is in the following style brag.

Code: Select all

[style=max-width: 500px; Margin: Auto; padding: 2%; box-sizing: border-box; background-color: black;  color: white;]

I write here. 
[/style]


It's 500px wide (where 500px are available, smaller if not), in the middle of the posting area. My text is 2% of the available posting area away from the bottom, top and sides of my style brag, without making the box size bigger (so reducing the posting area available) the background is black and the colour of the text is white. These are the things we set up previously, and this is how they look.

Re: A Guide to BB Code & Box Code Creation!

Posted: Tue Mar 22, 2022 2:53 am
by Pegasus
Creating Boxcodes 2: Borders
This is a very basic guide to creating boxcodes. We have a number of players who are very talented at this and who can create wonders. The purpose of this guide isn't to give you all the tricks of boxcode making - but to give you enough that you can identify what you're doing, and what each thing means.

2.Borders
We've already looked at Styles. Now, lets have a look at how we put a border on our style brag. There are two ways to do this. With the command "border" or "box shadow". We'll look at both here.

Border
This puts a border (unsurprisingly!) around the style brag is it for. It has a particular format

border: <type> <size> <colour>
  1. Border Types
    • dotted - Defines a dotted border
    • dashed - Defines a dashed border
    • solid - Defines a solid border
    • double - Defines a double border
    • groove - Defines a 3D grooved border. The effect depends on the border-color value
    • ridge - Defines a 3D ridged border. The effect depends on the border-color value
    • inset - Defines a 3D inset border. The effect depends on the border-color value
    • outset - Defines a 3D outset border. The effect depends on the border-color value
  2. Border Size
    • This is denoted in pixels (px) - it can not be denoted in % so we ask that you keep your borders reasonable, to ensure that they don't disrupt mobile users.
    • It must be formatted with px after the number.
  3. Border Colour
    • This can be the name of the colour
    • It can be the hex code - this must be denoted by # before it.
    • It can be the rgba code in the format rgba(X,X,X,1)
Some examples below.
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 5 px big yellow dotted border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 25 px big yellow dotted border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 5 px big yellow dashed border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 25 px big yellow dashed border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 5 px big yellow solid border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 25 px big yellow solid border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 5 px big yellow double border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 25 px big yellow double border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 5 px big yellow groove border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 25 px big yellow groove border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 5 px big yellow ridge border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 25 px big yellow ridge border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 5 px big yellow inset border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 25 px big yellow inset border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 5 px big yellow outset border
This is a post with a max width of 400px style brag with a "wheat" background colour, black text and a 25 px big yellow outset border
None of these had any padding - which gives you an idea of what it looks like when a style brag doesn't have it.

Box-Shadow
Not literally a boarder, but this is a shadow which goes around the outside of a style brag so can be used as one. It, also, has a particular format

box-shadow: h-offset v-offset blur spread colour

as with borders, this can only be set in PX and we ask that you take this into account and are considerate of mobile users.


  1. H-offset. This is how horizontally offset from the style brag box the shadow is. This is a number and px. A positive value puts the shadow on the right side of the box (by the number of px you've defined), a negative one on the left.
  2. V-offset. This is how vertically offset from the style brag box the shadow is. This is a number and px. A positive value puts the shadow below the box (by the number of px you've defined), a negative one puts it above.
  3. Blur. This is the blur of the shadow. It is a number followed by px. The bigger the number, the more blurred and less solid the shadow is.
  4. Spread. This is how far the blur spreads out. It is a number followed by px. The bigger the number, the bigger the shadow.
  5. Colour. This is the colour of the blur. It can be denoted by name, hex code or rgba of colour.
Some examples below.
This is a post with a max width of 400px style brag with a "wheat" background colour and black text. The box shadow is yellow and set to 10px H-offset, 10px V-offset, 10px blur and 10px spread.
This is a post with a max width of 400px style brag with a "wheat" background colour and black text. The box shadow is yellow and set to -10px H-offset, 10px V-offset, 10px blur and 10px spread.
This is a post with a max width of 400px style brag with a "wheat" background colour and black text. The box shadow is yellow and set to 10px H-offset, -10px V-offset, 10px blur and 10px spread.
This is a post with a max width of 400px style brag with a "wheat" background colour and black text. The box shadow is yellow and set to 10px H-offset, 10px V-offset, 0px blur and 10px spread.
This is a post with a max width of 400px style brag with a "wheat" background colour and black text. The box shadow is yellow and set to 10px H-offset, 10px V-offset, 80px blur and 10px spread.
This is a post with a max width of 400px style brag with a "wheat" background colour and black text. The box shadow is yellow and set to 10px H-offset, 10px V-offset, 10px blur and 0px spread.
This is a post with a max width of 400px style brag with a "wheat" background colour and black text. The box shadow is yellow and set to 10px H-offset, 10px V-offset, 10px blur and 80px spread.
None of these had any padding - which gives you an idea of what it looks like when a style brag doesn't have it.

Re: A Guide to BB Code & Box Code Creation!

Posted: Tue Mar 22, 2022 2:54 am
by Pegasus
BB Code: Table Talk!
There are two ways to make tables on our site. BBCode and Pipe.

1. BBCode Tables
The bbcode is much more flexible.

1a: Basic BBCode for Tables.

Tables How to create a table. See individual details below
Table 1: Starting and ending a table Denote the beginning and end of a table with table and /table brags

Code: Select all

 [table] [/table]
Table 2: Starting and ending a row in a table: with highlight function Denote the beginning and end of a row with TR and /TR brags. Hovering over with the mouse creates a highlight in a contrast colour.

Code: Select all

 [tr] [/tr]
Table 2: Starting and ending a row in a table: without highlight function Denote the beginning and end of a row with TR and /TR brags. No highlight as the cell colours are set. Colour can be changed and can be hex, name or rgba

Code: Select all

 [tr style=background-color:black;] [/tr]
Table 3: Starting and ending a cell in a row Denote the beginning and end of a cell with TD and /TD brags

Code: Select all

 [td] [/td]
An example - very simple - table.

Code: Select all

[table] 
 [tr style=background-color:black;] 
[td] ~~ a new cell in the first row  [/td] 
[td]  ~~ a second cell in the first row [/td] 
[/tr]
[tr style=background-color:black;] 
[td] ~~~ second row, cell 1 [/td]
[td] ~~~ second row, cell 2 [/td]
[/tr]
[/table]
That outputs this:
~~ a new cell in the first row ~~ a second cell in the first row
~~~ second row, cell 1 ~~~ second row, cell 2


1b: Pre-Formatted Tables
There are more than this though. If you click on the table image in the top menu bar above (marked 1 in the diagram below) you will open up a menu for creating BB code tables.
Diagram 1: Placement of Top Menu Button.
Image
It gives you options of how many columns you want (marked "A" in the diagram below).
Image

Diagram 2: Tables Menu
Underneath each choice, there are small squares (which are tiny table icons). Those are the options for how many rows - hover over them to see what you're choosing. In the diagram, I've circled (and marked as B) the choice which is for 3 columns, 4 rows.


If I press that, it gives me the following output.

Code: Select all

 [table=45,null]
	[thead]
		[tr=textleft]
			[th=33,null]Title1[/th]
			[th=33,null]Title2[/th]
			[th=34,null]Title3[/th]
		[/tr]
	[/thead]
	[tbody]
		[tr=bg2]
			[td=null,1]Text11[/td]
			[td=null,1]Text21[/td]
			[td=null,1]Text31[/td]
		[/tr]
		[tr=bg1]
			[td=null,1]Text12[/td]
			[td=null,1]Text22[/td]
			[td=null,1]Text32[/td]
		[/tr]
		[tr=bg2]
			[td=null,1]Text13[/td]
			[td=null,1]Text23[/td]
			[td=null,1]Text33[/td]
		[/tr]
		[tr=bg1]
			[td=null,1]Text14[/td]
			[td=null,1]Text24[/td]
			[td=null,1]Text34[/td]
		[/tr]
	[/tbody]
[/table]
That code brings about the following table:
Title1 Title2 Title3
Text11 Text21 Text31
Text12 Text22 Text32
Text13 Text23 Text33
Text14 Text24 Text34
That is more code than we've covered! However, if you look at the tables menu again (Diagram 2 above), you'll see that there's a link that says "Show Table Guidelines" - click on that, and it opens up this

Diagram 3: Table Guidelines.
Image
You don't NEED to use the null etc - you can simply use the base code in section1a above. One really good thing, though is that this feature is automatically in the % mode, and so is mobile-responsive.

1c. Customisable BBCode Tables
Our tables code is really powerful and customisation is fully enabled. Therefore, we can set out background images, height, etc. An example of what we can do is here:

Table Title
Title1 Title2 Title3
Text11 Text21 Text31
Text12 Text22 Text32
Text13 Text23 Text33
Text14 Look AT ME!!!! Text34
Text15 Text25 Text35
Text16 Text26 Text36
Text17 Text27 Text37
Text18 Text28 Text38

The code for this is:

Code: Select all

 [size=130]Table Title[/size]
[table style=background-image: url('https://www.finetunedfinances.com/wp-content/uploads/2018/01/fun-on-a-holiday-768x576.jpg'); border_color=orange ]
	[thead]
		[tr]
			[th style=background-color: #c234e1;]Title1[/th]
			[th]Title2[/th]
			[th]Title3[/th]
		[/tr]
	[/thead]
	[tbody]
		[tr]
			[td width=30% style=background-color: red;]Text11[/td]
			[td]Text21[/td]
			[td]Text31[/td]
		[/tr]
		[tr]
			[td]Text12[/td]
   			[td style=background-color: red;]Text22[/td]
			[td]Text32[/td]
		[/tr]
		[tr]
 			[td]Text13[/td]
 			[td]Text23[/td]
 			[td style=background-color: red;]Text33[/td]
		[/tr]
		[tr]
			[td style="border: 1px solid red;"]Text14[/td]
			[td style=height: 62px; text-align: center; padding-top: 1%; background-color: #e9e9e9; text-transform: uppercase; font-size: 16px; color: #000000; letter-spacing: 2px; margin-right: 5px;]Look AT ME!!!! [/td]
			[td]Text34[/td]
		[/tr]
		[tr]
			[td]Text15[/td]
			[td style="border: 1px solid red;"]Text25[/td]
			[td]Text35[/td]
		[/tr]
		[tr]
			[td]Text16[/td]
			[td]Text26[/td]
			[td style="border: 1px solid red;"]Text36[/td]
		[/tr]
		[tr]
			[td]Text17[/td]
			[td]Text27[/td]
			[td]Text37[/td]
		[/tr]
		[tr style="background-color: red;"]
			[td]Text18[/td]
			[td]Text28[/td]
			[td]Text38[/td]
		[/tr]
	[/tbody]
[/table]
Please note To set the height of a table, you have to use px, not %. The issue is with width - mobile users can scroll down. Width can (and should) be %.

There may come a day when I make a tutorial for this - and if anyone wants to do so, it's gratefully received. But if you've got a good grasp of tables, then you should be able to work it out!

2. Pipes Tables

2a. Basic Pipes Tables
To add a table, use three or more hyphens (---) to create each column’s header, and use pipes (|) to separate each column. Put the header cells syntax above the hyphens, then put a pipe on the beginning and end of each row.

Code: Select all

| Header 1     | Header 2 |
| ----------- | ----------- |
| Text1      | Text2       |
| Text3  | Text 4      |
Produces this
Header 1Header 2
Text1Text2
Text3Text 4
If you click on the "Create Pipes Table" button in the top menu (marked 2 in the diagram below) then it will give you a pop up box with directions etc. It's twitchy and a bit fiddly, though, so we advise that it's only used for very basic stuff.
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited