Styling the achievements special page

From Gamepedia Help Wiki
Jump to: navigation, search

The special page Special:Achievements, added by Extension: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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

Achievements style example.png