Petz Life • BBCode Guide

BBCode Guide

Posted: Fri Oct 11, 2024 5:34 am

by Celia

Basic BBCode
https://www.phpbb.com/community/help/bbcode
This link shows most basic bbcode usages for our forum.

Custom BBCode on PL

DIV Tag

Use the div tag to style your text just like you would with an HTML <div> tag.

Code: Select all

[div=width: 300px;height: 100px;background: #f7b3c8;color: #772a42;padding: 6px;border: solid 1px #772a42; border-radius: 10px;display: flex;align-items: center;justify-content: center;]whoa cool[/div]

Gives this:

whoa cool

Simple Align Text

Code: Select all

[center]centers text[/center]
[left]aligns left[/left]
[right]aligns right[/right]

Tag/@ Mention Members

We have @ mentions enabled, just type @ and start typing a username. The list will pop up to choose from.

Hashtagged Posts

Hashtags are enabled, use the following code around a word to create a #hashtag and be shown in a list of posts with the same hashtag.

Code: Select all

[hashtag][/hashtag]

Open Links in New Window

To force links to open in a new tab, use nturl

Code: Select all

[nturl={URL}]{TEXT}[/nturl]
[nturl]{URL}[/nturl]

Making Tables

You can use table=, tr=, and td= to make styled tables. Leave them blank for unstyled tables.

The code below is a good basic table layout.

Code: Select all

[table=padding: .5%; width: 100%; word-wrap: break-word; table-layout:fixed;]

[tr=]
[td=]Column 1[/td]
[td=]Column 2[/td]
[td=]Column 3[/td]
[/tr]

[tr=]
[td=]Row 1[/td]
[td=]Row 1[/td]
[td=]Row 1[/td]
[/tr]

[tr=]
[td=]Row 2[/td]
[td=]Row 2[/td]
[td=]Row 2[/td]
[/tr]

[/table]

Column 1	Column 2	Column 3
Row 1	Row 1	Row 1
Row 2	Row 2	Row 2

But you can make your tables as fancy as you want. Just follow normal html table styling rules.

Code: Select all

[table=width: 100%;word-wrap: break-word;table-layout: fixed;background: #9e9e9e;border-radius: 10px;color:#ffffff;]

[tr=background: #4b6795;border-bottom: solid 1px;]
[td=text-align:left;padding: 15px;border-top-left-radius: 10px;][b]Column 1[/b][/td]
[td=text-align:center;padding: 15px;][b]Column 2[/b][/td]
[td=text-align:right;padding: 15px;border-top-right-radius: 10px;][b]Column 3[/b][/td]
[/tr]

[tr=border-bottom: dashed 1px;]
[td=text-align:left;padding: 8px 15px;]Row 1[/td]
[td=text-align:center;padding: 8px 15px;]Row 1[/td]
[td=text-align:right;padding: 8px 15px;]Row 1[/td]
[/tr]

[tr=border-bottom: dashed 1px;]
[td=text-align:left;padding: 8px 15px;background: #919191;]Row 2[/td]
[td=text-align:center;padding: 8px 15px;background: #919191;]Row 2[/td]
[td=text-align:right;padding: 8px 15px;background: #919191;]Row 2[/td]
[/tr]

[tr=]
[td=text-align:left;padding: 8px 15px;]Row 3[/td]
[td=text-align:center;padding: 8px 15px;]Row 3[/td]
[td=text-align:right;padding: 8px 15px;]Row 3[/td]
[/tr]

[/table]

Column 1	Column 2	Column 3
Row 1	Row 1	Row 1
Row 2	Row 2	Row 2
Row 3	Row 3	Row 3

Show Time in Viewer's Timzone

The epoch tag automatically shows your choosen time in the viewer's timezone.

Replace {TEXT} with a unix timestamp such as one generated from https://www.epochconverter.com/
Time is displayed MM/DD/YYY HH:MM

Code: Select all

[epoch]1735142400[/epoch]

Gives 1735142400, which is 10AM Dec 25th CST.

Spoilers

The spoiler tag hides text behind a drop down display. Useful not just for spoilering sensitive text, but making info-heavy posts easier to navigate, as I've done in this guide. You can customize the drop down text by adding ={text} to the tag.

Code: Select all

[spoiler]You're a goofball.[/spoiler]
[spoiler=click me if u dare]wow u dared[/spoiler]

You're a goofball.

wow u dared

Fonts

The font tag will display any chosen font you have installed on your computer. Other people will need the same font installed on their computer to see it, otherwise a system default font will be displayed. Some safe options are:

Arial
Verdana
Tahoma
Trebuchet MS
Times New Roman
Georgia
Courier New
Impact

Modernfontstacks.com is good website for finding universal-ish fonts. But you can use any font you like if you're not worried about how it looks to other people.