Help:Styling the achievements special page

Wiki skins & CSS
Introduction • MediaWiki CSS guide • Mobile skin guide
Skin tips & tricks
Skin components	Styling the achievements special page
Common skinning problems	Changing the color of bullets • Changing the color of the transparency checker pattern • Changing the color of table sort arrows • Changing colors in dynamic notifications
Extensions styling	FlaggedRevs•MultimediaViewer

The special page Special:Achievements, added by Help:Cheevos (default on all Gamepedia wikis), lists a user's achievements and achievement progress. Some wikis may wish to to re-style this page to better match the wiki's skin.

Selector guide

Selector	Description	Recommendations
.mediawiki #p-achievement-list	The container for the entire achievement list, including the achievement category tabs.
#achievement_categories	The container for the achievement category tabs.
#achievement_categories .achievement_category_select	Each individual category tab.
#achievement_categories .achievement_category_select.begin	A special selector for the far top left tab, used to add a rounded corner on the container.	Rounded corner can be adjusted by changing border-top-left-radius
#achievement_categories .achievement_category_select.end	A special selector for the far top right tab, used to add a rounded corner on the container.	Rounded corner can be adjusted by changing border-top-right-radius
.mediawiki #achievement_categories .achievement_category_select.end, .mediawiki #achievement_categories .achievement_category_select:last-child	A special selector for both of the rightmost tabs.	This has a border-right set separately from the borders on the rest of the tabs. If you wish to change the border on the other tabs, you'll have to change this separately as well.
#achievement_categories .achievement_category_select[data-selected="true"]	The currently selected category tab.
.mediawiki .achievement_category	The container for the currently shown achievement list.
.achievement_category .p-achievement-row	Each individual achievement in the list.
.achievement_category .p-achievement-row.earned	Selector for earned achievements.	Unearned achievements simply take on the style from .achievement_category .p-achievement-row
.p-achievement-row .p-achievement-icon > img	The icon in each achievement row.	This has a grayscale filter applied by default that is overrided on earned achievements. While it is probably not necessary to change this, it can be adjusted by changing the filter CSS property.
.p-achievement-row .p-achievement-progress .progress-background	The achievement progress bar.	Use this selector to style the container for the bar. The actual current progress level can be styled using .p-achievement-progress .progress-bar.
.p-achievement-progress .progress-bar	The progress level inside the achievement progress bar.	You may change the color of the current achievement progress by changing the background and border of this selector.

Sample CSS

The following is sample code for a simple recolor of the achievements page. You may wish to change the colors in the CSS to match your wiki theme.

/**** ACHIEVEMENTS ****/
/* background for entire achievements list */
.mediawiki #p-achievement-list {
	background: #4f3169;
}

/* border for achievement category tabs */
#achievement_categories .achievement_category_select {
	border-color: #9b61cf;
}

.mediawiki #achievement_categories .achievement_category_select.end,
.mediawiki #achievement_categories .achievement_category_select:last-child {
	border-color: #9b61cf;
}

/* background for current achievement category tab */
#achievement_categories .achievement_category_select[data-selected="true"] {
	background: #9b61cf;
}

/* border for achievement list */
.mediawiki .achievement_category {
	border-color: #9b61cf;
}

/* recolor earned achievement */
.achievement_category .p-achievement-row.earned {
	border-color: #7f4fa8;
	background: rgba(127, 79, 168, 0.2);
}

/* recolor achievement progress bar */
.p-achievement-row .p-achievement-progress .progress-background {
	border-color: #7f4fa8;
}

/* recolor achievement progress bar progress level */
.p-achievement-progress .progress-bar {
	border-color: #7f4fa8;
	background: #b873f5;
}

Result