Converting to hydradark

From Gamepedia Help Wiki
Jump to: navigation, search

Sometimes wiki admins simply want to provide an alternative dark skin for their wiki. Other times, a wiki should really be converted to hydradark because many infrequently used elements are not properly skinned.

When should a wiki be switched to hydradark?[edit | edit source]

Basically, this comes down to a single question: is most of the text on the wiki light/white on a dark background, or is it dark/black on a light background? If you have light text on a dark background, then you should switch to hydradark.

Switching over[edit | edit source]

When converting a wiki from hydra to hydradark, the first step is make sure hydradark is an option on the wiki. You can check this by looking at the Appearance tab of your preferences. If you see Hydradark listed there, then it is enabled. If you see only Hydra, ask your wiki manager to enable Hydradark for you.

The next step is to copy over [[Mediawiki:Hydra.css]] to [[Mediawiki:Hydradark.css]].

Once you have your starting version of [[Mediawiki:Hydradark.css]], make changes to the following sections:

As a general rule, if any styled element does not seem to be picking up changes you've made, try prepending .skin-hydradark to the selector, or using a more specific selector.

Sidebar[edit | edit source]

Any sidebar selectors that begin with #mw-panel.collapsible-nav ... should be changed to .skin-hydradark #mw-panel.collapsible-nav ....

If you style div#mw-panel div.portal div.body ul li a and div#mw-panel div.portal div.body ul li a:visited, you should add div#mw-panel div.portal div.body ul li a:link.

Preferences[edit | edit source]

Every selector that begins with .client-js #preftoc or .client-js #preferences (or on older wikis, #preftoc or #preferences) should be changed to .skin-hydradark #preftoc or .skin-hydradark #preferences.

If you don't want the orange/gold colour in the preferences section headings, explicitly style .skin-hydradark #preferences legend.

Wiki Editor[edit | edit source]

All selectors that begin with .wikiEditor should be changed to div.wikiEditor.

VectorTabs and anchors[edit | edit source]

The following selectors now govern the anchor colour for vectorTabs and the vectorMenu:

  • div#mw-head a
  • div#mw-head div.vectorTabs a
  • div#mw-head div.vectorMenu a
  • .vectorTabs li a span

If you style the tabs themselves, you may want to start with:

div.vectorTabs {
    background-color: rgba(0, 0, 0, 0);
    background-image: none;

Every selector that begins with div.vectorMenu should be changed to div#mw-head div.vectorMenu.

Tables[edit | edit source]

Every selector that begins with .wikitable should be changed to .skin-hydradark .wikitable. The same goes for table styling beginning with .TablePager and .mw-datatable.

If you have specified the background colour using only background and the choice of colour is not being applied, try using background-color instead.

If you style sort arrows for sortable tables, those styles need to have .skin-hydradark  prepended

Default templates styling[edit | edit source]

Make sure the templates are up to date. The most recent versions are in the Default Loadout wiki, and copy over the css from the Default Loadout wiki that goes with it (for the ambox styling, Visual Editors styling and the auto-selection of the correct colour of copyright image).

Other tweaks[edit | edit source]

  • .mw-code should be changed to .skin-hydradark .mw-code
  • .catlinks should be changed to #catlinks
  • .toc should be changed to div.toc and #toc should be changed to div#toc
  • .mw-search-profile-tabs should be changed to .skin-hydradark .mw-search-profile-tabs, as well as any other selectors beginning with .mw-search-profile...
  • In many instances background should be changed to background-color, particularly for table background colours
  • #filetoc should be changed to ul#filetoc

Mobile skin[edit | edit source]

There is no dark version of the mobile skin. If your wiki has only a dark theme, you can style the mobile skin to look dark, although it does initially load as a white theme. (See Dark mobile skin for a workaround).

If your wiki allows both a light and a dark theme, then you must simply choose one version of the mobile skin.

General notes[edit | edit source]

Look at hydradark.css (that's a copy of the master version, the one you are essentially overriding) and see if the selector you are using is specified there. If so, specify yours the same way, or more narrowly.