Gonna make a template specifically for wild Pokemon encounters! Other mods can use this too.



[div style="padding-left:15%;width:60%;font-family:VT323, Courier;text-align:justified;font-size:15px;"]

[div style="color:#039141;font-size:20px;"]A wild Pokemon appeared! [img src="https://archives.bulbagarden.net/media/upload/3/33/RSE_Grass.png" style="max-width:100%;"][img src="https://archives.bulbagarden.net/media/upload/3/33/RSE_Grass.png" style="max-width:100%;"][img src="https://archives.bulbagarden.net/media/upload/3/33/RSE_Grass.png" style="max-width:100%;"][/div]

TEXT

[hr]
OOC:

{Active Pokemon} uses {move}!

[b]{Pokemon 1}:[/b]
Status:
Stat changes:
Held item:

[div style="text-align:right;font-size:20px;color:#910308;"][img style="max-width:100%;" src="https://archives.bulbagarden.net/media/upload/9/9c/Moving_Pok%C3%A9_Ball.png"] [i]Capture on![/i][/div]

[/div]


Testing rules added by the style tag plugin. Note that the tags enabled by this plugin will not display correctly in the preview pane. This is because they're served via javascript, and must be parsed when the post is actually submitted. Utilise this thread or an old post and save edits to test.

For this reason, if you can actually see the plugin call tags, your browser is not rendering javascript correctly. You will need to whitelist both proboards.com and freeforums.net

Oh, and a quick note: some of these tags don't respect code tags so I'll be using the ancient method of just breaking the BBCode internally and posting them in plaintext. Sorry.

Using CSS with the attr tag


Usage:
There are two kinds of attr tag, the class tag and the style tag.
[attr="class","classname1;classname2"]
Will apply that class to the contents of whatever div it is wrapped in. Rather than wrapping content in an attr tag, as you may expect of BBCode, you must instead begin a div with the tag.

[attr="style","property1: value; property2: value"][/code]

Will apply those CSS rules to, again, the contents of whatever div it is wrapped in. Begin your div with attr="style" to apply that style to the whole div. Yes, you can use attr within a span as well, but remember to consider the rule constraints applied to spans in CSS (for example, no width property).

Note that if you use the style tag within a div, you must include all rules within the style tag. If you do the following:

[div style="background-color:blue"][attr="style","border:3px solid brown"]content[/div]

The attr="style" tag will completely overwrite the div style, which means you'll lose the blue blackground. You must therefore include background-color:blue in the attr="style" tag itself

Applying rules to classes with newclass
Or, how to actually use classes. While the attr="class" tag will give a div the necessary class, that in itself serves little purpose besides code organisation. In order to apply any rules to that class, you need to do

[newclass=.class]property3: value; property4: value[/newclass]

This will apply those CSS rules to everything you post on that page with that class. Yes, everything on the page. If you start a thread and define the .header class as having a bright pink background, then three posts down try to use the .header class for orange font, you're getting an orange header on a pink background. Classes should only be stored per-user and per-page, but I haven't tested it extensively.

Calling webfonts with the googlefont tag
[googlefont="Cutive Mono"][googlefont="open sans"]

If the font does not change part-way through the lipsum, your device is not rendering webfonts properly. Try whitelisting fonts.googleapis.com in anything that might be disallowing it. If you have noscript installed, make sure @web-fonts are NOT ticked in the Embeddings tab.

Usage:
Call for the font with [googlefont="font name"] Font names are not case-sensitive. Use the font with the standard [div style="font-family: font name"]content[/div]
[googlefont="Open Sans"][div style="font-family: open sans"] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/div]

Note:
Specifically when calling for a google font, it's important to remember that font names are Case Sensitive. The font name must be called in the exact manner it is written on the google page, capitalisation and all. Copy-pasting for more difficult to type names may be best.

However, in general, CSS/HTML is not case sensitive. You can call for "open sans", lowercase, in the font-family tag and it will work. But you must call for "Open Sans", so capitalised, in the googlefont tag, because as far as google's concerned, "Open Sans" and "open sans" are different.


On nospaces and break
Writing code that you'd rather space out with linebreaks for readability? Copying code from elsewhere and don't want to have to delete 100+ linebreaks? Are you just so familiar with HTML that ENTER being interpereted as a linebreak in the copy feels alien? Miss the <br> tag?

[nospaces] and [break] are for you.

If you use [nospaces] anywhere in a post, traditional linebreaks will not be parsed as newlines in the posted copy. Instead, you must manually insert linebreaks with [break] as needed. Quoting this post should illustrate my point - remove the [nospaces] tag, and post. It'll be a mess.

Gotten to the point of "OK I guess I'll just host the images myself" re: my wild encounter template.

[nospaces]







[newclass=".hover-target"]display: none;[/newclass]
[newclass=".hoverable a"]display: block;[/newclass]
[newclass=".hoverable a:hover + .hover-target"]display:block;[/newclass]
[newclass=".hover-parent:hover"]width:30% !important[/newclass]
[newclass=".hover-parent:hover ~ .content-variable"]width:67% !important[/newclass]
[newclass=".hover-parent,.content-variable"]-moz-transition: width 0.3s; transition: width 0.3s[/newclass]