Pomoc:Przygotowanie FandomDesktopu

Aby wypróbować FandomDesktop, użyj linku z powiadomienia informującego o takiej możliwości lub wejdź na swoją stronę Preferncji i wybierz zakładkę Wygląd. Tam znajdziesz opcję wyboru między obecną skórką Oasis/Hydra lub nową FandomDesktop. Po wybraniu FandomDesktop, dostępne będą dodatkowe opcje, umożliwiające personalizację korzystania z tej skórki.

Używając tej samej strony możesz powrócić do korzystania z obecnej skórki np. w celach testowych. Poniższa strona pomoże przygotować się na migrację na nową skórkę, która nastąpi tego lata.

Nowe arkusze CSS i JS dla skórki[]

FandomDesktop wprowadza nowe arkusze CSS i JS — MediaWiki:Fandomdesktop.css oraz MediaWiki:Fandomdesktop.js.

Kod znajdujący się do tej pory w arkuszach MediaWiki:Wikia.*, MediaWiki:Hydra.* oraz MediaWiki:HydraDark.* przestanie działać.

Tło społeczności[]

Nowy kreator motywu umożliwi szersze modyfikacje wyglądu tła strony. Jeżeli jednak wolisz przenieść swoje dotychczasowe modyfikacje w CSS/JS, nazwa nowej klasy to .fandom-community-header__background.

Podstawowy układ[]

Migracja z Wiki z Gamepedii[]

cała zawartość strony (z nawigacją) dotychczas dostępna pod #pageWrapper znajduje się teraz w klasie .resizable-container, z tą różnicą, że nawigacja jest na górze strony;
zawartość strony (bez nawigacji) jest teraz objęta klasą .page, która zawiera treść strony oraz prawy panel (jeżeli prawy panel jest wyświetlany, element dodatkowo posiada klasę .has-right-rail);
treść strony jest teraz objęta klasą .page__main, która zawiera nagłówek, treść artykułu oraz stopkę;
zawartość artykułu, dostępna dotychczas pod identyfikatorem #content lub klasą .mw-body obecnie znajduje się pod identyfikatorem #content lub klasą .page-content;
nagłówek strony ma klasę .page-header;
stopka strony ma klasę .page-footer;
prawy panel ma identyfikator #WikiaRailWrapper oraz klasę .WikiaRail.

Migracja z Wiki z Fandomu[]

cała zawartość strony (z nawigacją) dotychczas dostępna w klasie .WikiaPage ma obecnie klasę .resizable-container;
zawartość strony (z prawym panelem) dotychczas dostępna w klasie .WikiaPageContentWrapper obecne ma klasę .page (jeżeli prawy panel jest wyświetlany, ma wówczas także klasę .has-right-rail). Zawiera treść strony oraz prawy panel;
treść strony w elemencie z identyfikatorem #WikiaMainContentContainer i klasą .WikiaMainContentContainer jest obecnie dostępna w elemencie z klasą .page__main. Zawiera on nagłówek, treść artykułu oraz stopkę;
treść artykułu (#content lub .WikiaArticle) ma obecnie identyfikator #content i klasę .page-content;
nagłówek strony (#PageHeader lub .page-header) jest dostępna pod klasą .page-header;
stopka strony ma klasę .page-footer;
prawy panel (dotychczas #WikiaRailWrapper lub .WikiaRail) obecnie ma klasę .right-rail-wrapper.

Przenośne infoboksy[]

Zmiany wizualne[]

zostaje dodane domyślne obramowanie wokół infoboksu;
tła tytułów (.pi-title) i nagłówków (.pi-header) są domyślnie ustawione na kolor odcieni (--theme-accent-color), a kolor tekstu jest wyliczany na jego podstawie oraz zapisywany pod zmienną CSS --theme-accent-label-color. Dla niektórych modyfikacji wyglądu może to spowodować nieczytelność tekstów tytułów i nagłówków. Zalecanym rozwiązaniem jest:

.portable-infobox {
  --pi-secondary-background--label: #WŁASNY_KOLOR_TEKSTU_NAGŁÓWKA;
}

Zmiana znaczników dla zakładek[]

Znaczniki HTML dla zakładek tagu <panel> oraz zakładek dla grup obrazów zostały całkowicie zmienione, co oznacza, że dotyczasowe modyfikacje nie będą już działały.

Dawne znaczniki dla grup obrazów (uproszczone):

<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">
        TYTUŁ
      </span>
    </li>
  </ul>

  <div class="pi-image-collection-tab-content current">
    <figure class="pi-item pi-image">
      <a class="image image-thumbnail">
        OBRAZ LUB FILM
      </a>
    </figure>
  </div>
</div>

Nowe znaczniki dla grup obrazów (uproszczone):

<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">
          TYTUŁ
        </span>
      </li>
    </ul>
  </div>
  <div class="wds-tab__content wds-is-current">
    <figure class="pi-item pi-image">
      <a class="image image-thumbnail">
        OBRAZ LUB FILM
      </a>
    </figure>
  </div>
</div>

Dawne znaczniki dla paneli (uproszczone):

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

Nowe znaczniki dla paneli (uproszczone):

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

Zmienne CSS używane przez przenośne infoboksy[]

.portable-infobox {
  --pi-background: /* GŁÓWNY KOLOR TŁA */
  --pi-secondary-background: /* KOLOR TŁA TYTUŁÓW I NAGŁÓWKÓW */
  --pi-secondary-background--label: /* KOLOR TEKSTU TYTUŁÓW I NAGŁÓWKÓW */
  --pi-border-color: /* KOLOR KRAWĘDZI */
}

Tabbery[]

Klasa .tabber pozostanie niezmieniona. Nazwy pozostałych klas zostają wycofane nazwami pochodzącymi z Fandom Design System: .wds-tabs__tab dla tytułów zakładek oraz .wds-tabs__content dla ich zawartości.

Zobacz też[]

Zmienne kolorów motywu wprowadzone wraz z FandomDesktop.