The FandomDesktop conversion guide is intended as a quick reference for converting older wikis from Oasis and Hydra skins to the current FandomDesktop skin.

Note: Admin Dashboard was enabled for Gamepedia wikis on FandomDesktop and can be accessed at Special:AdminDashboard.

New custom CSS / JS files

• MediaWiki:Fandomdesktop.css
• MediaWiki:Fandomdesktop.js

Neither MediaWiki:Wikia.css nor MediaWiki:Wikia.js will load on FandomDesktop. All custom coding needs to be moved to these new style sheets.

Feature changes

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

Community background image

The theme designer provides 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.

Portable infobox

Visual changes

• border around infobox container is added by default

Default background for titles (.pi-title) and headers (.pi-header) 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 label to be illegible.

Recommended solution:

.portable-infobox {
  --pi-secondary-background--label: #CUSTOM_HEADER_FONT_COLOR;
}

Changed markup for tabs

• HTML markup for panel and image collection tabs has changed completely, which means that no customizations for the tabs is supported.

Old markup for image-colection (simplified):

<div class="pi-image-collection">
  <ul class="pi-image-collection-tabs">
    <li class="pi-tab-link pi-item-spacing current">
      <span class="pi-tab-label">
        CAPTION
      </span>
    </li>
  </ul>

  <div class="pi-image-collection-tab-content current">
    <figure class="pi-item pi-image">
      <a class="image image-thumbnail">
        IMAGE OR VIDEO
      </a>
    </figure>
  </div>
</div>

New markup for image-collection (simplified):

<div class="pi-image-collection wds-tabber">
  <div class="wds-tabs__wrapper">
    <ul class="wds-tabs"> 
      <li class="wds-tabs__tab wds-is-current">
        <span class="wds-tabs__tab-label">
          CAPTION
        </span>
      </li>
    </ul>
  </div>
  <div class="wds-tab__content wds-is-current">
    <figure class="pi-item pi-image">
      <a class="image image-thumbnail">
        IMAGE OR VIDEO
      </a>
    </figure>
  </div>
</div>

Old markup for panels (simplified):

<section class="pi-item pi-panel pi-border-color">
  HEADER
  <div class="pi-panel-scroll-wrapper">
    <ul class="pi-section-navigation">
      <li class="pi-section-tab pi-section-active">
        <div class="pi-section-label">
          LABEL
        </div>
      </li>
    </ul>
  </div>
  <div class="pi-section-contents">
    <div class="pi-section-content pi-section-active">
      CONTENT
    </div>
  </div>
</section>

New markup for panels (simplified):

<section class="pi-item pi-panel pi-border-color wds-tabber">
  HEADER
  <div class="wds-tabs__wrapper">
    <ul class="wds-tabs">
      <li class="wds-tabs__tab wds-is-current">
        <div class="wds-tabs__tab-label">
          LABEL
        </div>
      </li>
    </ul>
  </div>
  <div class="wds-tab__content wds-is-current">
    CONTENT
  </div>
</section>

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 */
}

Example:

.portable-infobox {
  --pi-background: rgba(var(--theme-sticky-nav-dynamic-color-1--rgb), 0.05);
  --pi-secondary-background: var(--theme-sticky-nav-background-color);
  --pi-secondary-background--label: var(--theme-sticky-nav-text-color);
  --pi-border-color: var(--theme-border-color);
}

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__content for tabs content.

Theming variables

In the FandomDesktop skin, users have access to new 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.

Variable aliases

Theme-specific selectors

You can also specify each theme for the instances where you need different behaviour based purely on the theme choice.

• .theme-fandomdesktop-light is for elements that are themed for the light theme.
• .theme-fandomdesktop-dark is for elements that are themed for the dark theme.

Further help and feedback

• Browse and search other help pages at Help:Contents
• Check Fandom Community Central for sources of further help and support
• Check Contacting Fandom for how to report any errors or unclear steps in this article