Gamepedia Help Wiki
Don't have an account?
Register
Register
Gamepedia Help Wiki
Gamepedia Help Wiki
361
pages
in: Pages using DynamicPageList3 parser function, Advanced help
English

Changes: Styling the achievements special page

Back to page
Sign in to edit
No edit summary
(+TR)
 
(5 intermediate revisions by one other user not shown)
Line 1: Line 1:
 
{{css nav}}
  
{{css nav}}
  +
{{tocright}}
−
Sometimes the default styling for the [[Special:ManageAchievements|special achievements page]] does not work well with a custom wiki skin. The following css can be used (or adapated) to work better:
  
  +
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.
  +
{{clear}}
  +
== Selector guide ==
  +
{| class="wikitable mw-collapsible mw-collapsed" style="width:100%;"
  +
|-
  +
!Selector
  +
!Description
  +
!Recommendations
  +
|-
  +
|<syntaxhighlight lang=css>.mediawiki #p-achievement-list</syntaxhighlight>
  +
|The container for the entire achievement list, including the achievement category tabs.
  +
|
  +
|-
  +
|<syntaxhighlight lang=css>#achievement_categories</syntaxhighlight>
  +
|The container for the achievement category tabs.
  +
|
  +
|-
  +
|<syntaxhighlight lang=css>#achievement_categories .achievement_category_select</syntaxhighlight>
  +
|Each individual category tab.
  +
|
  +
|-
  +
|<syntaxhighlight lang=css>#achievement_categories .achievement_category_select.begin</syntaxhighlight>
  +
|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 <code>border-top-left-radius</code>
  +
|-
  +
|<syntaxhighlight lang=css>#achievement_categories .achievement_category_select.end</syntaxhighlight>
  +
|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 <code>border-top-right-radius</code>
  +
|-
  +
|<syntaxhighlight lang=css>.mediawiki #achievement_categories .achievement_category_select.end, .mediawiki #achievement_categories .achievement_category_select:last-child</syntaxhighlight>
  +
|A special selector for both of the rightmost tabs.
  +
|
  +
* This has a <code>border-right</code> 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.
  +
|-
  ⚫
|<syntaxhighlight lang=css>#achievement_categories .achievement_category_select[data-selected="true"]</syntaxhighlight>
  +
|The currently selected category tab.
  +
|
  +
|-
  +
|<syntaxhighlight lang=css>.mediawiki .achievement_category</syntaxhighlight>
  +
|The container for the currently shown achievement list.
  +
|
  +
|-
  +
|<syntaxhighlight lang=css>.achievement_category .p-achievement-row</syntaxhighlight>
  +
|Each individual achievement in the list.
  +
|
  +
|-
  +
|<syntaxhighlight lang=css>.achievement_category .p-achievement-row.earned</syntaxhighlight>
  +
|Selector for earned achievements.
  +
|
  +
* Unearned achievements simply take on the style from <code>.achievement_category .p-achievement-row</code>
  +
|-
  +
|<syntaxhighlight lang=css>.p-achievement-row .p-achievement-icon > img</syntaxhighlight>
  +
|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 <code>[https://developer.mozilla.org/en-US/docs/Web/CSS/filter filter]</code> CSS property.
  +
|-
  +
|<syntaxhighlight lang=css>.p-achievement-row .p-achievement-progress .progress-background</syntaxhighlight>
  +
|The achievement progress bar.
  +
|
  +
* Use this selector to style the container for the bar. The actual current progress level can be styled using <code>.p-achievement-progress .progress-bar</code>.
  +
|-
  +
|<syntaxhighlight lang=css>.p-achievement-progress .progress-bar</syntaxhighlight>
  +
|The progress level inside the achievement progress bar.
  +
|
  +
* You may change the color of the current achievement progress by changing the <code>background</code> and <code>border</code> of this selector.
  +
|}
   
  +
== Sample CSS ==
−
<pre>
  
  +
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.
⚫
#p-achievement-list {
  
  +
<syntaxhighlight lang=css style="max-height:40em;overflow:auto;">
−
background: none repeat scroll 0 0 rgba(255,255,255,0.2);
  
  +
/**** ACHIEVEMENTS ****/
  +
/* background for entire achievements list */
  ⚫
.mediawiki #p-achievement-list {
  +
background: #4f3169;
 
}
  
}
   
  +
/* border for achievement category tabs */
⚫
.achievement_category {
  
  ⚫
#achievement_categories .achievement_category_select {
−
background: none repeat scroll 0 0 transparent;
  
  +
border-color: #9b61cf;
 
}
  
}
   
  +
.mediawiki #achievement_categories .achievement_category_select.end,
⚫
.achievement_category_select {
  
  +
.mediawiki #achievement_categories .achievement_category_select:last-child {
−
background: none repeat scroll 0 0 rgba(255,255,255,0.1);
  
  +
border-color: #9b61cf;
 
}
  
}
   
  +
/* background for current achievement category tab */
⚫
.achievement_category_select[data-selected="true"] {
  
  +
#achievement_categories .achievement_category_select[data-selected="true"] {
−
background: none repeat scroll 0 0 rgba(255,255,255,0.3);
  
  +
background: #9b61cf;
 
}
  
}
   
−
.p-achievement-row {
 +
/* border for achievement list */
  ⚫
.mediawiki .achievement_category {
−
background: none repeat scroll 0 0 rgba(255,255,255,0.1);
  
−
color: #000000;
 +
border-color: #9b61cf;
 
}
  
}
−
</pre>
  
   
  +
/* 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;
  +
}
  +
</syntaxhighlight>
  +
  +
=== Result ===
  +
[[File:Achievements style example.png|class=scalable]]
 
[[Category:Advanced help]]
  
[[Category:Advanced help]]
  +
−
[[Category:Wiki team]]
  
  +
[[tr:Başarılar özel sayfasını şekillendirme]]

Latest revision as of 07:11, 28 April 2020

v·t·e
Wiki skins & CSS
 Skin tips & tricks
Skin components
Styling the achievements special page
Common skinning problems
Extension style considerations

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

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

Achievements style example

Türkçe
Community content is available under CC BY-NC-SA unless otherwise noted.