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.