The Statistics section on pet profiles is a really neat feature, and a creative use of an HTML unordered list. (Yes, those cool stat bars are essentially just a fancy list!) There are lots of things we can do to customize the section, and this post will be essentially a “code dump” for the stat bars.

To remove the entire Statistics section:

#column_3 {
display: none;
}

To remove the ‘Statistics’ header:

#column_3 h2 {
display: none;
}

To remove all stat bars except one (includes the labels):

ul#pet_stats li {
display: none;
}

ul#pet_stats li:nth-child(7) {
display: block;
}

For this code (above), it begins by removing all of the stat bars as a group (display: none). You then override that by re-adding the stat you want to show up (display: block). There are 7 items in the list of stats, so just replace the number in nth-child(#) with the one you want to show up. (The example code, using 7, will show the Intelligence stat, because it is the 7th in the list.) If you want to show more than one of the stats, just keep adding the code for ul#pet_stats li:nth-child(7) and replacing the number. NOTE: this code does not work in Internet Explorer.

To hide the labels for each stat bar (the part that says “Level: 2″ etc):

ul#pet_stats li {
text-indent: -9999px;
}

To hide the stat bars themselves but keep the labels:

div.statbar {
display: none;
}

To customize the styling and colours of the stat bars:

div.statbar {
border: 1px solid #000000;
background: #ffffff;
height: 25px;
width: 200px;
}

div.statbar div.stat {
background: #000000;
height: 25px;
}

The .statbar div is the outer portion of the bar, which by default appears as a white box with a one pixel border around it. The .stat div is the interior portion – the part that actually indicates the percentage of that statistic. By default it appears as a colour-filled box inside the .statbar div. The code above allows you to change the colours and sizing of the stat bars; you can omit any parts you don’t need. NOTE: do not alter the width of the .stat div as this would alter the visual percentage of the pet’s stats.

If you liked this post, check out the pet profile reset code!

Have any requests for other stat bar customizations I can add to this post? Have questions or comments? As usual, comment on this post!