Help:FandomDesktop conversion guide

= New custom CSS / JS files = MediaWiki:Fandomdesktop.css and MediaWiki:Fandomdesktop.js

= Features that will change for both GP and Fandom wikis =

Tabber
.tabber class for the tabber container will remain. All other class names are removed and replaced with Fandom Design System classes: wds-tabs__tab for tabs and wds-tabs__contentfor tabs content.

Base layout

 * Migrating from GP wiki
 * the whole page container (with navigation) #pageWrapper can be now accessed by .resizable-container class, but navigation is now on the top of the page
 * there is now the main page wrapper with .page class which contains the content container and the right rail (if right rail is present, this element also contains .has-right-rail class)
 * there is now the main content container with .page__main class which contains page header, content, and the page footer
 * article content #content or .mw-body can be now accessed by #content id or .page-content class
 * page header can be accessed by .page-header class
 * page footer can be accessed by .page-footer class
 * right rail can be accessed by #WikiaRailWrapper id or .WikiaRail class
 * Migrating from Fandom wiki
 * the whole page container (with navigation) .WikiaPage can be now accessed by .resizable-container class
 * main page wrapper (with right rail) .WikiaPageContentWrapper can be now accessed by .page class (if right rail is present, this element also contains .has-right-rail class). It contains the content container and the right rail
 * main content container #WikiaMainContentContainer or .WikiaMainContentContainer can be now accessed by .page__main class. It contains page header, content, and the page footer
 * article content #content or .WikiaArticle can be now accessed by #content id or .page-content class
 * page header (accessed by #PageHeader or .page-header ) can be now accessed by .page-header class
 * page footer can be accessed by .page-footer class
 * right rail (accessed by #WikiaRailWrapper or .WikiaRail ) can now be accessed .right-rail-wrapper class

Visual changes

 * border around infobox container is added by default

title’s (.pi-title) and headers' (.pi-header) default background is set to accent color (--theme-accent-color) and font color is calculated dynamically and set to --theme-accent-label-color. For some customizations this may cause the header’s (or title’s) label to be illegible.

Recommended solution:

.portable-infobox {

--pi-secondary-background--label: #CUSTOM_HEADER_FONT_COLOR;

}

Changed markup for tabs

 * HTML markup for panel’s tabs and image collection’s tabs has changed completely, which means that no current customizations for the tabs is applied or supported.

Old markup for image-colection (simplified):





CAPTION









IMAGE OR VIDEO



New markup for image-collection (simplified):









CAPTION











IMAGE OR VIDEO

</a>

Old markup for panels (simplified):

<section class="pi-item pi-panel pi-border-color">

HEADER



<li class="pi-section-tab pi-section-active">

LABEL

</li>

</ul>

CONTENT

New markup for panels (simplified):

<section class="pi-item pi-panel pi-border-color wds-tabber">

HEADER

<div class="wds-tabs__wrapper">



<li class="wds-tabs__tab wds-is-current">

<div class="wds-tabs__tab-label">

LABEL

</li>

</ul>

<div class="wds-tab__content wds-is-current">

CONTENT

CSS variables available for Portable Infobox customization
.portable-infobox {

--pi-background: /* MAIN BACKGROUND COLOR */

--pi-secondary-background: /* TITLE AND HEADERS BACKGROUND COLOR */

--pi-secondary-background--label: /* TITLE AND HEADERS FONT COLOR */

--pi-border-color: /* BORDER COLOR */

}

Community background image
The new theme designer will provide some extended possibilities for customizing the appearance of the community background image. However, if you’re willing to port your existing CSS/JS customizations of the background there’s a new class name: .fandom-community-header__background.

= Features that will change in comparison to Oasis =

Galleries
Galleries on FandomDesktop will be based on the Mediawiki native gallery solution.

See https://www.mediawiki.org/wiki/Help:Images#Gallery_syntax.

There are two major changes in gallery syntax:


 * To determine gallery style you’ll need to use mode instead of type property. In order to ensure backward compatibility with all the galleries created on Oasis, type property will still be supported after the FandomDesktop rollout. However, it is encouraged to create new galleries using the new mode property.
 * Support for certain gallery properties will be discontinued. See below for full list:

element attributes
Additional notes:


 * Fandom gallery images are “frameless” by default, whereas MW gallery images are displayed in a thick frame. In order to preserve the same looks of a gallery, it has to be either handled by custom styling or mode="nolines" has to be added to all galleries as part of the migration.

= Features that will change in comparison to Hydra/HydraDark =

New gallery mode - slider
Gamepedia communities will now have a new slider gallery mode available.

Usage:

Slider gallery accepts one additional attribute named orientation, which accepts values bottom (default) or right and determines the position of the slider navigation.

= Theming variables = In the FandomDesktop skin, users will have access to variables representing theme colors. These variables will be accessible in CSS.

Example hex value: #ffffff

Example Red, Green, Blue color values: 0,0,0

Dynamic Colors
Dynamic colors are established on the basis of their background. They are calculated to reach the best contrast ratio possible.


 * dynamic-color-1 is fandom-black (#0E191A) for light backgrounds and white (#FFFFFF) for dark backgrounds.
 * dynamic-color-2 is dark grey (#3A3A3A) for light backgrounds and light grey (#E6E6E6) for dark backgrounds.

de:Hilfe:Leitfaden_zur_Vorbereitung_auf_FandomDesktop fr:Aide:Guide de préparation pour FandomDesktop it:Aiuto:Guida di preparazione a FandomDesktop ja:ヘルプ:FandomDesktop/準備ガイド