Wiki skins & CSS |
---|
| | |
Skin tips & tricks |
---|
| Skin components |
Help:Styling the achievements special page |
---|
| Help:Common skinning problems | |
---|
| Help:Extensions style considerations | |
---|
|
|
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.
|
|
|
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[]
File:Achievements style example.png