Centrum Społeczności
Advertisement

Kreator motywu jest łatwym w użyciu narzędziem administratorskim, które pozwala na szybkie dostosowanie motywu, nagłówka i loga na twojej wiki. Wybierz jeden z istniejących motywów podczas tworzenia wiki lub zaprojektuj własny wyjątkowy motyw, który pasuje do tematu twojej wiki i społeczności zarówno w jasnym, jak i ciemnym motywie.

Krok po kroku[]

Mobile theme preview

Możesz przełączać się między podglądem standardowym i mobilnym za pomocą ikon w lewym górnym rogu okna podglądu.

  • Będąc administratorem na wiki, możesz znaleźć link do Kreatora motywu w rozwijanym menu na górze wiki, najeżdżając na trzy pionowe kropki, w menu Moje narzędzia na pasku narzędzi lub w panelu administratora. Możesz również do niego przejść, odwiedzając stronę Specjalna:ThemeDesigner na swojej wiki.
  • Masz dostęp do trzech sekcji:
  • Każda dokonana przez ciebie zmiana może zostać natychmiast zobaczona w oknie podglądu, aby umożliwić ci zobaczenie motywu wiki przed jego zapisaniem – zarówno w wersji mobilnej, jak i standardowej. Możesz przełączać się pomiędzy podglądem mobilnym i standardowym, używając ikon monitora i smartfonu w lewy górnym rogu okna podglądu.
  • Administratorzy mogą osobno zmieniać jasny i ciemny motyw na wiki, dostając się do ustawień każdego z nich w Kreatorze motywu poprzez oddzielne zakładki. Można tam również wybrać, który motyw będzie domyślny dla społeczności. Wszystkie opcje pod nagłówkami „Nagłówek i tło” oraz „Styl artykułów” mogą być ustawione osobno dla każdego motywu. Przełączając się między zakładkami, podgląd artykułu również ulegnie zmianie, wyświetlając motyw, który jest obecnie edytowany.

Aby mieć pewność, że motywy spełniają wymagania dotyczące dostępności, administratorzy nie mogą zapisywać motywu, który posiada ostrzeżenia związane z nieprawidłowym kontrastem. Przejdź niżej aby dowiedzieć się więcej.

Kiedy ukończysz swoją pracę, a kontrast jest prawidłowy, naciśnij przycisk „Zapisz”. Nowy motyw natychmiast zacznie wyświetlać się użytkownikom.

Motywy mobilne[]

Mobile theme - theming switch

Użytkownicy mogą łatwo przełączać się między jasnym i ciemnym motywem

Motywy na skórce mobilnej są domyślnie aktywne dla wszystkich społeczności na Fandomie, z wyłączeniem wiki historycznie pochodzących z Gamepedii, które używają CSS-u w skórce mobilnej. Gdy mobilne motywy nie są aktywne, po wejściu do Kreatora motywu administrator ujrzy informację, której treść mówi „Motywy mobilne nie są jeszcze włączone dla tej wiki. Aby włączyć motywy mobilne, rozwiąż wszelkie problemy z kontrastem kolorów i zapisz zmiany.” Gdy wszelkie problemy z kontrastem zostaną ręcznie rozwiązane, a motyw zostanie zapisany, mobilny motyw włączy się automatycznie. Po pierwszym włączeniu mobilnego motywu administratorzy przez jakiś czas będą widzieć powiadomienie, które to potwierdzi.

Aby zapewnić spójną estetykę między doświadczeniem na komputerach i urządzeniach mobilnych, kolory ustawione w kreatorze motywu dla tła, przyklejonej nawigacji i nagłówka, a także kolory odcieni, linków i tła artykułów będą takie same na komputerach i urządzeniach mobilnych. Wybrany obraz tła i czcionka nagłówka dla każdego motywu również będą takie same na skórce standardowej i mobilnej.

Pamiętaj, że nie wszystkie opcje oferowane przez kreator motywu dla komputerów będą miały zastosowanie do skórki mobilnej, a wszelkie dodatkowe zmiany wprowadzone w skórce komputerowej za pomocą CSS-u nie będą miały zastosowania do motywu mobilnego.

Wybrany domyślny motyw jasny lub ciemny będzie również domyślnym motywem mobilnym. Jednak podobnie jak w przypadku komputerów stacjonarnych, każdy użytkownik będzie mógł indywidualnie wybrać własny domyślny motyw. Osobiste wybory motywów, których dokonuje się na urządzeniach mobilnych, mają też zastosowanie dla skórki standardowej i odwrotnie. Więcej informacji na temat jasnego i ciemnego motywu można znaleźć tutaj.

Tożsamość społeczności[]

Ta sekcja umożliwia dostosowanie nazwy społeczności, logo, favikony i obrazu społeczności. Te ustawienia są niezależne od jasnych/ciemnych motywów i będą wyświetlane tak samo na obu.

Favicon Theme Designer
  • Nazwa społeczności:: Nazwę społeczności widzisz w nagłówku obok logo; Zmiana nazwy w tym miejscu nie zmienia faktycznej nazwy wiki.
  • Logo społeczności: Logo jest graficznym dodatkiem do nazwy społeczności. Użytkownicy będą mogli przejść na stronę główną wiki, klikając na logo na dowolnej stronie.
    • Logo musi posiadać rozszerzenie .png, rozmiar nie większy niż 1MB i maksymalnie 500 na 500 pikseli.
    • Logo jest przechowywane jako Plik:Site-logo.png.
    • Użyj w przyklejonej nawigacji: spowoduje umieszczenie logo po lewej stronie paska nawigacji widocznego po przewinięciu w dół.
  • Favikona: Favikony są małymi ikonami, pojawiają się w górnej części przeglądarki i są często stosowane na kartach i zakładkach.
    • Favikoną może być plik o rozszerzeniu .ico lub .png o rozmiarze pomiędzy 16x16px a 256x256px. Więcej informacji możesz znaleźć tutaj.
    • Favikona jest przechowywana jako Plik:Site-favicon.ico.
  • Obraz społeczności: Ten obraz stanowi reprezentację wiki na Fandomie i jest wykorzystywany w różnych miejscach jak wyniki wyszukiwania i profile. W związku z tym polecane jest wykorzystanie obrazu w wysokiej rozdzielczości, jako iż będzie on występował w różnych rozmiarach i na różnych urządzeniach.
    • Obraz społeczności może posiadać rozszerzenie .png lub .jpg, rekomendowany rozmiar to 600x400px, minimum to 200x200px. Maksymalny dozwolony rozmiar to 1MB.
    • Obraz jest przechowywany jako Plik:Site-community-image.

Nagłówek i tło[]

Theme designer - header and background

Tło to obszar poza zawartością twojej wiki, który pojawia się na wszystkich stronach.

  • Tło: Jeśli chcesz, możesz dodać własne tło, klikając na odpowiednie pole i używając narzędzia do przesyłania obrazów. Możesz przesłać grafiki z rozszerzeniem .jpg .png i .gif. Maksymalny rozmiar obrazka może wynosić 1 megabajt.
    • Więcej informacji oraz porady dotyczące tworzenia własnego tła strony znajdziesz tutaj.
    • Wyświetlanie obrazu zarządza sposobem wyświetlania tła - czy pokrywa ono cały obszar poza zawartością wiki czy jedynie miejsce za nagłówkiem nad artykułem.
    • Styl tła zawiera wiele opcji dotyczących sposobu wyświetlania obrazu tła.
      • Przycięte: obraz zostanie rozciągnięty by wypełnić obszar tła (background-size:cover w CSS).
      • Sąsiadująco: sąsiadujący obraz tła (powtarzający się) z opcją powtarzania w pionie, poziomie oraz obu osiach.
      • Dopasuj: obraz zostanie dopasowany do wybranego obszaru tła bez zmiany jego proporcji (background-size:contain w CSS).
    • Przezroczystość obrazu określa stopień przezroczystości obrazu tła.

Poniższe opcje będą mieć zastosowanie zarówno w motywie komputerowym jak i mobilnym:

  • Kolor tła społeczności: określa kolor tła widoczny pod wybranym obrazem.
  • Kolor tła przyklejonej nawigacji: określa kolor tła nawigacji widocznej na górze ekranu po przewinięciu w dół. Kolor tekstu jest określany automatycznie w celu zachowania kontrastu.
  • Kolor nagłówka społeczności: określa kolor tekstu w nagłówku nawigacji społeczności. Spróbuj wybrać kolor będący jednocześnie czytelny na tle wybranego obrazu oraz koloru tła.

Styl artykułów[]

Theme designer - article styles

Poniższe ustawienia będą miały zastosowanie zarówno do motywu komputerowego i mobilnego:

  • Czcionka nagłówków: zapewnia kilka opcji zmiany rodziny czcionek używanej w nagłówkach artykułów.
  • Kolor odcieni: określa kolor akcentów na wiki — m.in. kolor tła paska narzędzi, niektórych przycisków czy nagłówków infoboksów.
  • Kolor linków: to kolor większości linków. Postaraj się wybrać taki kolor, który zapewnia odpowiedni kontrast z tłem artykułu oraz odróżnia się od normalnego tekstu na wiki. Unikaj też koloru czerwonego używanego przy linkach do nieistniejących stron.
  • Kolor tła artykułów: to kolor tła głównego obszaru zawartości. Kolor tekstu jest określany automatycznie w celu zachowania kontrastu.
    • Zmiana tego koloru zmieni również kolor tła rozwijanych menu.

Historia motywu[]

Theme designer - history
  • Za każdym razem, gdy motyw jest zapisywany przyciskiem „Zapisz”, na tej liście tworzony jest wpis. Lista jest unikalna zarówno dla jasnego, jak i ciemnego motywu.
  • Jeśli chcesz wyświetlić lub przywrócić poprzednią wersję, możesz to zrobić w Kreatorze motywów. Kliknij na ostatnią wersję i załaduj ją w trybie podglądu.
  • Kreator przechowuje 10 ostatnich wersji motywu. Zminimalizowanie liczby zapisanych wersji poprzez jednoczesne wprowadzanie wszystkich zmian sprawi, że historia będzie zawierała więcej informacji i stanie się bardziej użyteczna.

Ostrzeżenia o kontraście[]

Theme Designer - contrast errors

Czerwone podświetlenie wskazuje na błędy kontrastu w kreatorze motywu dla każdego koloru i motywu.

Prawidłowym jest zapewnienie dostatecznego kontrastu między tekstem a tłem, aby osoba z umiarkowanie kiepskim wzrokiem mogła go przeczytać. W celu zapewnienia zgodności z wymaganiami dostępności, przycisk „Zapisz” w kreatorze motywu jest wyszarzony dopóki problemy z kontrastem występują w jednym lub większej ilości wybranych kolorów dla któregoś z motywów. Komunikat wskazujący na problem będzie wyświetlony nad przyciskiem „Zapisz”. Dopiero gdy wszystkie wyświetlane błędy z kontrastem dla jasnego oraz ziemnego motywu zostaną rozwiazane, komunikat nad przyciskiem zniknie i zapisanie zmian będzie możliwe.

Gdy błędy są aktywne, każdy kolor, którego dotyczy problem, jest podświetlony czerwoną ramką wokół wybranej wartości, a tekst błędu jest wyświetlany na czerwono z ośmiokątnym znakiem błędu obok niego. Z drugiej strony ostrzeżenia o kontraście są oznaczone pomarańczową ramką wokół odpowiedniego koloru, a tekst ostrzeżenia jest wyświetlany na pomarańczowo z trójkątem ostrzegawczym przed nim. Jeśli błąd jest spowodowany wyborem kolorów w innym motywie, np. jasnym motywie, gdy patrzysz na ciemny motyw, lub odwrotnie, wokół karty motywu pojawi się czerwona ramka, aby zwrócić na niego uwagę. Jeśli jedynym problemem dotyczącym innego motywu jest ostrzeżenie, ramka wokół karty motywu będzie pomarańczowa.

Komunikat dla każdego koloru jest wyjątkowy i wyjaśnia, dlaczego jest to problem. Możesz wywołać ten komunikat, klikając kolor podświetlony jako mający problem. Dla każdego problemu z kontrastem zostaną przedstawione trzy kolory w widmie sąsiadującym z wybranym, które spełniają minimalny współczynnik kontrastu, aby dać administratorom łatwy sposób rozwiązania problemu. To wyskakujące okienko pozostanie otwarte podczas szukania nowego koloru, a komunikat o błędzie lub ostrzeżenie pojawi się ponownie, jeśli zmienisz kolor na taki, który nie spełnia wymagań dotyczących kontrastu. Po znalezieniu odpowiedniego rozwiązania kolorystycznego kliknij „X” lub poza obszarem okienka, aby te zniknęło.

Wymagane minimalne współczynniki kontrastu (według wytycznych WCAG 2.x AA) to:

Kolor linków vs tło artykułu – 4.5[]

Jeśli problem dotyczy koloru linku na wybranym kolorze tła, przeczytasz: „Linki wyświetlane w tym kolorze mogą być trudne do odczytania. Zalecamy wybranie innego koloru, który ma lepszy kontrast z kolorem tła.”.

Podkreślanie linków[]

Niektóre sugestie koloru linków, które rozwiążą problemy z kontrastem linków względem tła, potencjalnie mogą spowodować, że kolor linków będzie zbyt podobny do koloru otaczajacego je tekstu, który jest automatycznie określany na Fandomie na podstawie koloru tła artykułów (#3a3a3a dla jasnego motywu i #e6e6e6 dla ciemnego.) Może to schować linki jako zwykły tekst i utrudnić ich czytanie. Aby temu przeciwdziałać, gdy wybrany kolor linków ma współczynnik kontrastu mniejszy niż 1.5 z otaczającym go tekstem, linki zostaną automatycznie podkreślone, aby odpowiednio je odróżnić. Podkreślenia znikną po wybraniu koloru linków z odpowiednim kontrastem, co można zobaczyć w oknie podglądu w czasie rzeczywistym. Zwróć uwagę, że podkreślenia pojawią się tylko w przypadku linków w treści stron wiki i nie będą obecne w obszarach takich jak pasek nawigacyjny, prawy panel wiki, spis treści, szablony lub strony kategorii.

Kolor tła społeczności vs kolor nawigacji – 4.5[]

Gdy kolor tła społeczności i kolor nagłówka społeczności nie mają wystarczającego kontrastu kolorów, mogą sprawić, że lokalna nawigacja będzie nieczytelna. Jeśli występują problemy z kontrastem, komunikat o błędzie będzie brzmiał: „Linki i tekst wyświetlane w tym kolorze będą trudne do odczytania dla niektórych użytkowników. Wybierz inny kolor, który lepiej kontrastuje z kolorem tła społeczności lub wybierz jeden z zalecanych kolorów poniżej.”

Zwróć uwagę, że jeśli obecny jest obraz tła, to błąd ten nie będzie się pojawiał z racji na przykrywanie dowolnych problemów z kontrastem przez obrazek. Istnieje jednak opcja, aby nie wyświetlać obrazu tła na skórce mobilnej, więc jeśli obraz nie jest tam używany, problemy z kontrastem będą nadal zauważalne w widoku mobilnym. W takim przypadku zalecamy rozwiązanie problemu z kontrastem za pomocą okna podglądu mobilnego zamiast podglądu w skórce komputerowej.

Zalecane minimalne współczynniku kontrastu to:

Kolor odcieni vs kolor tła artykułu – 3.0[]

Ponieważ kolor odcieni definiuje kolory różnych elementów wiki, takich jak przyciski, elementy infoboksu i paska narzędzi, i dlatego czasami jest wyświetlany na tle koloru artykułu, zły wybór kontrastu może sprawić, że zleje się z tłem. W takim przypadku zostanie wyświetlony następujący komunikat o błędzie: „Ten kolor jest używany w nagłówkach i obramowaniach infoboksu, przyciskach i innych drugorzędnych elementach interfejsu. Proszę wybrać kolor, który ma wystarczający kontrast z kolorem tła artykułów na Twojej wiki.”. Jest to tylko zalecenie, a nie surowe wymaganie, więc nadal będziesz mógł zapisać swój motyw bez konieczności dostosowywania koloru odcieni.

Należy pamiętać, że tylko jeden kolor w każdej parze musi zostać zmieniony, aby spełnić wytyczne dotyczące kontrastu. Jeśli nie jesteś w stanie rozwiązać problemów z kontrastem w satysfakcjonującym stopniu, skontalktuj się z przypisanym do twojej wiki reprezentantem lub skorzystaj z Dyskusji na Centrum Społeczności, aby skontaktować się ze wsparciem.

Zobacz także[]

Dalsze wsparcie

Szukasz dalszego wsparcia lub masz pytanie? Sprawdź poniższe linki, aby dowiedzieć się więcej.

Advertisement