BBCode Tips and Tutorials

Coming soon.

BBCode and Posting Templates
Craft a post template. Put finished templates in the Master Templates section to use in the post template dropdown.

BBCode Tutorial | Basic Templates | Master Templates

User avatar
Muse
Site Admin
Posts: 400
Joined: Sat Mar 24, 2018 10:12 pm
Topics: 99
Race: Storyteller
Occupation: Your Local Admin
Location: On your monitor.
Character Sheet: My Office
Plot Notes: My Manifesto
Writer Profile: Writer Profile
Post Templates: Templates for Everyone
Contact:

Thu May 03, 2018 10:09 pm

Hello! Welcome to an explanation of the fun things you can do with BBCode here on the forum.

Some of the BBCodes in the posting WYSIWYG are somewhat self-explanatory, but some are not.

Basic Typography
The most basic changes are bold and italic text as well as font and color. You can change the font you're using in a post using the Googlefont BBCode and choosing your Googlefont (yes, any of them!) from here.

Code: Select all

[googlefont=Your Font Choice]Text[/googlefont]

Color
And you can change the color of your text using the color code and the HEX number of your choice. To find the HEX code of the color you want, use a resource site like this one.

Code: Select all

[color=#FFFFFF]This makes white text.[/color]

Other Typography Details
You can divide sections of text using the HR tag like this:

Code: Select all

Text here.
[hr]
Text here.

You can change the size of your text using the size tag, and the max size you can use is 250. Sizes under 100 make the text smaller.

Max text.
Text at 65
User avatar
Muse
Site Admin
Posts: 400
Joined: Sat Mar 24, 2018 10:12 pm
Topics: 99
Race: Storyteller
Occupation: Your Local Admin
Location: On your monitor.
Character Sheet: My Office
Plot Notes: My Manifesto
Writer Profile: Writer Profile
Post Templates: Templates for Everyone
Contact:

Wed May 23, 2018 9:22 am

Some of the more fun and often-used items for organizing information include tab menus, tables, and columns.

Tabsets
A tabmenu is made up of two codes, the code to start the tab menu itself and the code to differentiate each of the tabbed sections. A title is needed for each of the tabs, much like the ones used on character sheets. Below is a basic example. Against a light-colored background, such as white, the tabs are invisible. The example below uses a Style Box in order to show their basic shape. You can read more about Style Boxes later in this tutorial:

Title 1

Content 1 here.

Title 2

Content 2 here.

Tab 3

Content 3 here.

Code: Select all

[tabmenu]
[tab=Title 1]
Content 1 here.[/tab]
[tab=Title 2]
Content 2 here.[/tab]
[tab=Tab 3]
Content 3 here.[/tab] [/tabmenu]

Tables
A table is a little more complicated because it requires you to code the rows and the columns. A row is indicated by an TR tag and each column within that row is indicated by the TD tag. Please be careful to make sure each of your rows have the same number of TD tags (columns) in them or else your table will not end up looking as it should. Below is a basic example:

column 1, row 1column 2, row 1column 3, row 1column 4, row 1
column 1, row 2column 2, row 2column 3, row 2column 4, row 2
column 1, row 3column 2, row 3column 3, row 3column 4, row 3
column 1, row 4column 2, row 4column 3, row 4column 4, row 4


Please note, that for some reason, the Googlefont tag will not work with tables. Please remember to /Googlefont before you make a table, and then pick the Googlefont back up again after using the table code.

Code: Select all

[table]
[tr][td]column 1, row 1[/td][td]column 2, row 1[/td][td]column 3, row 1[/td][td]column 4, row 1[/td][/tr]
[tr][td]column 1, row 2[/td][td]column 2, row 2[/td][td]column 3, row 2[/td][td]column 4, row 2[/td][/tr]
[tr][td]column 1, row 3[/td][td]column 2, row 3[/td][td]column 3, row 3[/td][td]column 4, row 3[/td][/tr]
[tr][td]column 1, row 4[/td][td]column 2, row 4[/td][td]column 3, row 4[/td][td]column 4, row 4[/td][/tr]
[/table]

Columns
Columns are very similar, except they automatically sort your long list of information (or text) into columns. You can choose the number of columns you'd like by entering a number like this columns=x.


Two Columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut blandit, nulla aliquam tincidunt fringilla, mi lectus ultrices est, sit amet scelerisque ipsum quam sed mi. Aenean tempus gravida dignissim. Cras consectetur quam at euismod volutpat.

Maecenas id tincidunt ipsum, eu finibus est. Nam non tincidunt sem. Aliquam placerat odio imperdiet arcu egestas egestas. Suspendisse a neque eget nibh condimentum maximus id quis nibh. Nulla et arcu augue.

Four Columns
Mauris ultricies tincidunt lacinia. Curabitur blandit, orci sed viverra rhoncus, ex dui porttitor metus, sit amet mattis risus lorem quis arcu. Quisque molestie nisi sed nisi facilisis, sed tincidunt ipsum tempor. Vestibulum cursus ligula at felis tempus lacinia. In a ex vel nisi lacinia interdum. Ut fermentum, sapien sit amet scelerisque aliquet, purus arcu sollicitudin est, id pellentesque orci velit ut odio. Aenean vestibulum nec neque in rhoncus. Integer eget facilisis massa. Etiam vel tincidunt nibh, sit amet iaculis lacus. Aliquam nec metus libero. Quisque interdum felis vitae risus vestibulum tempus eget ut orci. Mauris enim arcu, maximus at sagittis eget, tempor eu nulla. Quisque urna nisi, venenatis eu ipsum id, tincidunt placerat risus.

In eu sem sagittis, ornare ante ut, mollis lorem. Phasellus volutpat metus id dui facilisis elementum. Sed dapibus erat non libero fringilla ullamcorper. Sed semper ex eu leo cursus, et egestas tellus sollicitudin. Aliquam ac magna eu tortor tincidunt cursus in quis enim. Fusce condimentum tincidunt mauris. Etiam dolor est, sodales at commodo vehicula, luctus id arcu. Sed ac dui id enim facilisis bibendum. Nullam iaculis sapien eget pulvinar elementum. Sed mi nulla, imperdiet vel fermentum nec, interdum et felis. Vivamus a nisi a odio laoreet imperdiet.
User avatar
Muse
Site Admin
Posts: 400
Joined: Sat Mar 24, 2018 10:12 pm
Topics: 99
Race: Storyteller
Occupation: Your Local Admin
Location: On your monitor.
Character Sheet: My Office
Plot Notes: My Manifesto
Writer Profile: Writer Profile
Post Templates: Templates for Everyone
Contact:

Wed May 23, 2018 9:33 am

There are many different ways to use images in your posts. Here are some examples.

Image Basics
You can either align an image left, right, or center, or you can float that image (or Style box if you're wanting to be advanced!) to the left or to the right of a body of text. To do that, you use either the align code or the float code:

Code: Select all

[align=left][img]http://anaxasdiaries.com/images/sidebar-image.png[/img][/align]
[align=right][img]http://anaxasdiaries.com/images/sidebar-image.png[/img][/align]
[align=center][img]http://anaxasdiaries.com/images/sidebar-image.png[/img][/align]

Floating an Object

Image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut blandit, nulla aliquam tincidunt fringilla, mi lectus ultrices est, sit amet scelerisque ipsum quam sed mi. Aenean tempus gravida dignissim. Cras consectetur quam at euismod volutpat. Maecenas id tincidunt ipsum, eu finibus est. Nam non tincidunt sem. Aliquam placerat odio imperdiet arcu egestas egestas. Suspendisse a neque eget nibh condimentum maximus id quis nibh. Nulla et arcu augue.


Image
Mauris non purus finibus, dictum nunc vitae, ornare purus. In in efficitur enim. Donec vitae dui venenatis, aliquet lectus quis, viverra erat. Sed lobortis odio tempus elementum ullamcorper. In diam odio, scelerisque ac est ac, tristique rhoncus risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec ullamcorper vestibulum sapien ut suscipit. Curabitur aliquam neque ut ante pellentesque eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce bibendum tempus justo nec iaculis. Aliquam scelerisque pulvinar lacus fermentum varius. Curabitur eu est in diam ultrices fermentum et vel nibh. Suspendisse potenti. In in laoreet enim, at mollis augue.

Using a Dropcap
While this is more typography than an image, you can also decorate a block of text by creating a dropcap for the first letter of any paragraph you choose. The text and the color can be changed using the Googlefont and color tags, respectively:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut blandit, nulla aliquam tincidunt fringilla, mi lectus ultrices est, sit amet scelerisque ipsum quam sed mi. Aenean tempus gravida dignissim. Cras consectetur quam at euismod volutpat. Maecenas id tincidunt ipsum, eu finibus est. Nam non tincidunt sem.

Code: Select all

[dropcap][color=red]L[/color][/dropcap]orem ipsum dolor sit amet, consectetur adipiscing elit. Ut blandit, nulla aliquam tincidunt fringilla, mi lectus ultrices est, sit amet scelerisque ipsum quam sed mi. Aenean tempus gravida dignissim. Cras consectetur quam at euismod volutpat. Maecenas id tincidunt ipsum, eu finibus est. Nam non tincidunt sem.
User avatar
Muse
Site Admin
Posts: 400
Joined: Sat Mar 24, 2018 10:12 pm
Topics: 99
Race: Storyteller
Occupation: Your Local Admin
Location: On your monitor.
Character Sheet: My Office
Plot Notes: My Manifesto
Writer Profile: Writer Profile
Post Templates: Templates for Everyone
Contact:

Wed May 23, 2018 9:37 am

Sometimes, you want to leave an OOC note or perhaps link to a video. You can use off topic tags or a spoiler to do that. A spoiler allows you to open and close a little box, while an off topic tag leaves a little note:
ABBC3_OFFTOPIC
The OOC note can be used to record dice rolls, leave a comment at the beginning or end of your post, or whatever.

Code: Select all

[offtopic]The OOC note can be used to record dice rolls, leave a comment at the beginning or end of your post, or whatever.[/offtopic]
Title Goes Here
An sptitle tag allows you to hide stuff inside a spoiler. To link to any kind of media, from Youtube to Spotify, please use the media tag.

[media]Link here[/media]

Code: Select all

[sptitle=Title Goes Here]
An sptitle tag allows you to hide stuff inside a spoiler. To link to any kind of media, from Youtube to Spotify, please use the media tag.

[media]Link here[/media][/sptitle]
User avatar
Muse
Site Admin
Posts: 400
Joined: Sat Mar 24, 2018 10:12 pm
Topics: 99
Race: Storyteller
Occupation: Your Local Admin
Location: On your monitor.
Character Sheet: My Office
Plot Notes: My Manifesto
Writer Profile: Writer Profile
Post Templates: Templates for Everyone
Contact:

Wed May 23, 2018 9:56 am

So, onto some of the more advanced things you can do with BBCode here on the forum: Style Boxes.

If you know CSS, you can do some very fancy things with the style box code here on the forum, though please keep in mind that the phpBB theme used here is very responsive and your results on a mobile device or even a desktop screen at a different resolution may not at all turn out as you like.

For that reason, when setting the width of a style box, I highly recommend using a % instead of a px size, but if you'd like to use px for whatever reason, please keep it under 600. Even then, those style boxes will scroll when viewed on a mobile device. Please do not use font sizes less than 11px (some of us, like me, are old), and if you'd rather use responsive sizes, my recommendation is around 1-1.25em for font-size.

If you'd like to learn more CSS and see examples of some things you can play with, please visit W3Schools here.

Style Box Basics
Here on Thorns, you can next up to 3 styles deep. This means you can use style, style2, and style3 tags. You can reuse those tags within a style box, so long as you close up the style2 or style3 code from the previous box. An example of that would be:

Code: Select all

[style]Main Style
[style2]Second Style
[style3]Third Style 1[/style3]
[style3]Third Style 2[/style3]
[/style2]
[style2]Second Style 2
[style3]Third Style 3[/style]
[/style2]
[/style]

Setting Up a Style Box
A style box can be coded with CSS to have various appearances. Again, you can learn more CSS on the internet, but here are a few basic examples.

A style box with a border and a background color:
Setting the margin to 0px auto floats it in the middle of the posting area, adding a little padding keeps the text from hitting the edges, and the width is less than 100% so you can see % in action on both a desktop and your mobile device.

Code: Select all

[style="width:90%, margin:0px auto; border:2px solid #947c54; background-color:#ccc0ac;padding:20px; color:#373126;"]Setting the margin to 0px auto floats it in the middle of the posting area, adding a little padding keeps the text from hitting the edges, and the width is less than 100% so you can see % in action on both a desktop and your mobile device.[/style]

Nesting Style Boxes
To combine style boxes, you simply must place additional boxes within the larger container:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras condimentum suscipit sapien. Pellentesque porttitor a risus id vehicula. Vivamus congue est id nibh dapibus laoreet. Praesent tincidunt lorem vitae nunc commodo, et lacinia turpis laoreet. Maecenas nec enim vel odio commodo aliquet. Vivamus vitae lectus hendrerit, efficitur risus ultrices, accumsan justo. Donec vel odio at lectus dignissim eleifend. Sed sed lectus viverra tellus rhoncus euismod.

Another style box nested in the first one.
Another style box nested in the first one.
Fusce eget dignissim odio. Sed volutpat, mi et porta semper, erat orci ultricies eros, sed ultrices augue sem non diam. Duis pellentesque, risus nec accumsan semper, erat metus posuere erat, at facilisis urna nunc ac ex. Etiam lectus felis, viverra vel pulvinar ac, lacinia at turpis. Ut metus felis, varius at finibus quis, egestas non neque.

Code: Select all

[size=150]Nesting Style Boxes[/size]
To combine style boxes, you simply must place additional boxes within the larger container:

[style="width:90%, margin:0px auto; border:2px solid #947c54; background-color:#ccc0ac;padding:20px; color:#373126;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras condimentum suscipit sapien. Pellentesque porttitor a risus id vehicula. Vivamus congue est id nibh dapibus laoreet. Praesent tincidunt lorem vitae nunc commodo, et lacinia turpis laoreet. Maecenas nec enim vel odio commodo aliquet. Vivamus vitae lectus hendrerit, efficitur risus ultrices, accumsan justo. Donec vel odio at lectus dignissim eleifend. Sed sed lectus viverra tellus rhoncus euismod. 


[style2="width:35%; margin:20px; border:1px solid #947c52; background-color:#FFF; color:#373126; padding:20px; float:left; "]Another style box nested in the first one.[/style2] [style2="width:35%; margin:20px; border:1px solid #947c52; background-color:#FFF; color:#373126; padding:20px; float:left;"]Another style box nested in the first one.[/style2]

Fusce eget dignissim odio. Sed volutpat, mi et porta semper, erat orci ultricies eros, sed ultrices augue sem non diam. Duis pellentesque, risus nec accumsan semper, erat metus posuere erat, at facilisis urna nunc ac ex. Etiam lectus felis, viverra vel pulvinar ac, lacinia at turpis. Ut metus felis, varius at finibus quis, egestas non neque.
[/style]

Anyway, there is plenty you can do, and if you'd like a more advanced tutorial, please don't hesitate to PM me (Muse) or find me on Discord.

While there are many, many examples of BBCode awesomeness on the internet, it is my personal request that you keep things simple here on Thorns for readability. Thank you.
Locked Previous topicNext topic

Return to “Aesthetics and Design”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests