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.