Gamepedia Help Wiki
Register
No edit summary
mNo edit summary
(21 intermediate revisions by 12 users not shown)
Line 1: Line 1:
 
{{tocright}}
 
{{tocright}}
   
<center>[[File:Skincostumization.svg|400px]]</center>
+
<center>[[File:Skincustomization.svg|400px]]</center>
   
 
{{Warning|header=IMPORTANT!| ♦ Customizing a wiki's skin requires knowledge of [[wikipedia:Cascading style sheets|<span style="text-shadow: 1px 1px 0 #000000;">Cascading style sheets</span>]]. If you are not very familiar with CSS, it may be better to ask for help. You can request assistance on skin customization from Gamepedia staff. At the very least, experiment with your changes on your personal stylesheets as explained below rather than the wiki's stylesheets.
 
 
 
{{Warning|header=IMPORTANT!| ♦ Customizing a wiki's skin requires knowledge of [[wikipedia:Cascading style sheets|<span style="text-shadow: 1px 1px 0 #000000;">Cascading style sheets</span>]]. If you are not very familiar with CSS, it may be better to ask for help. You can request assistance on skin customization from Gamepedia staff. At the very least, experiment with your changes on your personal stylesheets as explained below rather than the wiki's stylesheets.''
 
 
<br>
 
<br>
♦ Changing the wiki stylesheets requires a special right, <tt>editinterface</tt>, normally tied to the admin group. You can experiment with changes on your personal stylesheets, but if you aren't an admin or in a special group with this right, you'll need to find someone with this right to add any changes to your personal stylesheets.''
+
♦ Changing the wiki stylesheets requires a special right, <code>editinterface</code>, normally tied to the admin group. You can experiment with changes on your personal stylesheets, but if you aren't an admin or in a special group with this right, you'll need to find someone with this right to add any changes to your personal stylesheets.
 
<br>
 
<br>
 
 
♦ There are some hard rules about portions of the wiki's layout that cannot be changed. Please visit [[Wiki design rules|<span style="text-shadow: 1px 1px 0 #000000;">Wiki Design Rules</span>]] for more info.
 
♦ There are some hard rules about portions of the wiki's layout that cannot be changed. Please visit [[Wiki design rules|<span style="text-shadow: 1px 1px 0 #000000;">Wiki Design Rules</span>]] for more info.
 
}}
 
}}
   
 
== The Hydra and mobile skins ==
 
The '''Hydra''' skin is a separate version of the Vector skin used on [[wikipedia:|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 ==
<br><br>
 
==The Hydra and mobile skins==
 
The '''Hydra''' skin is a separate version of the Vector skin used on [[wikipedia:Main Page|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:
 
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:
   
Line 38: Line 32:
 
|-
 
|-
 
|[[MediaWiki:Hydradark.css]]
 
|[[MediaWiki:Hydradark.css]]
|[[Special:MyPage/hydra.css|User:''Yourusername''/hydradark.css]]
+
|[[Special:MyPage/hydradark.css|User:''Yourusername''/hydradark.css]]
 
|Styles loaded for the dark-themed Hydra skin only. Most, if not all, of the styles should be added here.
 
|Styles loaded for the dark-themed Hydra skin only. Most, if not all, of the styles should be added here.
 
|-
 
|-
Line 46: Line 40:
 
|}
 
|}
   
  +
'''Note that personal styles (stored in the User namespace) are not loaded for special pages, like Special:Preferences or Special:BotPasswords.'''
==Element identifiers==
 
  +
 
== 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 as well as 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 what styles you may need on various elements.
 
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 as well as 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 what styles you may need on various elements.
   
==Mobile view==
+
== Mobile view ==
  +
{{Message|The below is legacy content. Gamepedia wikis now use FandomMobile which at present can only be modified by Wiki Representatives.|center}}
The mobile view of the wiki does '''not''' include the '''left navigation bar'''. It also does not allow for mobile editing.
+
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 1024x768, 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 [[MediaWiki:Mobile.css|this wiki's mobile stylesheet]].
+
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 1024x768, so having large images scaled small is only wasting their data usage, and will cause slow load times. A basic [[Mobile CSS|Mobile CSS template]] is available. If you'd prefer to start with one already customized, you can also copy [[MediaWiki:Mobile.css|this wiki's mobile stylesheet]].
 
The mobile view functionality is provided by the [http://www.mediawiki.org/wiki/Extension:MobileFrontend Mobile Frontend] extension. More detailed information can be found in its documentation.
 
 
===Main pages in mobile view===
 
====ID Attributes====
 
The Mobile Frontend extension automatically strips any content from the wiki's main page that is not tagged with an appropriate ID, so a main page will appear blank without any of these IDs except for the header and footer. Any ID starting with <code>mf-</code> will cause the element with that ID to appear on the mobile view of the main page. For example:
 
 
<nowiki>&lt;div id="mf-linksheader">Heading</div>
 
&lt;div id="mf-links">
 
*link1
 
*link2
 
*etc.
 
&lt;/div></nowiki>
 
 
This example will appear on the mobile page because of the IDs starting with <code>mf-</code>. Without those IDs, you wouldn't see that heading or list of links on the mobile view. Note that IDs should always be unique; for example, you should not use <code>mf-linksheader</code> twice on a page. Using the same ID twice can have unexpected results.
 
 
'''If an block to be included is in a wiki table''', you may put the ID attribute (id="mf-...") within the table's attributes spot rather than adding extra DIV tags. See the difference in this example from the history of this wiki's main page: <span class="plainlinks">[{{fullurl:Gamepedia_Help_Wiki|diff=4456&oldid=4296}} Main Page edit made by Cathadan, 23 Oct 2014]</span> (How '''not''' to do it on the left, a better way on the right)
 
 
====Title Attributes====
 
In some cases, headers aren't present in the original content to clearly denote each section and may look messy when converted to a mobile format. A title attribute may also be added, and it will be inserted as a <code>h2</code> header on the mobile view for each element so tagged. For example:
 
 
<nowiki>{| class="wikitable"
 
|colspan="2" id="mf-welcome"|<span style="font-weight:bold;font-size:200%">Welcome to my fantastic wiki</span>
 
|-
 
|id="mf-description"|
 
A longer lorem ipsum discreption about the game. To create a page, start search for it and then create it (see the help page for more info). If you are here by mistake, too bad!
 
|id="mf-links" title="Interesting parts of the wiki"|
 
* [[Lots]]
 
* [[Of]]
 
* [[Miscellaneous]]
 
* [[Links]]
 
|}</nowiki>
 
 
[[File:Mobile Format Screen Shot 2014-10-06 at 16.47.52.png|frame|Screenshot of mobile format]] On the front page it will render like this:
 
 
{| class="wikitable" style="width: 500px"
 
|colspan="2" id="mf-welcome"|<span style="font-weight:bold;font-size:200%">Welcome to my fantastic wiki</span>
 
|-
 
|id="mf-description"|
 
A longer lorem ipsum discreption about the game. To create a page, start search for it and then create it (see the help page for more info). If you are here by mistake, too bad!
 
|id="mf-links" title="Interesting parts of the wiki"|
 
* [[Lots]]
 
* [[Of]]
 
* [[Miscellaneous]]
 
* [[Links]]
 
|}
 
   
 
The mobile view functionality is provided by the [[mw:Extension:MobileFrontend|MobileFrontend]] extension. More detailed information can be found in its documentation.
And on mobile it will have an extra header to separate the sections.
 
   
  +
See also: [[mw:Mobile Gateway/Mobile homepage formatting|Official MediaWiki main page mobile formatting guide]]
====Closing Thoughts====
 
It is not necessary to tag every element. The focus should be on those elements that do the following:
 
# Define the purpose of the wiki
 
# Provide links to content
 
# Are suitable to quick reading
 
# Will format nicely on a mobile screen
 
   
 
== Advanced customization tips ==
See also: [https://www.mediawiki.org/wiki/Mobile_Gateway/Mobile_homepage_formatting Official MediaWiki main page mobile formatting guide]
 
  +
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 ([https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en Chrome] [https://addons.mozilla.org/en-US/firefox/addon/styl-us/ 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.
==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. Browsers extensions such as [http://addons.mozilla.org/en-us/firefox/search/?q=web+developer&appver=22.0&platform=windows Web Developer] and [http://addons.mozilla.org/en-us/firefox/addon/firebug/ Firebug] both provide features that can help you find what styles are being applied to specific elements. Browser extensions also often let you edit the 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.<br>
 
[http://www.w3schools.com Learn more about web development on w3schools.com !]
 
   
  +
== See also ==
  +
* [[Common skinning problems]]
  +
* [[:Category:Advanced help]]
 
* [https://w3schools.com Learn more about web development on w3schools.com]
  +
{{css nav}}
 
[[Category:Advanced help]]
 
[[Category:Advanced help]]
   
 
[[pl:Dostosowywanie skinów]]
 
[[pl:Dostosowywanie skinów]]
  +
[[tr:Görünüm özelleştirme]]
 
[[zh:皮肤定制]]
 
[[zh:皮肤定制]]

Revision as of 19:08, 2 April 2021

Skincustomization
IMPORTANT!
GP Nova ♦ Customizing a wiki's skin requires knowledge of Cascading style sheets. If you are not very familiar with CSS, it may be better to ask for help. You can request assistance on skin customization from Gamepedia staff. At the very least, experiment with your changes on your personal stylesheets as explained below rather than the wiki's stylesheets.


♦ Changing the wiki stylesheets requires a special right, editinterface, normally tied to the admin group. You can experiment with changes on your personal stylesheets, but if you aren't an admin or in a special group with this right, you'll need to find someone with this right to add any changes to your personal stylesheets.
♦ There are some hard rules about portions of the wiki's layout that cannot be changed. Please visit Wiki Design Rules for more info.


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.

Wiki stylesheet Personal stylesheet Description
MediaWiki:Common.css User:Yourusername/common.css Styles loaded for any skin. In case more skin choices are added later, this should be used only for styles that would be used in any skin except the mobile skin. These would generally only be certain basic layout or display styles like float or display. On some wikis, all of the custom styles used in wiki pages are added here.
MediaWiki:Hydra.css User:Yourusername/hydra.css Styles loaded for the light-themed Hydra skin only. Most, if not all, of the styles should be added here.
MediaWiki:Hydradark.css User:Yourusername/hydradark.css Styles loaded for the dark-themed Hydra skin only. Most, if not all, of the styles should be added here.
MediaWiki:Mobile.css User:Yourusername/mobile.css Styles loaded for the mobile skin. Styles from common.css are not loaded here, so any important styles will have to be duplicated here and possibly adjusted to fit the simpler mobile view.

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 as well as 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 what styles you may need on various elements.

Mobile view

WARNING:
GP Nova The below is legacy content. Gamepedia wikis now use FandomMobile which at present can only be modified by Wiki Representatives.

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 1024x768, 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.

See also