[SUP]ERSTARS
[SUP]ERSTARS

Advanced BBCode Hacks
Advanced BBCode Hacks
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅

DISCLAIMER: As with a lot of aesthetics that use sups and subs to cause overlap, some of the tips here may fuck up the formatting on some mobile devices. This guide was tested on an Android phone and looks fine, but YMMV. There may also be differences between Google Chrome and Firefox (and other browsers).

▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅

1. Centred "Dropshadows"
1. Centred "Dropshadows"

As you may have noticed, the guild is not like other forums in its BBCode. Which is to say, it is functional* but lacking in depth. Many other forums have the text-glow command or something like it which allow users to produce dropshadows on text – useful to make headers pop on the dark grey background.


We can't make a proper dropshadow on the Guild (as far as I know) but with judicious use of sup, sub, and header codes, we can manage a good approximation. Here's the code:

[center]
[sup][h2]
[color=black]dropshadow [/color]
[color=555151]dropshadow[/color]
[/h2][/sup]
[/center]

Simple, right? This should be plug-and-go, but here's how it works, because this is a base for everything else in the guide:

  • [center] – Self-explanatory, but this code only works for centred dropshadows. See next section for lefties.

  • [sup][h2] – The bit that causes it to work. The[sup]or[sub]must be on the outside of the header [h2]. This works by forcing all of the following lines of text into one line, causing it to overlap (because uhhh Guild code).

  • [color=black]dropshadow [/color] – Your shadow layer. Make sure the text matches what is in step 4, but add a space after the last letter. This space shifts it out of alignment, providing a shadow on the left side.

  • [color=555151]dropshadow[/color] – The last line of code will always end up on top of the previous, so this is your coloured text layer. Go mad with that hex, but make sure the text matches.

  • [/h2][/sup][/center] – Closing tags. In my experience, where most of the errors occur.

▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅

2. Left-Aligned "Dropshadows"
2. Left-Aligned "Dropshadows"

Okay, when I said the code from Part 1 wouldn't work for left-aligned dropshadows, it was maybe an exaggeration. The code is almost identical minus the use of[center]and the only difference is where we put the spaces.

So, since left-aligned text is flush with the boundaries, we don't need to bump the shadow layer on the right-hand side, we just need to bump the top layer on the left. Let's try that:

[sup][h2][color=black]failed dropshadow[/color]
[color=555151] failed dropshadow[/color][/h2][/sup]

Oh. Uh. Something isn't quite right.


The code is fine here. It should work. The problem with left-aligned drop-shadows is that the standard space is too big and leaves a gap between the letters. To fix this, we can use Unicode spaces which vary in width. This website is a good resource for the spaces in question, easy to copypaste from. Using the "hair-space" from this page, the code would be:

[sup][h2][color=black]dropshadow[/color]
[color=555151] dropshadow[/color][/h2][/sup]

And what we get is:


▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅

3. Like an Onion, Layered
3. Like an Onion, Layered

So, you can make dropshadows with the combination of[sup]or[sub]on the outside of any header tag, eg.[h1]– but this code can be used to do other things, too. This section will be less how things work and more a list of things that somehow work using the above as a template.

A. Different Coloured Underline (Two Ways)
all business
all business

[sup][h3][color=black][u]all business[/u][/color]
[color=555151]all business[/color][/h3][/sup]

_________
pretty in pink

[sup][h3][color=ab5c81][b]_________[/b][/color]
[color=c58ea8]pretty in pink[/color][/h3][/sup]

B. Fancy Dividers
[center][sup][h1][sup][color=black]  [b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][/color]   [/sup]
 [sup][color=181818][b]▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅[/b][/color] [/sup][/h1][/sup][/center]

C. Dropshadows from a Different Angle
[sup][h2][sup][color=black][b]mossrights[/b][/color][/sup]
 [sup][color=555151][b]mossrights[/b][/color][/sup][/h2][/sup]

There are a lot more things you can do with these than are listed here, so I would recommend experimenting!

▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅

The End
The End

Thanks for reading – I hope someone can get some use out of these! If you have any questions, please comment below or PM them to me and I will answer to the best of my ability.

A Part 2 about text wrap, tables and how to get rid of those pesky white lines will be coming soon, so stay tuned!