Tutorial BBCode CSS Injection

[Lyro]

Some BBCodes on RPNation do not perform complete sanitization of user input. This can be used to inject CSS into some items that couldn't be replicated through use of the DIV tag.

CSS Properties Injection
The following tags can have additional CSS properties added:

• PROGRESS
• THINPROGRESS
• CENTERBLOCK
• BG
• BORDER
• HEIGHTRESTRICT
• SCROLL

There is little point to this for CENTERBLOCK, BG, BORDER, HEIGHTRESTRICT and SCROLL[/LIST][/FONT], since their behavior can be easily replicated using DIV. However, PROGRESS and THINPROGRESS can be modified to create slightly different progress bars. Here's an example of two red and blue progress bars, which have been inverted:

Red progress bar

[PROGRESS=50% - 6px); background-color: red; margin-left: calc(50% + 2px); width: calc(50]Red progress bar[/PROGRESS]

Red progress bar

[THINPROGRESS=50%; background-color: blue; margin-left: 50%; width: 50]Red progress bar[/THINPROGRESS]

The idea is to close the CSS property that was supposed to be the only one there, add your additional properties, and then re-open the initial CSS property (or an equivalent one).

CSS Classes Injection
The following tags can have additional CSS classes added:

• H
• SH
• DIVIDE
• IMAGEFLOAT
• SIDE
• ROW
• PRINT
• MESSAGE
• BLOCK
• MAIL
• CHECK
• FA

This has a rather niche use, since you can't define your own classes. But you can re-use classes from the site's current theme. As an example, this is a modified DIVIDE using the default theme's primary button class (I haven't tested it on the other themes):

Visit my profile

The idea here is to finish up the class it was expecting, then append your own classes.