[GUIDE] BBCodes

[The Quill]

BBCode

---

The forum supports several standard and several custom BBCodes. BBCode is a way to style your content, such as bolding, underscoring or italicizing certain parts of your text. In this guide we'll show you the different BBCodes that are available for use on this forum and how to use them.

Warnings

---

The font, colors and background patterns of the site's theme were selected to be easy on the eyes and to maximize readability. In general, you should try not to stray too far from the site's defaults. You are expected to keep mobile/tablet readability in mind. You can easily test if your content remains legible on smaller screens by resizing your browser's window. The container, row, and column BBCodes are specifically made to give you layout possibilities which are mobile-compatible. There is no excuse to have clipping or overflowing content.

Please do not abuse the BBCodes. With the abox BBCode in particular it is possible to create completely illegible content, for example by setting a bright pink background with yellow text in it and a huge purple border. Don't do this. Most of the time you're best off sticking to a white or black background color with a low opacity. If you do decide to use a different background color, either make sure that the text within it has sufficient contrast to be readable, or stick to a low opacity for the background color.


Basic BBCodes

---

The most basic BBCodes are these:

• Bold text
• Italic text
• Underlined text
• Strikethrough text
• Text with ^superscript
• Text with _subscript

You can achieve each of these as follows:

Bold text:

Code: Select all

[b]Bold text[/b]

Italic text:

Code: Select all

[i]Italic text[/i]

Underlined text:

Code: Select all

[u]Underlined text[/u]

Strikethrough text:

Code: Select all

[strike]Strikethrough text[/strike]

Text with superscript:

Code: Select all

Text with [sup]superscript text[/sup]

Text with subscript:

Code: Select all

Text with [sub]subscript text[/sub]

[The Quill]

Text alignment

---

Text can be aligned in four ways using BBCode:

• To the left
• To the right
• Centered
• Justified

Left aligned text:

Code: Select all

[left]Left aligned text[/left]

Right aligned text:

Code: Select all

[right]Right aligned text[/right]

Centered text:

Code: Select all

[center]Centered text[/center]

Justified text:

Code: Select all

[justify]Justified text[/justify]

[The Quill]

Fonts

---

There are several fonts available on Penwick. The default font is Libre Baskerville which was selected to maximize legibility.

While you are free to use these various fonts, we politely ask you to keep legibility in mind. Most of the time you should be using the default font.

• LibreBaskerville
• EBGaramond
• CormorantGaramond
• Cinzel
• SyneMono
• BebasNeue
• CaesarDressing
• Comforter
• HomemadeApple
• Parisienne
• LavishlyYours
• NotoSerif

Classic Fonts

---

LibreBaskerville:
LibreBaskerville is the font being used here. This is the default site font.

EBGaramond:
EBGaramond is the font being used here.

CormorantGaramond:
CormorantGaramond is the font being used here.

Cinzel:
Cinzel is the font being used here.

NotoSerif:
NotoSerif is the font being used here.


Monospaced Fonts

---

SyneMono:
SyneMono is the font being used here.


Bold Fonts

---

BebasNeue:
BebasNeue is the font being used here.


Handwritten Fonts

---

Comforter:
Comforter is the font being used here.

HomemadeApple:
HomemadeApple is the font being used here.

Parisienne:
Parisienne is the font being used here. By default this font is small so the size is set to 200 here.

LavishlyYours:
LavishlyYours is the font being used here. By default this font is small so the size is set to 200 here.


The way to use a font is to simply write the font name within the BBCode. Some examples:

Code: Select all

[font=EBGaramond]EBGaramond is the font being used here.[/font]
[font=HomemadeApple]HomemadeApple is the font being used here.[/font]
[font=MajorMonoDisplay]MajorMonoDisplay is the font being used here.[/font]

You can set the font size using the size BBCode. The size is measured in percentage and goes up to a value of 200%:

Code: Select all

[font=LavishlyYours][size=200]Lavishly yours![/size][/font]

The above code looks as follows:
Lavishly yours!

To push past 200% you can use the fontsize BBCode:

Code: Select all

[font=LavishlyYours][fontsize=400]Lavishly yours![/fontsize][/font]

The above code looks as follows:
Lavishly yours!

[The Quill]

Laying out content

---

This is probably the most important section in this guide. In order to lay out your content in a dynamic way which maintains mobile-friendly support some custom BBCodes were added to the site. You should not be using tables to arrange your content. The following BBCodes are replacements for where you might otherwise be inclined to use a table and are superior to using tables because they ensure that content remains legible (and does not clip or overflow) on smaller screens.

The BBCodes used to lay out content are:

• container
• row
• column

The most basic usage of these BBCodes is to use them to create two equal-width columns which will collapse neatly on top of each other at smaller screen resolutions.

Here is what that looks like:

---

Left side. Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.

Right side. Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.

Code: Select all

[container]
[row]
[column=six]
[b]Left side.[/b]  Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.
[/column]
[column=six]
[b]Right side.[/b]  Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.
[/column]
[/row]
[/container]

---

The way this works is that by using a container, you are effectively dividing the horizontal width of the page up into 12 equally narrow columns. By writing column=six, you are saying that you want that part of the content to take up 6 of those twelve columns, or half of the available space. This is why having two columns set to six fills the page (horizontally). Two times 6 is 12 and 12 is the total amount of horizontal space available.

Another way to think of this is to imagine a full-width table with 12 small but equally spaced columns in it. With the columns BBCode you're simply assigning X amount of columns to your content.

All the column BBCodes within each row must amount to the total of 12 columns. Here are some more examples:

Three equally spaced columns (three times four is twelve, hence these columns are set to four):

---

Left side. Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.

Middle column. Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.

Right side. Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.

Code: Select all

[container]
[row]
[column=four]
[b]Left side.[/b]  Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.
[/column]
[column=four]
[b]Middle column.[/b]  Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.
[/column]
[column=four]
[b]Right side.[/b]  Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.
[/column]
[/row]
[/container]

Finally, here is a more complex example featuring multiple rows and a nested container. This example also uses the pad BBCode in order to add visual seperation (padding) between the various rows and columns. The pad BBCode will be discussed in greater detail further in this guide:

---

Left side. Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.

Right side. Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.

Left side. Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.

Left subdivided side. Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.

Right subdivided side. Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.

Code: Select all

[container]
[row]
[column=six]
[pad=8]
[b]Left side.[/b]  Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.
[/pad]
[/column]
[column=six]
[pad=8]
[b]Right side.[/b]  Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.
[/pad]
[/column]
[/row]
[row]
[column=six]
[pad=8]
[b]Left side.[/b]  Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.
[/pad]
[/column]
[column=six]
[container]
[row]
[column=six]
[pad=8]
[b]Left subdivided side.[/b]  Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.
[/pad]
[/column]
[column=six]
[pad=8]
[b]Right subdivided side.[/b]  Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.
[/pad]
[/column]
[/row]
[/container]
[/column]
[/row]
[/container]

[The Quill]

Padding

---

If we use the BBCodes discussed before to create two equal-width columns and fill them with some text, you will see that the columns are sitting right next to each other, there is no gap or visual space between them by default. This is done because there are sometimes scenarios where you want content to sit perfectly next to each other (such as two images). However, with text you will often want to have a bit of separation. You can add this seperation by using the pad BBCode. Here is our three column example from before, but this time with 16 pixels of padding all around each column. All around here means that the padding applies to the top, bottom, left, and right side of the content.

Left side with 16px of padding on all sides. Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.

Middle column with 16px of padding on all sides Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.

Right side with 16px of padding on all sides Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.

Code: Select all

[container]
[row]
[column=four]
[pad=16]
[b]Left side with 16px of padding on all sides.[/b]  Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.
[/pad]
[/column]
[column=four]
[pad=16]
[b]Middle column with 16px of padding on all sides[/b]  Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.
[/pad]
[/column]
[column=four]
[pad=16]
[b]Right side with 16px of padding on all sides[/b]  Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.
[/pad]
[/column]
[/row]
[/container]

The pad BBCode uses pixel values, but you can also use the BBCodes padleft, padright, padbottom, padtop instead to specify padding only in a specific direction. However, those BBCodes use percentage values, not pixels.

In most cases pad=8 will do the job. In more specific cases where you want to offset content in a particular direction, the padleft/right/bottom/top BBCode should be used. The reason that these BBCodes use percentages and not pixel amounts is to ensure the most legibility on smaller screens. Here is an example:

Content that is offset 30% from the left by using a padleft.

Code: Select all

[padleft=30]Content that is offset 30% from the left by using a padleft.[/padleft]

[The Quill]

Box, lightbox & darkbox

---

You can create three kinds of simple boxes. The most simple one is simply box which creates a light background and a border in the site theme colors, with a bit of internal padding. For example:

In felis felis, elementum at fermentum eu, elementum sed ante. Vestibulum consequat est ipsum. Sed vitae lobortis tortor. Proin efficitur ex faucibus elementum viverra. Quisque a velit lacus. Suspendisse nec libero sed velit placerat scelerisque. Morbi mollis lorem ac nisl pulvinar, ut fermentum sapien aliquam. Fusce sagittis fringilla turpis vitae dictum. Donec quis augue sodales, ultrices ligula et, dictum est. Fusce ultricies quis tellus vitae porttitor. Aenean interdum eleifend consequat. Quisque odio ante, auctor at erat ac, interdum cursus justo. Ut auctor faucibus consequat. Ut hendrerit placerat orci, vel blandit odio finibus et. Quisque efficitur hendrerit tincidunt.

Code: Select all

[box]Your content here[/box]

You can create slightly more advanced boxes using lightbox and darkbox. Thse are boxes with a darkened or lightened background (relative to the background color of the page) and the BBCode for these is: lightbox={NUMBER};{NUMBER}, with darkbox working the same way. The first number is a value between 1-5 (inclusive) which indicates how transparent the box should be. 1 = 20% opacity, 2 = 40% opacity, 3 = 60%, 4 = 80% and 5 = 100%. The second number says by how many pixels the corners of the box should be rounded.

Here is an example of a darkened box (4 = 80% opacity) with 12px rounded corners and 16px of internal padding.

---

Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.

Code: Select all

[darkbox=4;12]
[pad=16]
[color=white]Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.[/color]
[/pad]
[/darkbox]

Here is an example of a lightened box (4 = 80% opacity) with 12px rounded corners and 16px of internal padding.

---

Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.

Code: Select all

[lightbox=4;12]
[pad=16]
Suspendisse laoreet ipsum urna, non maximus ante consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sapien libero, gravida ultrices porttitor vel, porta id dui. Vivamus et eros lectus. Nam posuere accumsan ultricies.
[/pad]
[/lightbox]

[The Quill]

Images

---

You can use the img BBCode to display an image:

Code: Select all

[img]/images/symbols/House_Dranaga.png[/img]

In order to display an image at a specific resolution, use the image=Width x Height BBCode.

Code: Select all

[image=200x200]/images/symbols/House_Dranaga.png[/image]

In order to display an image and round the edges, use roundedimg=percentage of rounding. Here is an example with the rounding set to 50%, making the image appear circular.

Code: Select all

[roundedimg=50]/images/symbols/House_Dranaga.png[/roundedimg]

Finally, you can also set the width and height of the image and round it using roundedimage=Width x Height ; percentage of rounding. Here is an image resized to 200x200 with its rounding set to 50%, making it smaller and circular.

Code: Select all

[roundedimage=200x200;50]/images/symbols/House_Dranaga.png[/roundedimage]

[The Quill]

Advanced Box

---

The abox BBCode is the most advanced way to create a box of content. With this BBCode you can:

• Set the background color with an opacity in 20% steps (0% opacity = no background color, 100% = fully opaque in that color)
• Set the internal padding of the box with pixel, percentage, relative (em) or root relative (rem) values.
• Configure a border for the box. You can set the color, line thickness and border style (dotted, dashed, solid, double, groove, ridge, inset, outset, or none)
• Set a the roundness of the border on the box using pixel, percentage, relative (em) or root relative (rem) values.
• Configure a box shadow, which can be a drop shadow or an inset shadow.

If you are familiar with CSS and HTML, the abox BBCode basically creates a <div> where upon which the CSS properties background-color, padding, border, border-radius, and box-shadow can be set.

The abox should have this format of properties: abox=color:strength;padding;border;box-shadow:box-shadow-color;width;height

Here is a breakdown of each of the properties:

• color - should be a named color like "white", "aliceblue", "black" or a hexcode in the format: #000 (3 digits) or #000000 (6 digits). This setting determines the background color of the box.
• strength - should be a value in the range of 0-5. This value will be multiplied by 20% to determine the opacity of the background color of the box. Setting this value to 0 will mean that you won't see the background color at all, this can be useful if you just want to create a border around some content.
• padding - here you can set the internal padding. You can use pixel values like "8px" or percentages like "10%" or relative values like "2em" or "2rem". Use "none" if you don't want any padding.
• border- here you can set the border you want on the box. You can set the color of the border, the thickness, and the style of border. Use the MDN reference on the CSS border property to see all the possibilities.
• border-radius - here you can set how round the borders should be. Use "50%" for a circle. Use "8px" for 8 pixels of border rounding. You can also use relative values (em/rem) here. See the MDN reference on the CSS border-radius property for reference. Use "none" here to specify no border rounding.
• box-shadow - here you can configure a box shadow in accordance with the MDN reference on the CSS box-shadow property. Use "none" here to specify no shadow. Note: if you want to specify a hex value for the color of the shadow you should use the format: box-shadow-settings:color. Note the colon. This means that you would set it like so: [inlincode]4px 4px 5px:#F00[/inlinecode] instead of [inlincode]4px 4px 5px #F00[/inlinecode]. Again, note the colon here. For named colors like "red", "green", "aliceblue", you don't have to use the colon, but you can. The color of the shadow is always the last thing you need to specify for setting the box shadow properties.
• width - This value specify's the box's width in pixels. This sets the CSS property width on the created div.
• height - This value specify's the box's height in pixels. This sets the CSS property min-height on the created div.

If you are familiar with HTML/CSS, here you can see how the resulting <div>, which abox creates, is constructed from the parameters passed into the BBCode.

Code: Select all

<div style="background-color: color-mix(in srgb, {COLOR1} calc({NUMBER1}*20%), transparent); padding: {SIMPLETEXT1};border: {SIMPLETEXT2};border-radius:{SIMPLETEXT3};box-shadow:{SIMPLETEXT4} {COLOR2};width:min({NUMBER2}px,97%);height:min({NUMBER3}px,97%);">{TEXT}</div>

Examples:

---

The first example is a box around the text content which just creates an inset border, and does some internal padding, nothing else. It's important to note here that the last two values, the width and the height need to be set in a particular way.

The width in the example below is set to 9999px. This forces the maximum available width to be used since the final width will be calculated in CSS as: min(9999px, 97%);. If you don't fully understand this, just know that you must set 9999 in order to get the abox to use all available width.

The height in the example below is set to 0. By setting it to 0, it will automatically take as much height as is needed. Most of the times, you will want 0. However, in case you want to force a specific height, just input some other number here and that pixel-height will be the new height unless your specified height is smaller than what the content needs.

Just an inset border.

Code: Select all

[abox="black:0;8px;2px inset white;none;unset:transparent;9999;0"][center]Just an inset border.[/center][/abox]

Let's break the above example down, the properties we pass into abox are: black:0;8px;2px inset white;none;unset:transparent;9999;0. We'll step through these one by one:

• black - sets the background color to black
• 0 - sets the opacity of the background color to 0%. So, we won't see the background color. This means that in our first parameter, where we wrote "black" we could have put any other color and it would not have mattered.
• 8px - This is our internal padding value.
• 2px inset white - This sets our border, the border style we picked here is inset which is what causes the pressed inward look.
• none - the border radius (the roundness of our borders) is set to none, we do not round the borders.
• unset:transparent - this will cause our box shadow not to show. Technically speaking this becomes invalid CSS and that is why the shadow doesn't show, but ultimately that doesn't matter. There are legitimate reasons why the box shadow settings are split into two, but this splitting into two halves is what causes technically incorrect CSS. For simplicity though: just write unset:transparent whenever you don't want a box shadow.
• 9999 - Causes the width to be the maximum available width available (depending on what element your abox is contained in, like a column or nested within another abox)
• 0 - When the height is set to 0 the automatically calculated height (depending on your content) will be used.