Click to open network menu
Join or Log In
Mobafire logo

Join the leading League of Legends community. Create and share Champion Guides and Builds.

Create an MFN Account






Or

MOBAFire's first Mini Guide Contest is here! Create or update guides for the 30 featured champions and compete for up to $200 in prizes! 馃弳
's Forum Avatar

BBCode for "LoL wiki style" ability...

Creator: MHLoppy June 19, 2022 11:20am
MHLoppy
<Member>
MHLoppy's Forum Avatar
Show more awards
Posts:
3
Joined:
May 17th, 2013
Permalink | Quote | PM | +Rep June 19, 2022 11:20am | Report
Hi all

A while back I was porting my well-liked Olaf guide after LolKing shut down. Eventually circumstances changed and I decided not to complete the work on porting it. One specific formatting thing which I worked quite hard on was these ability layouts:
Reckless Swing 路路路TARGET RANGE: 325路路路COST: [30% of damage] HEALTH路路路COOLDOWN: 11 / 10 / 9 / 8 / 7

ACTIVE: Olaf deals true damage to the target enemy.

Reckless Swing heals Olaf for its health cost if it kills its target and its cooldown is reduced by 1 second every time Olaf lands a basic attack.
TRUE DAMAGE:
70 / 115 / 160 / 205 / 250 (+ 50% AD)
Technical details
Usage notes
View on LoL Wiki

This layout isn't quite the same as what the LoL wiki uses anymore (my guide was being ported a few years ago, so is a bit out of date formatting-wise), but they'll probably still feel familiar for those who've used the wiki in the past. I also obviously made some minor changes to it.

The general idea is to split each ability into three parts:
  • The core information
  • Additional objective, factual details, including a "gif-like" video previewing the ability (all nested in a spoiler to avoid information overload)
  • Additional subjective advice/tips (all nested in a second spoiler to avoid information overload

I then also included a link to the LoL wiki page for each ability in the bottom-right of the template box. For the "highlight" text colors, I copied what was being used by the LoL wiki at the time (you can check what's being used on the page for your champion).

Had I completed them, the usage notes would probably be using the same dot-point format as the technical details.

I also made a template for a detailed matchups section:
Aatrox
Even
Variance:
Moderate
Key points:
This is the first point in the list.
A second point in the list might make sense, but you should check to see whether it needs it.
Using a third point might round things out, or it might drag things too long.
Show full notes
Lee Sin
Favorable
Variance:
Moderate
Key points:
This is the first point in the list.
A second point in the list might make sense, but you should check to see whether it needs it.
Using a third point might round things out, or it might drag things too long.
Show full notes

This allowed the in-built matchups section at the top to serve as a brief and more general summary, while a dedicated matchups section honed in on details on just lane matchups.

The main data points in my template are:
  • Matchup difficulty, using color-coded text and a color-coded stripe on the left side of the matchup entry.
  • Matchup variance, which was intended to cover 1) matchup volatility (if one player gets one kill, how much does that change the matchup?), 2) variance between good/bad players playing the enemy champion in the matchup, and 3) enemy build variance (e.g. AD vs AP vs tank etc builds).
  • The most important information for playing the matchup in lane (especially early during early laning) visible outside of a spoiler. This could include information such as how to trade in lane, power spikes you can use / power spikes to be careful of, good tech items etc. It could include any specific advice about how to play when you're a specific level (e.g. level 1).
  • Additional matchup advice nested in a spoiler to prevent information overload. In particular, this could discuss how each of you scale during the game - how each champion performs in a split-pushing role vs team-fighting role, how to itemise past early laning phase etc.

Notice also how the left section's background is slightly lighter to subtly guide the viewer's attention and improve information layout.

Although I didn't 100% finalise what color coding I was using, the last time I worked on the guide I was using:
  • Highly Unfavorable (FF1000)
  • Unfavorable (FF7400)
  • Even (FFD800)
  • Slightly Favorable (8BEA25) - I personally only used this for one very specific matchup, as I don't think it's worth overloading the reader with too much nuance in the high-level view by making "slightly favorable" a normal distinction to make.
  • Favorable (64D820)
  • Highly Favorable (00A5FF)
  • Unique Matchup AND Just Reworked (F2F2F2) - the "unique matchup" was specifically to provide matchup advice on the Yi+Taric funnel lane, as this was a common strategy towards the end of writing the guide.
  • Insufficient Data (808080) - there are some matchups I felt were prominent enough to include (people would ask for them if they weren't), but which I didn't have enough information to rate the matchup and provide adivce on yet. The idea was that for matchups marked with this I would eventually gain enough data from playing to fill them out at a later time.

Remember that these colors will contrast differently depending on the background color (here on the forums the contrast is higher in this section outside of the template box, but they were originally chosen with the contrast found in the template box.

One thing to watch out for is that using this template can make a matchups section quite long. I personally thought this was an acceptable tradeoff, but it's worth keeping in mind if you want to cover lots of matchups.

Feel free to use and/or modify these templates with a brief credit to me.

Since I'm no longer working on guidewriting I can't offer additional BBCode support for using or modifying these, but it should be fairly straightforward to see where each bit of text ends up based on the sample text. Obviously they take a bit more work to use than most layouts, but I think for a major/detailed guide the end result may be worthwhile given how great it looks. Enjoy!

Ability layout (note this is for one ability, so you'll need one for each ability)
Code:
[table bgcolor=#061E36 padding=10] [tr] [td colspan=3][table][tr][td][color=#9797fc][size=5][b]Reckless Swing[/b][/size][/color][/td] [td padding=5][color=#061E36]路路路[/color][b][color=#9797fc]TARGET RANGE:[/color] 325[/b][color=#061E36]路路路[/color][b][color=#9797fc]COST:[/color] [color=#C03300][30% of [color=#F9966B]damage[/color]] HEALTH[/color][/b][color=#061E36]路路路[/color][b][color=#9797fc]COOLDOWN:[/color] 11 / 10 / 9 / 8 / 7[/b][/td] [/tr][/table][/td][/tr] [tr] [td colspan=3][rule][/td] [/tr] [tr] [td vertical-align=top width=80][center][img=https://i.imgur.com/QmTT5s4.png][/center][/td] [td vertical-align=top padding=5][b]ACTIVE: Olaf[/b] deals [color=#F9966B]true damage[/color] to the target enemy. [i]Reckless Swing[/i] heals [b]Olaf[/b] for [color=#C03300]its health cost[/color] if it kills its target and its cooldown is reduced by 1 second every time [b]Olaf[/b] lands a basic attack.[/td] [td width=200][table padding=5][tr][td colspan=2 padding=5 bgcolor=#041526][color=#BBBBFF][b]TRUE DAMAGE:[/b][/color][/td][/tr] [tr][td width=5][/td][td width=200 padding=5]70 / 115 / 160 / 205 / 250 [color=#FFA500](+ 50% AD)[/color][/td][/tr][/table][/td] [/tr] [tr] [td][/td][td colspan=2][spoiler=Technical details][list][*]The cost of [i]Reckless Swing[/i] is always equal to 30% of the ability's total damage, causing the cost to increase slightly as Olaf's AD increases. This translates into the ability's cost being [color=#C03300]21 / 34.5 / 48 / 61.5 / 75 [color=#FFA500](+ 15% AD)[/color] Health[/color]. [*] [i]Reckless Swing[/i] will cost Health even if no damage is dealt by the ability (e.g. target is invulernable, or the ability is spell-shielded). This is the same way that mana-costing abilities function. [*] There's a small grace period after casting Reckless Swing where Olaf will still receive the health refund from killing the unit, even if Reckless Swing itself did not land the killing blow. There is typically enough time for just 1-2 basic attacks during this grace period, depending on how high Olaf's attack speed is. [*] [i]Reckless Swing[/i] can be cast at any health amount, but Olaf will never drop below 1 current health when casting it (effectively reducing the cost of the ability while at extremely low health, to the point of it being functionally free to cast if at 1 health). [*] [i]Reckless Swing[/i]'s health refund is considered healing, causing it to be affected by healing amplification (e.g. from [[Vicious Strikes]] and [[Spirit Visage]]). [*] [i]Reckless Swing[/i] will cancel mid-cast if Olaf loses sight of his target during its cast time. [*] If the target of [i]Reckless Swing[/i] greatly exceeds the ability's range while mid-cast, the cast will be cancelled. If done quickly enough, the target can for example [[Flash]] out of range. However, if done at the very end of the ability's cast time, even using Flash will not prevent Reckless Swing from completing. The exact timing and range values that result in the ability cancelling or completing its cast are unclear. [/list] [webm url=https://giant.gfycat.com/TimelyBothHoneycreeper.webm width=625][/spoiler][spoiler=Usage notes]usage1111!11![/spoiler][/td] [td][/td] [/tr] [tr] [td colspan=3 vertical-align=bottom][right][size=2][b]View on [url=https://leagueoflegends.fandom.com/wiki/Olaf#Reckless_Swing]LoL Wiki[/url][/b][/size][/right][/td] [/tr] [/table] [table] [tr] [td width=600 height=15 padding=0 bgcolor=#091120][/td] [/tr] [/table]


Matchup layout (note this is for one box, so you'll need one of these for each matchup)
Code:
[table padding=0 bgcolor=#0E1B33] [tr] [td width=5 padding=0 bgcolor=#FFD800][/td] [td width=93 padding=25 bgcolor=#16294C][center][img=https://ddragon.leagueoflegends.com/cdn/9.16.1/img/champion/Aatrox.png width=70][/center] [center][color=#EAEAEA][size=4][b]Aatrox[/b][/size][/color][/center][/td] [td][table] [tr] [td width=8 padding=0][/td] [td width=106 padding=0][center][color=#FFD800][size=4][b]Even[/b][/size][/color][/center] [center][color=#0D182D]路[/color][/center] [center][color=#EAEAEA][size=4][b]Variance:[/b][/size][/color][/center] [center][color=#EAEAEA][size=4]Moderate[/size][/color][/center][/td] [td width=10 padding=0][/td] [td width=462 padding=5][b]Key points:[/b][columns] [nextcol width=5] [nextcol][b]鈥/b] This is the first point in the list. [b]鈥/b] A second point in the list might make sense, but you should check to see whether it needs it. [b]鈥/b] Using a third point might round things out, or it might drag things too long.[/td][/columns] [/tr] [tr] [td colspan=4 padding=0][spoiler=Show full notes][list][*]A first point begins here, and since there's more information in this section, each point is generally going to be longer on average. [*] In theory you could build AP against Akali, but I definitely wouldn't recommend it. You'll get lots of mind game points but she'll probably destroy you in the 1v1. [*] Consider adding a [[Null-Magic Mantle]] into your build either before finishing BC, or just after.[/spoiler][/td] [/tr] [/table] [/td] [/tr] [/table]

You need to log in before commenting.

League of Legends Champions:

Teamfight Tactics Guide