== Refactor HTML ==
This is what generated HTML looks like:
```lang=html
<div class="top-users">
<div class="top-fan-row">
<div class="top-fan-level">
Legendary Brickipedian
</div>
</div>
<div class="top-fan-row">
<span class="top-fan-num">1.</span>
<span class="top-fan">
<img src="http://images.brickimedia.org/avatars/global_66_m.jpg?r=1461762052" alt="avatar" border="0">
<a href="http://en.brickimedia.org/wiki/User:NovaHawk">NovaHawk</a>
</span>
<span class="top-fan-points">
<b>55,221</b> points
</span>
<div class="visualClear"></div>
</div>
</div>
```
[] Remove emptyElement (element with class 'visualClear' that has `clear: both;`): First off, elements are meant for content, not for presentation! That's what HTML is all about. If we want to show more separation between each row, we can use `margin`.
[] Convert `.top-users` to `<section>` element
[] Convert each `.top-fan-row` to `<li>` element and rename to `.top-users-list-person`
[] Convert `.top-fan-level` to `<h2>` element
[] For each different level, there should be a `<section>` to imply that there are different sections. Currently, you just see a bunch of divs with no clear differentiation :(
[] Also rename selectors to some saner names
[] Add some data-* attributes for sane customisability.
[] Move `border="0"` to CSS --> `border: 0;`
What the generated HTML could look like instead:
(we're using ul since using the `<ol>` wouldn't work, so just add `list-style: none;`)
```lang=html
<section class="top-users">
<section class="top-users-level-section" id="level-Legendary-Brickipedian" data-top-users-level="Legendary Brickipedian">
<h2>Legendary Brickipedian</h2>
<ul class="top-users-list">
<li class="top-users-list-person" data-top-fan-person="Person">
<span class="top-fan-rank" data-top-fan-rank="1">1</span>
<span class="top-fan-person">
<img src="" alt="avatar">
<a href="" title="Person">Person</a>
</span>
<span class="top-fan-points">
<span class="points" data-top-fan-points="84,329">84,329</span>
</span>
</li>
<!-- continue generating <li>s -->
</ul>
</section>
<!-- continue generating <section>s -->
</section>
```
----
== Redesign Special:TopUsers ==
**WIP**
== Highlight own rank ==
A person's own rank should be highlighted so that they can find it easily :)
=== Add CSS for top 3 people ==
There should be some CSS in TopUsers to customize the top 3 (gold, silver, bronze) which could look like this:
```lang=css
/* gold */
.top-users-level-section:nth-child(1) .top-users-list:nth-child(1) {
}
/* silver */
.top-users-level-section:nth-child(1) .top-users-list:nth-child(2) {
}
/* bronze */
.top-users-level-section:nth-child(1) .top-users-list:nth-child(3) {
}
```