Common skinning problems

From Gamepedia Help Wiki
Jump to: navigation, search

List bullet colors[edit | edit source]

Image file page transparency checkerboard[edit | edit source]

Sort arrows for sortable tables[edit | edit source]

Watchlist add/remove and page save confirmation pop-ups[edit | edit source]

Achievements[edit | edit source]

Preferences[edit | edit source]

Styling the wiki editor[edit | edit source]

Recoloring the search box magnifying glass[edit | edit source]

The following css and associated dataurl changes the color of the magnifying glass icon on the Search results page from dark gray to white:

#simpleSearch #searchButton {
    background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22 width=%2212%22 height=%2213%22%3E %3Cg fill=%22none%22 stroke=%22%23fffff%22 stroke-width=%222%22%3E %3Cpath d=%22M11.29 11.71l-4-4%22/%3E %3Ccircle cx=%225%22 cy=%225%22 r=%224%22/%3E %3C/g%3E %3C/svg%3E")

The color of the magnifying glass can be customized by locating stroke=%22%23fffff%22 in the above code and changing ffffff to the desired color's hex code.

Hiding the main page title[edit | edit source]

For most wikis, this is as easy as adding the following to the main page: __NOTITLE__

The above requires the extension Extension:NoTitle, which is installed by default on Gamepedia wikis created since 2019.

CSS can be used as an alternative: h1.firstHeading {

However, some wiki names contain apostrophes or colons or other characters which cause this to fail. To find out the exact syntax you need for the main page title, simply right click on the main page of the wiki and choose "View Page Source", then search for the following string:

ns-0 ns-subject page-

Whatever follows that is what you need to use to specify your main page.

Coloring of some default templates[edit | edit source]

The following templates may or may not look right with the wiki skin you have created and should be checked, especially on dark-themed wikis:

Crisp pixel images[edit | edit source]

This is helpful for pixel games that need crisp upsized pixel images. This is used on Enter the Gungeon Wiki.

img {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: pixelated;