FandomDesktop conversion guide

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

Variable name	Description
`--theme-accent-color`	Accent color taken from ThemeDesigner, presented as hex value
`--theme-accent-color--hover`	Accent color taken from ThemeDesigner, darkened or lightened by 20%, depending on theme, presented as hex value
`--theme-accent-color--rgb`	Accent color taken from ThemeDesigner, presented as group of Red, Green, Blue values
`--theme-accent-dynamic-color-1`	dynamic-1 color for accent. See Dynamic Colors section for more info.
`--theme-accent-dynamic-color-1--rgb`	dynamic-1 color rgb components for accent. See Dynamic Colors section for more info.
`--theme-accent-dynamic-color-2`	dynamic-2 color for accent. See Dynamic Colors section for more info.
`--theme-accent-dynamic-color-2--rgb`	dynamic-2 color rgb components for accent. See Dynamic Colors section for more info.
`--theme-accent-label-color`	Accessible text color to use with --theme-accent-color background, presented as hex value
`--theme-alert-color`	Alert color (red-ish), adjusted for proper contrast comparing with page background, presented as hex value
`--theme-alert-color--hover`	Alert color (red-ish) adjusted for proper contrast comparing with page background, darkened or lightened by 20%, depending on theme, presented as hex value
`--theme-alert-color--rgb`	Alert color (red-ish), adjusted for proper contrast comparing with page background, presented as group of Red, Green, Blue values
`--theme-alert-label`	Accessible text color to use with --theme-alert-color background, presented as hex value
`--theme-body-background-color`	Body background color taken from ThemeDesigner, presented as hex value
`--theme-body-background-image`	URL to background image, taken from ThemeDesigner, presented as string
`--theme-body-dynamic-color-1`	dynamic-1 color for body background. See Dynamic Colors section for more info.
`--theme-body-dynamic-color-1--rgb`	dynamic-1 color rgb components for body background. See Dynamic Colors section for more info.
`--theme-body-dynamic-color-2`	dynamic-2 color for body background. See Dynamic Colors section for more info.
`--theme-body-dynamic-color-2--rgb`	dynamic-2 color rgb components for body background. See Dynamic Colors section for more info.
`--theme-body-text-color`	Accessible text color to use with --body-background-color background, presented as hex value
`--theme-body-text-color--hover`	Accessible text color to use with --body-background-color background, darkened or lightened by 20%, depending on theme, presented as hex value
`--theme-border-color`	Accessible border color calculated based on --theme-page-background-color, presented as hex value
`--theme-border-color--rgb`	Accessible border color calculated based on --theme-page-background-color, presented as group of Red, Green, Blue values
`--theme-link-color`	Link color taken from ThemeDesigner, presented as hex value
`--theme-link-color--hover`	Link color taken from ThemeDesigner, darkened or lightened by 20%, depending on theme, presented as hex value
`--theme-link-color--rgb`	Link color taken from ThemeDesigner, presented as group of Red, Green, Blue values
`--theme-link-dynamic-color-1`	dynamic-1 color for links. See Dynamic Colors section for more info.
`--theme-link-dynamic-color-1--rgb`	dynamic-1 color rgb components for links. See Dynamic Colors section for more info.
`--theme-link-dynamic-color-2`	dynamic-2 color for links. See Dynamic Colors section for more info.
`--theme-link-dynamic-color-2--rgb`	dynamic-2 color rgb components for links. See Dynamic Colors section for more info.
`--theme-link-label-color`	Accessible text color to use with --theme-link-color background, presented as hex value
`--theme-message-color`	Message color (blue-ish), adjusted for proper contrast comparing with page background, presented as hex value
`--theme-message-label`	Accessible text color to use with --theme-message-color background, presented as hex value
`--theme-page-accent-mix-color`	Mix of a page background color and accent color in the 50-50 ratio
`--theme-page-background-color`	Page (article) background color taken from ThemeDesigner, presented as hex value
`--theme-page-background-color--rgb`	Page (article) background color taken from ThemeDesigner, presented as group of Red, Green, Blue values
`--theme-page-background-color--secondary`	Secondary color calculated based on --theme-page-background-color, slightly mixed with white or black color, depending on theme, presented as hex value
`--theme-page-dynamic-color-1`	dynamic-1 color for page (article) background. See Dynamic Colors section for more info.
`--theme-page-dynamic-color-1--rgb`	dynamic-1 color rgb components for page (article) background. See Dynamic Colors section for more info.
`--theme-page-dynamic-color-2`	dynamic-2 color for page (article) background. See Dynamic Colors section for more info.
`--theme-page-dynamic-color-2--rgb`	dynamic-2 color rgb components for page (article) background. See Dynamic Colors section for more info.
`--theme-page-text-color`	Text color for a page. Alias for --theme-page-dynamic-color-2.
`--theme-page-text-color--hover`	Hover state of a page text color
`--theme-page-text-color--rgb`	RGB components of page text color
`--theme-page-text-mix-color`	Mix of a page background color and page dynamic-2 color in the 50-50 ratio
`--theme-sticky-nav-background-color`	Sticky nav background color. This color can be set inside the Theme Designer.
`--theme-sticky-nav-dynamic-color-1`	dynamic-1 color for sticky nav background. See Dynamic Colors section for more info.
`--theme-sticky-nav-dynamic-color-1--rgb`	dynamic-1 color rgb components for sticky nav background. See Dynamic Colors section for more info.
`--theme-sticky-nav-dynamic-color-2`	dynamic-2 color for sticky nav background. See Dynamic Colors section for more info.
`--theme-sticky-nav-dynamic-color-2--rgb`	dynamic-2 color rgb components for sticky nav background. See Dynamic Colors section for more info.
`--theme-sticky-nav-text-color`	Text color for sticky nav. Alias for --theme-sticky-nav-dynamic-color-1
`--theme-sticky-nav-text-color--hover`	Hover state of a sticky nav text color
`--theme-success-color`	Success color (green-ish), adjusted for proper contrast comparing with page background, presented as hex value
`--theme-success-color--rgb`	Success color (green-ish), adjusted for proper contrast comparing with page background, presented as group of Red, Green, Blue values
`--theme-success-label`	Accessible text color to use with --theme-success-color background, presented as hex value
`--theme-warning-color`	Warning color (yellow-ish), adjusted for proper contrast comparing with page background, presented as hex value
`--theme-warning-label`	Accessible text color to use with --theme-warning-color background, presented as hex value

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

Variable name	Alias for
`--theme-accent-label-color`	`--theme-accent-dynamic-color-1`
`--theme-body-text-color`	`--theme-body-dynamic-color-1`
`--theme-link-label-color`	`--theme-link-dynamic-color-1`
`--theme-page-text-color`	`--theme-page-dynamic-color-2`
`--theme-sticky-nav-text-color`	`--theme-sticky-nav-dynamic-color-1`

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

Help:FandomDesktop conversion guide

Contents