Hilfe:Leitfaden zur Vorbereitung auf FandomDesktop

Mit der Einführung der neuen Oberfläche FandomDesktop wird es zu ein paar technischen Änderungen kommen, die vor allem Designs betreffen. Diese Hilfeseite stellt die wichtigsten Änderungen und Neuerungen vor und dient als Leitfaden, um vorhandene Anpassungen an die neue Oberfläche zu adaptieren.

Um über die neue Oberfläche informiert zu bleiben, halte die neuesten Blogbeiträge im Auge.

Neue CSS/JS-Seiten

Die CSS- und JS-Dokumente für Fandoms Oasis- und Gamepedias Hydra-Skin werden ersetzt durch fandomdesktop.css/fandomdesktop.js. Das gilt für den MediaWiki- wie auch den Benutzernamensraum (z. B. Benutzer:BENUTZERNAME/wikia.css).

Änderungen für sowohl Fandom als auch Gamepedia

Grundaufbau

Einige Klassen und IDs verändern sich in FandomDesktop oder kommen neu hinzu.

Legende: alte Klasse/ID → neue Klasse/ID

• Umstieg von einem Gamepedia-Wiki
  • Seitencontainer inklusive Navigation: #pageWrapper → .resizable-container
  • Artikelcontainer inklusive rechter Spalte (wo vorhanden): .page. Ist die rechte Spalte vorhanden, kommt .has-right-rail hinzu.
  • Inhaltscontainer (Artikelkopf, Seiteninhalte und Artikelfooter): .page__main
  • Artikelkopf: .page-header
  • Artikelinhalt: .mw-body → .page-content oder #content
  • Artikelfooter: .page-footer
  • Rechte Spalte: .right-rail
• Umstieg von einem Fandom-Wiki
  • Seitencontainer inklusive Navigation: .WikiaPage → .resizable-container
  • Artikelcontainer inklusive rechter Spalte (wo vorhanden): .WikiaPageContentWrapper → .page. Ist die rechte Spalte vorhanden, kommt .has-right-rail hinzu.
  • Inhaltscontainer (Artikelkopf, Seiteninhalte und Artikelfooter): #WikiaMainContentContainer und .WikiaMainContentContainer → .page__main
  • Artikelkopf: #PageHeader → .page-header (diese Klasse kam in Oasis ebenfalls zum Einsatz)
  • Artikelinhalt: .WikiaArticle → .page-content oder #content (diese ID kam in Oasis ebenfalls zum Einsatz)
  • Rechte Spalte: #WikiaRailWrapper und .WikiaRail → .right-rail-wrapper
  • Artikelfooter: .page-footer (neu)
• Klassen für dunklen/hellen Modus: Für Anpassungen, die sich nur auf einen Design-Modus beziehen, können die neuen Klassen .page-bright (heller Modus) und .page-dark (dunkler Modus) genutzt werden.

Tabber

Die Container-Klasse für Tabber, .tabber, bleibt erhalten. Alle anderen Klassen werden ersetzt durch vorgegebene Klassen aus dem Fandom Design-System: wds-tabs__tab beinhaltet die Reiter und wds-tabs__content die Tab-Inhalte.

Portable Infoboxen

Visual changes

Das Infobox-Theme „Europa“ (dieses war in neuen Wikis standardmäßig aktiviert) ersetzt mit einigen Anpassungen das Standard-Aussehen der Infoboxen. Die Klasse .pi-europe entfällt damit und wird durch die Standard-Infobox-Klasse .portable-infobox ersetzt.

Der Infobox-Titel (.pi-titel) und Header (.pi-header) erhalten als Hintergrundfarbe die eingestellte Akzentfarbe (--theme-accent-color). Die Farbe der Schrift wird automatisch kalkuliert und ist durch --theme-accent-label-color definiert. Durch vorhandene Design-Anpassungen in Wikis können die Header dadurch unleserlich werden.

Mit dieser Anpassung kann das Problem gelöst werden:

.portable-infobox {
--pi-secondary-background--label: #NEUER_FARBWERT_FÜR_SCHRIFT;
}

Zudem haben Infoboxen nun automatisch einen Rahmen.

Verändertes Markup für Reiter

Das HTML-Markup für Panel-Reiter und Bilder-Tabs wurde komplett verändert. Dadurch funktionieren von Wikis gemachte Anpassungen nicht länger.

Altes Markup für Bilder-Sammlungen (vereinfacht)

<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">
        BILDBESCHREIBUNG
      </span>
    </li>
  </ul>
 
  <div class="pi-image-collection-tab-content current">
    <figure class="pi-item pi-image">
      <a class="image image-thumbnail">
        BILD ODER VIDEO
      </a>
    </figure>
  </div>
</div>

Neues Markup für Bilder-Sammlungen (vereinfacht)

<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">
          BILDBESCHREIBUNG
        </span>
      </li>
    </ul>
  </div>

  <div class="wds-tab__content wds-is-current">
    <figure class="pi-item pi-image">
      <a class="image image-thumbnail">
        BILD ODER VIDEO
      </a>
    </figure>
  </div>
</div>

Altes Markup für Panels (vereinfacht)

<section class="pi-item pi-panel pi-border-color">
  REITER
  <div class="pi-panel-scroll-wrapper">
    <ul class="pi-section-navigation">
      <li class="pi-section-tab pi-section-active">
        <div class="pi-section-label">
          REITERTEXT
        </div>
      </li>
    </ul>
  </div>

  <div class="pi-section-contents">
    <div class="pi-section-content pi-section-active">
      INHALT
    </div>
  </div>
</section>

Neues Markup für Panels (vereinfacht)

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

  <div class="wds-tab__content wds-is-current">
    INHALT
  </div>
</section>

CSS-Variablen für die vereinfachte Anpassungen von Infoboxen

.portable-infobox {
  --pi-background: /* HAUPTHINTERGRUNDFARBE */
  --pi-secondary-background: /* HINTERGRUNDFARBE TITEL UND HEADER */
  --pi-secondary-background--label: /* TEXTFARBE TITEL UND HEADER */
  --pi-border-color: /* RAHMENFARBE */
}

Hintergrundbild

Der neue Theme-Designer bietet einige Anpassungsmöglichkeiten des Hintergrundbildes von Communitys. Sollen allerdings alte CSS/JS-Anpassungen an die neue Oberfläche angepasst werden, ist der neue Klassenname für das Hintergrundbild zu beachten: .fandom-community-header__background.

Änderungen im Vergleich zu Oasis

Galerien

Für Galerien auf FandomDesktop wird die Standard-Galerie-Lösung von MediaWiki verwendet werden. In den Hilfe-Ressourcen von MediaWiki findet man ausführliche Informationen: MediaWiki – Hilfe:Bilder. Es gibt zwei große Änderungen im Syntax von Galerien:

• Um den Galerie-Stil zu definieren, wird nicht länger die type-Eigenschaft verwendet. Stattdessen kommt mode zum Einsatz. Um die Kompatibilität zu gewährleisten, wird type nach dem Start von FandomDesktop weiterhin kompatibel sein. Dennoch empfehlen wir, neue Galerien nur noch mit der mode-Eigenschaft zu erstellen.
• Einige Eigenschaften werden nicht länger unterstützt. Siehe die folgende Liste für weitere Informationen:

Galerie-Attribute

Traditionell
type	Temporär unterstützt	Sollte durch Äquivalent mode ersetzt werden.
widths	Unterstützt
columns	Nicht unterstützt	Kann durch Äquivalent perrow ersetzt werden.
perrow	Unterstützt
position	Nicht unterstützt
spacing	Nicht unterstützt
orientation	Nicht unterstützt
captionposition	Nicht unterstützt	captionposition="within" kann durch ähnlich aussehenden Modus mode="packed-overlay" ersetzt werden
captionalign	Nicht unterstützt
captiontextcolor	Nicht unterstützt
bordersize	Nicht unterstützt
bordercolor	Nicht unterstützt
hideaddbutton	Nicht unterstützt
caption	Unterstützt
Diashow (Slideshow)
widths	Unterstützt
crop	Nicht unterstützt
showrecentuploads	Nicht unterstützt
position	Nicht unterstützt
Slider
orientation	Unterstützt

Weiterer Hinweis:

• Fandom-Galerien waren standardmäßig rahmenlos. Bilder in MediaWiki-Galerien haben standardmäßig dagegen einen dicken Rahmen. Um den gewohnten Look zu erhalten, muss entweder das Styling angepasst werden oder mode="nolines" muss allen Galerien hinzugefügt werden.

Änderungen im Vergleich zu Hydra/HydraDark

Galerien

Neuer Galerie-Modus – Slider

Gamepedia-Communitys werden auch den Slider-Modus von Galerien nutzen können. Benutzung:

<gallery mode="slider">
Bild.jpg
Bild2.jpg
...
</gallery>

Slider-Galerien unterstützen eine traditionelle Eigenschaft namens orientation. Diese Akzeptiert die Werte „bottom“ (Standard) sowie „right“ und bestimmt die Position der Slider-Navigation.

Hinweis: Aus Gründen der Nutzbarkeit raten wir von der Nutzung von Slider- und Slideshow-Elementen ab.

Theme-Variablen

Die FandomDesktop-Oberfläche gibt es einige CSS-Variablen, welche die Farben des Wiki-Designs festlegen. Diese werden zum Teil über den Theme-Designer bestimmt und teilweise berechnet.

Variable	Beschreibung
Hauptfarben
--theme-accent-dynamic-color-1	dynamic-1-Farbe für Akzente. Siehe Beschreibung unterhalb der Tabelle für nähere Infos.
--theme-accent-dynamic-color-1--rgb	dynamic-1-Farbe als RGB-Wert für Akzente. Siehe Beschreibung unterhalb der Tabelle für nähere Infos.
--theme-accent-dynamic-color-2	dynamic-2-Farbe für Akzente. Siehe Beschreibung unterhalb der Tabelle für nähere Infos.
--theme-accent-dynamic-color-2--rgb	dynamic-2-Farbe als RGB-Wert für Akzente. Siehe Beschreibung unterhalb der Tabelle für nähere Infos.
--theme-body-dynamic-color-1	dynamic-1-Farbe für den Body-Hintergrund. Siehe Beschreibung unterhalb der Tabelle für nähere Infos.
--theme-body-dynamic-color-1--rgb	dynamic-1-Farbe als RGB-Wert für den Body-Hintergrund. Siehe Beschreibung unterhalb der Tabelle für nähere Infos.
--theme-body-dynamic-color-2	dynamic-2-Farbe für den Body-Hintergrund. Siehe Beschreibung unterhalb der Tabelle für nähere Infos.
--theme-body-dynamic-color-2--rgb	dynamic-2-Farbe als RGB-Wert für den Body-Hintergrund. Siehe Beschreibung unterhalb der Tabelle für nähere Infos.
--theme-link-dynamic-color-1	dynamic-1-Farbe für Links. Siehe Beschreibung unterhalb der Tabelle für nähere Infos.
--theme-link-dynamic-color-1--rgb	dynamic-1-Farbe als RGB-Wert für Links. Siehe Beschreibung unterhalb der Tabelle für nähere Infos.
--theme-link-dynamic-color-2	dynamic-2-Farbe für Links. Siehe Beschreibung unterhalb der Tabelle für nähere Infos.
--theme-link-dynamic-color-2--rgb	dynamic-2-Farbe als RGB-Wert für Links. Siehe Beschreibung unterhalb der Tabelle für nähere Infos.
--theme-page-dynamic-color-1	dynamic-1-Farbe für den Artikelhintergrund. Siehe Beschreibung unterhalb der Tabelle für nähere Infos.
--theme-page-dynamic-color-1--rgb	dynamic-1-Farbe als RGB-Wert für den Artikelhintergrund. Siehe Beschreibung unterhalb der Tabelle für nähere Infos.
--theme-page-dynamic-color-2	dynamic-2-Farbe für den Artikelhintergrund. Siehe Beschreibung unterhalb der Tabelle für nähere Infos.
--theme-page-dynamic-color-2--rgb	dynamic-2-Farbe als RGB-Wert für den Artikelhintergrund. Siehe Beschreibung unterhalb der Tabelle für nähere Infos.
--theme-sticky-nav-dynamic-color-1	dynamic-1-Farbe für den Hintergrund der angepinnten Navigation. Siehe Beschreibung unterhalb der Tabelle für nähere Infos.
--theme-sticky-nav-dynamic-color-1--rgb	dynamic-1-Farbe als RGB-Wert für den Hintergrund der angepinnten Navigation. Siehe Beschreibung unterhalb der Tabelle für nähere Infos.
--theme-sticky-nav-dynamic-color-2	dynamic-2-Farbe für den Hintergrund der angepinnten Navigation. Siehe Beschreibung unterhalb der Tabelle für nähere Infos.
--theme-sticky-nav-dynamic-color-2--rgb	dynamic-2-Farbe als RGB-Wert für den Hintergrund der angepinnten Navigation. Siehe Beschreibung unterhalb der Tabelle für nähere Infos.
--theme-accent-color	Über Theme-Designer gewählte Akzentfarbe. Angegeben als Hex-Wert.
--theme-accent-color--hover	Je nach Design-Modus um 20% aufgehellte/verdunkelte Akzentfarbe für Hover-Aktionen. Als Hex-Wert angegeben.
--theme-accent-color--rgb	Über Theme-Designer gewählte Akzentfarbe. Angegeben als RGB-Wert.
--theme-accent-label-color	Automatisch ermittelte Textfarbe zur Nutzung in Kombination mit der Akzentfarbe --theme-accent-color. Angegeben als Hex-Wert.
--theme-body-background-color	Über Theme-Designer festgelegte Community-Hintergrundfarbe. Angegeben als Hex-Wert.
--theme-body-background-image	URL zum über den Theme-Designer festgelegten Header-Hintergrundbild. Angegeben als String.
--theme-body-text-color	Automatisch ermittelte Textfarbe zur Nutzung in Kombination mit der Community-Hintergrundfarbe --theme-body-background-color. Angegeben als Hex-Wert.
--theme-body-text-color--hover	Je nach Design-Modus um 20% aufgehellte/verdunkelte Textfarbe zur Nutzung in Kombination mit der Community-Hintergrundfarbe --theme-body-background-color. Angegeben als Hex-Wert.
--theme-border-color	Automatisch ermittelte Rahmenfarbe. Bestimmt auf Grundlage von --theme-page-background-color. Angegeben als Hex-Wert.
--theme-border-color--rgb	Automatisch ermittelte Rahmenfarbe. Bestimmt auf Grundlage von --theme-page-background-color. Angegeben als RGB-Wert.
--theme-link-color	Über Theme-Designer festgelegte Linkfarbe. Angegeben als Hex-Wert.
--theme-link-color--hover	Je nach Design-Modus um 20% aufgehellte/verdunkelte Linkfarbe für Hover-Aktionen. Als Hex-Wert angegeben.
--theme-link-color--rgb	Über Theme-Designer festgelegte Linkfarbe. Angegeben als RGB-Wert.
--theme-link-label-color	Automatisch ermittelte Textfarbe zur Nutzung in Kombination mit der Linkfarbe --theme-link-color. Angegeben als Hex-Wert.
--theme-page-accent-mix-color	50/50-Mischung aus der Hintergrund- und Akzentfarbe. Angegeben als Hex-Wert.
--theme-page-background-color	Über Theme-Designer festgelegte Artikelhintergrundfarbe. Angegeben als Hex-Wert.
--theme-page-background-color--rgb	Über Theme-Designer festgelegte Artikelhintergrundfarbe. Angegeben als RGB-Wert.
--theme-page-background-color--secondary	Sekundäre Farbe, die automatisch auf Grundlage von --theme-page-background-color ermittelt wird. Die Hintergrundfarbe wird dabei (je nach Design-Modus) ein bisschen mit weiß bzw. schwarz gemischt.
--theme-page-text-color	Automatisch ermittelte Textfarbe für Artikel bzw. für --theme-page-dynamic-color-2. Angegeben als Hex-Wert.
--theme-page-text-color--hover	Farbe für Hover-Zustand von Text. Automatisch ermittelt und angegeben als Hex-Wert.
--theme-page-text-color--rgb	Automatisch ermittelte Textfarbe für Artikel. Angegeben als RGB-Wert.
--theme-page-text-mix-color	50/50-Mischung aus der Hintergrund- und page-dynamic-2-Farbe. Angegeben als Hex-Wert.
--theme-sticky-nav-background-color	Über Theme-Designer festgelegte Farbe der angepinnten Navigation. Angegeben als Hex-Wert.
--theme-sticky-nav-text-color	Automatisch ermittelte Textfarbe für die angepinnte Navigation bzw. für --theme-sticky-nav-dynamic-color-1. Angegeben als Hex-Wert.
--theme-sticky-nav-text-color--hover	Farbe für Hover-Zustand von Text in der angepinnten Navigation. Automatisch ermittelt und angegeben als Hex-Wert.
Spezielle Farben
--theme-alert-color	Warnfarbe (rötlich), automatisch angepasst für einen guten Kontrast zum Seitenhintergrund. Angegeben als Hex-Wert.
--theme-alert-color--hover	Je nach Design-Modus um 20% aufgehellte/verdunkelte Warnfarbe (rötlich) für Hover-Aktionen, automatisch angepasst für einen guten Kontrast zum Seitenhintergrund. Angegeben als Hex-Wert.
--theme-alert-color--rgb	Warnfarbe (rötlich), automatisch angepasst für einen guten Kontrast zum Seitenhintergrund. Angegeben als RGB-Wert.
--theme-alert-label	Automatisch ermittelte Textfarbe zur Nutzung in Kombination mit der Warnfarbe --theme-alert-color. Angegeben als Hex-Wert.
--theme-message-color	Nachrichtenfarbe (bläulich), automatisch angepasst für einen guten Kontrast zum Seitenhintergrund. Angegeben als Hex-Wert.
--theme-message-label	Automatisch ermittelte Textfarbe zur Nutzung in Kombination mit der Nachrichtenfarbe --theme-message-color. Angegeben als Hex-Wert.
--theme-success-color	Erfolg-Farbe (grünlich), automatisch angepasst für einen guten Kontrast zum Seitenhintergrund. Angegeben als Hex-Wert.
--theme-success-color--rgb	Erfolg-Farbe (grünlich), automatisch angepasst für einen guten Kontrast zum Seitenhintergrund. Angegeben als RGB-Wert.
--theme-success-label	Automatisch ermittelte Textfarbe zur Nutzung in Kombination mit der Farbe --theme-success-color. Angegeben als Hex-Wert.
--theme-warning-color	Warnfarbe (gelblich), automatisch angepasst für einen guten Kontrast zum Seitenhintergrund. Angegeben als Hex-Wert.
--theme-warning-label	Automatisch ermittelte Textfarbe zur Nutzung in Kombination mit der Warnfarbe --theme-warning-color. Angegeben als Hex-Wert.

Dynamische Farbwerte

Dynamische Farben werden auf Grundlage ihrer Hintergrundfarbe ermittelt, um ein möglichst gutes Kontrastverhältnis zu erreichen.

• dynamic-color-1 ist Fandom-schwarz (#0E191A für helle Hintergründe und weiß (#FFFFFF) für dunkle Hintergründe.
• dynamic-color-2 ist ein dunkles Grau (#3A3A3A) für helle Hintergründe und ein helles Grau (#E6E6E6) für dunkle Hintergründe.