ヘルプ:FandomDesktop/準備ガイド

ヘルプ

トップページ · 目次 · 索引

このヘルプには更新、または翻訳されていないコンテンツがあります。どなたでも翻訳にご協力いただくことができます。

原文リンク未指定。

Admins, you should definitely check out the new Theme Designer and the FandomDesktop preparation guide for advanced customization. When you feel that your wiki is ready for the new experience, there’s a button in your Admin Dashboard to let us know. This may impact the order in which your wiki moves to FandomDesktop as a default experience for all editors, admins, and readers, but we make no guarantee of earlier placement in rollout waves. This is available on both Fandom and Gamepedia wikis. Note: Admin Dashboard is a new feature for Gamepedia wikis on FandomDesktop and can be accessed at Special:AdminDashboard.

Opting in or out

To opt-in for FandomDesktop, either click the link in the banner inviting you to do so or head to My Preferences and click the Appearance tab. On that page, you will have the option to select Oasis/Hydra or FandomDesktop. When FandomDesktop is selected, you will have additional preferences to control your experience.

That same tab is how you opt-out to switch back to the legacy design for testing purposes as your community prepares for full rollout early this summer.

Please note! Initially, your wiki will have default theming for both Light and Dark mode. Don't freak out! It just means your customizations haven't been applied yet. For Fandom wikis, jumping into the Theme Designer will give you the option to either start fresh and create a whole new theme or to import and then tweak your existing theme. For Gamepedia wikis, there is no previous Theme Designer data to import, so you will need to start from scratch. If your wiki has an assigned Wiki Representative, they will be happy to help you with this. Wikis without a Wiki Representative can check out the Fandom Discord.

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

Portable infobox

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):

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

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:

<gallery> element attributes

Traditional
type	Temporarily supported	Should be replaced with the equivalent "mode" attribute.
widths	Supported
columns	Not supported	Can be replaced with equivalent "perrow" attribute.
perrow	Supported
position	Not supported
spacing	Not supported
orientation	Not supported
captionposition	Not supported	captionposition="within" could be replaced with similar-looking mode="packed-overlay"
captionalign	Not supported
captiontextcolor	Not supported
bordersize	Not supported
bordercolor	Not supported
hideaddbutton	Not supported
caption	Supported
Slideshow
widths	Supported
crop	Not supported
showrecentuploads	Not supported
position	Not supported
Slider
orientation	Supported

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

Galleries

New gallery mode - slider

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

Usage:

<gallery mode="slider">
Image.jpg
Image2.jpg
...
</gallery>

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

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.

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.

関連情報

• ヘルプ:カスタマイゼーション・ポリシー

その他のヘルプとフィードバック

• ヘルプ:コンテンツでは、他のヘルプページを閲覧、検索することができます。
• 最新の情報やヘルプについては、コミュニティセントラルをご覧ください。
• この記事で不明確な点や、曖昧な点がございましたら、Fandomとの連絡方法をご確認ください。
• このヘルプはコミュニティセントラル内にて管理されています。