コミュニティセントラル
コミュニティセントラル
このヘルプには更新、または翻訳されていないコンテンツがあります。どなたでも翻訳にご協力いただくことができます。
原文リンク未指定

管理者の皆様には、新しいテーマデザイナーと、高度なカスタマイズのためのFandomDesktop準備ガイドをぜひご覧いただきたいと思います。


オプトイン/アウト[]

FandomDesktopを選択するには、バナーのリンクをクリックするか、 My Preferences

[Appearance]タブをクリックしてください。そのページでは、Oasis/HydraかFandomDesktopを選択することができます。

FandomDesktopを選択した場合は、その他の環境設定がありますので、そちらをご利用ください。

これは、テスト段階にあり今年の夏頃に正式に移行します。 それまでは、利用者の選択によって、Oasisに戻る事ができます。その時は、この同じタブを使います。

ご注意ください! 初期状態では、あなたのWikiはライトモードとダークモードの両方でデフォルトのテーマ設定がされています。 驚かないでください。これは、あなたのカスタマイズがFandomDesktopで まだ適用されていないことを意味します。

ファンダム・ウィキの場合、テーマ・デザイナーにジャンプすると、 最初から全く新しいテーマを作成するか、既存のテーマをインポートして微調整するかを選ぶことができます。 ゲームメディア・ウィキの場合、インポートできるテーマデザイナーのデータはありませんので、 最初から作り直す必要があります。もしあなたのWikiに担当者がいれば、喜んでお手伝いします。 Wiki代表がいないWikiは、ファンダムのDiscordをチェックすることができます。


新しいcustom CSS / JS filesです。[]

MediaWiki:Fandomdesktop.cssMediaWiki:Fandomdesktop.js

GPとFandom wikisの両方で変更になる機能[]

Tabber[]

タバーコンテナ用の .tabber クラスは残ります。 その他のクラス名はすべて削除され、Fandom Design System のクラスである、タブ用の wds-tabs__tab とタブのコンテンツ用の wds-tabs__content に置き換えられます。

基盤レイアウト[]

  • GP wikiからの移行
    • ページ全体のコンテナ(ナビゲーション付き)#pageWrapperは、.resizable-containerクラスでアクセスできるようになりましたが、ナビゲーションはページの上部に表示されます。
    • 現在、メインページのラッパーには、コンテンツコンテナと右レールを含む.pageクラスがあります(右レールが存在する場合、この要素には.has-right-railクラスも含まれます)
    • ページヘッダー、コンテンツ、ページフッターを含む.page__mainクラスを持つmainコンテンツコンテナがあります。
    • 記事コンテンツの#contentや.mw-bodyに、#content idや.page-contentクラスでアクセスできるようになりました。
    • ページヘッダーは、.page-headerクラスでアクセスできます。
    • ページフッターは、.page-footerクラスでアクセスできます。
    • 右レールは#WikiaRailWrapper idまたは.WikiaRailクラスでアクセスできます。
  • Fandom wikiからの移行
    • ページ全体のコンテナ(ナビゲーション付き).WikiaPageは、.resizable-containerクラスでアクセスできるようになりました。
    • メインページのラッパー(右レール付き) .WikiaPageContentWrapperは、.pageクラスでアクセスできるようになりました(右レールが存在する場合、この要素には.has-right-railクラスも含まれます)この要素には、コンテンツコンテナと右レールが含まれています。
    • メインコンテンツコンテナ #WikiaMainContentContainerまたは.WikiaMainContentContainerは、.page__mainクラスからアクセスできるようになりました。このコンテナには、ページのヘッダー、コンテンツ、ページのフッターが含まれます。
    • 記事の内容 #content や .WikiaArticle に #content id や .page-content クラスでアクセスできるようになりました。
    • ページヘッダ(#PageHeaderまたは.page-headerでアクセス)は、.page-headerクラスでアクセスできるようになりました。
    • ページフッターは、.page-footerクラスでアクセスできます。
    • 右レール(#WikiaRailWrapper または .WikiaRail でアクセス)は、.right-rail-wrapper クラスでアクセスできるようになりました。

Portable infobox[]

視覚的な変化[]

  • 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.

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.

関連情報[]

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