how to add several ranks?

Go to your Administration Panel -> Users & Groups -> Ranks --> Rank administration Add new rank

Past the following ranks and save

Code:

<span class="stf">Staff Member</span><span class="ad">Administrator</span><span class="md">Moderator</span>

Then you can style it with css

Code:

.stf, .ad, .md {
  display: block;
  background: #edf6fd;
  border-radius: 3px;
  margin: 5px auto;
  border: 1px solid #bcdef5;
  padding: 4px 8px;
  width: 100px;
  text-align: center;
}
.stf {
  color: #666;
  background: #fbeeed;
  border: 1px solid #f7d8dd;
}
.md {
  background: #6ba65e;
  border: 1px solid #59974b;
  color: #fff;
}