Styling the wiki logo

From Gamepedia Help Wiki
Jump to: navigation, search

The default placement of the wiki logo is above the left navigation menus at the top left corner of the screen. The area allotted to the logo is 160x160px. Larger logos can be used but no logo should ever be wider than 720px, and even that is discouraged. Logos should also not be too tall and should be kept below 200px in height.

Drop-shadow[edit | edit source]

Sometimes a wiki's logo can be difficult to see on a given background. One way to make it stand out is to add a drop-shadow:

#p-logo img,
#p-logo a img {
    background: rgba(0,0,0,0);
    -webkit-filter: drop-shadow(0px 0px 10px #999999);
    filter: drop-shadow(0px 0px 3.5px #999999) drop-shadow(1px 1px 1px #999999);
}

The shadow is a medium-dark grey in this example, but any colour could be used.

Centering[edit | edit source]

Sometimes the logo lends itself better to being placed above the main content area and centered.

#p-logo,
#p-logo a {
   height: <height of the logo image>;
   width: <width of the logo image>;
}

#p-logo {
   left: 50vw;
   margin-left: -<half the width of the logo image>;
}

This also usually requires that the content area div#content be moved down to accommodate the logo.

[edit | edit source]

Sometimes a larger logo is more preferred than the typical 160x160 size. By default, MediaWiki will not resize the image and will cut off any image larger than 160x160.

The following code would allow any size logo, within reason to be visible in the logo area. Keep in mind, skin images should not be large in file size (e.g. any logo at larger than 200KB may be a bit much).

.mw-wiki-logo {
   background-size: contain;
}