Help:Skin customization

The Hydra and mobile skins
The Hydra skin is a separate version of the Vector skin used on Wikipedia. By default, it looks essentially identical to Vector, though it has certain under-the-hood changes that make it more compatible with Gamepedia features. For example, in Hydra, the order of content in the actual HTML is similar to the way it appears on-screen, while in Vector, the content in the actual HTML is above elements like the sidebar and page tabs, even though they are rearranged on display. Note that because of these changes and some differences in the styles, customizations that work on Vector may not necessarily work correctly on Hydra. The mobile skin doesn't have any special name other than just mobile; you can see how it looks by either viewing the wiki on a mobile device or clicking the "Mobile view" link at the bottom of any page.

The wiki and personal stylesheets
Customizing or extending the skin is done through wiki pages that are loaded as stylesheets. The wiki stylesheets are loaded for every user, including anonymous users, but personal stylesheets are loaded only for the user that owns them, and only when logged in. Unless it is still early in your wiki's lifetime, any experimentation should be done on personal stylesheets first when practical. The relevant stylesheets are shown below:

'''Keep in mind that the links below link to pages here on the help wiki and will only affect styles here. The same page names are used on other Gamepedia wikis, however.'''

Note that personal styles (stored in the User namespace) are not loaded for special pages, like Special:Preferences or Special:BotPasswords.

Element identifiers
The identifiers of many of the page elements found in MediaWiki is on the MediaWiki CSS page. Note that this is not, by any means, a complete list as such a list would be huge, but it includes the identifiers of both elements that generally need to be changed in any customizations and those you may wish to change. When adding extensions, especially any that may be new to Gamepedia, you may find that its pages and features have styles that need to be customized. There are also recommends to help guide you as to what styles you may need on various elements.

Mobile view
The mobile view of the wiki does not include the left navigation bar.

When customizing the mobile skin for a wiki, keep in mind that this is for mobile viewing. Not everyone has unlimited data as part of their mobile plan, so keep images as small as possible. Generally speaking no one will be viewing the mobile view at a higher resolution than 1024×768, so having large images scaled small is only wasting their data usage, and will cause slow load times. A basic Mobile CSS template is available. If you'd prefer to start with one already customized, you can also copy this wiki's mobile stylesheet.

The mobile view functionality is provided by the MobileFrontend extension. More detailed information can be found in its documentation.

See also: Official MediaWiki main page mobile formatting guide

Advanced customization tips
While the Hydra skin simplifies Vector in some ways, it is still a complex skin using a number of positioning and layout techniques familiar to many web designers and developers, but not necessarily familiar to novices or hobbyists, and sometimes they aren't used in ways you'd expect. It often helps to know what's going on under the hood.

Browser extensions like Stylus (Chrome Firefox) let you edit CSS in your browser so you can test particularly experimental or difficult changes without having to spam Recent Changes with edits to your personal stylesheets.