Zastanawiasz się nad dostosowaniem wyglądu swojej wiki? Planując zmiany na wiki warto podejmować decyzje, które będą szeroko akceptowalne i przyjazne dla jak największej liczby edytorów i czytelników. Poniżej znajdziesz kilka dobrych praktyk, dzięki którym będzie to wymagać minimum zachodu.
Porady[]
Zacznij od kreatora motywu[]
Kreator motywu w akcji
Najprostszym sposobem na dostosowanie wiki i upewnienie się, że nie wypłynie to na ewentualne zmiany ze strny Fandomu to użycie kreatora motywu. Pozwala on na dostosowywania takich rzeczy jak logo, kolorystyka i tło Twojej wiki w szybki i łatwy sposób.
Wszystko, co da się zmienić za pomocą kreatora motywów, powinno być zmieniane właśnie tam. Zacznij więc od niego zanim przejdziesz do zmian w CSS.
Ostrożnie dobieraj kolory[]
Unikaj niskiego kontrastu, krzykliwych i niedopasowanych do siebie kolorów — zwłaszcza w obszarze treści. Zależy nam, aby użytkownicy mogli łatwo czytać artykuły i chcieli zostać na wiki na dłużej. Do sprawdzania kontrastu można użyć np. WCAG Contrast Checker.
Uszanuj wybór użytkownika w zakresie jasnego lub ciemnego motywu. W razie potrzeby, możesz możesz ograniczyć style CSS do konkretnego motywu, poprzedzając je selektorem body[data-theme="dark"] albo body[data-theme="light"]. Kolory ustawione w Kreatorze Motywów są również dostępne jako zmienne CSS, które ułatwiają tworzenie styli działających na obu motywach:
- „Kolor tła społeczności” →
var(--theme-body-background-color) - „Kolor tła przyklejonej nawigacji” →
var(--theme-sticky-nav-background-color) - „Kolor nagłówka społeczności” →
var(--theme-community-header-color) - „Kolor odcieni” →
var(--theme-accent-color) - „Kolor linków” →
var(--theme-link-color) - „Kolor tła artykułu” →
var(--theme-page-background-color)
/* tylko motyw jasny */
body[data-theme="light"] .example { color: black; }
/* tylko motyw ciemny */
body[data-theme="dark"] .example { color: white; }
/* zmienna motywu */
.example { background: var(--theme-page-background-color); }
Pamiętaj:
- Nie u wszystkich wzrok funkcjonuje jak u Ciebie – znaczna liczba ludzi ma zaburzenia wzroku i rozpoznawania barw.
- Ekrany różnych urządzeń również zachowują się inaczej – to, co wygląda dobrze u Ciebie, może wyglądać okropnie u innych.
- Staraj się uzyskać dobry kontrast pomiędzy tekstem a tłem – jak ciemny tekst na jasnym tle.
- Obrazy tła są świetne, ale nie wtedy, gdy nie da się przeczytać tekstu. Kreator motywu posiada funkcję ustawienia przezroczystości tła, jednak korzystaj z niej z umiarem
- Uwaga: Suwak przezroczystości wpływa na przezroczystość obrazu tła i nie pozwala na wyświetlenie obrazu pod treścią artykułu (co, swoją drogą, nie jest dobrym pomysłem).
- Nie zmniejszaj za bardzo elementów i tekstu, szczególnie w głównym obszarze treści.
Czcionki[]
Własne czcionki mogą urozmaicić przeglądanie wiki, ale mniej znaczy więcej. Źle dobrany krój potrafi znacząco utrudnić czytanie treści i zmęczyć wzrok. Staraj się unikać zmieniania czcionki globalnych obszarów Fandomu (i innych miejsc objętych polityką modyfikacji), jak również dwa razy przemyśl zmianę głównej treści wiki.
Jeśli szukasz czcionki pasującej do Twojej wiki:
- skorzystaj z zasobów Google Fonts — zawarte tam kroje pozwalają na użytek komercyjny.
- unikaj serwisu Onlinewebfonts — spowoduje to długie ładowanie wiki i częste błędy czcionki.
Zachowaj prostotę[]
CSS daje mnóstwo możliwości wyróżnienia się i możesz czuć pokusę, żeby zapełnić wiki ikonami, animacjami i kolorami. Staraj się jednak nie przesadzić — Twoim celem jest stworzenie wiki przyjaznej dla wszystkich, a nadmiar elementów może odstraszyć wielu użytkowników.
- Stosuj ozdobniki tylko tam, gdzie są naprawdę potrzebne.
- Unikaj wszystkiego, co zbyt „efektowne”. Pamiętaj, że wiki to przede wszystkim źródło wiedzy. Strona powinna prezentować temat w sposób wizualnie atrakcyjny, ale bez rozpraszania uwagi.
Bierz pod uwagę responsywność[]
Pamiętaj, że szerokość strony na Fandomie jest zmienna – to co widzisz może wyglądać inaczej na różnego rozmiaru ekranach. Możesz spróbować określać szerokość elementów w wartościach procentowych zamiast bezwzględnym – to prawdopodobnie zmniejszy szansę powstawania wielkich odstępów pomiędzy lub nachodzących się elementów.
Pisz czytelny kod[]
Postaraj się upewnić, że napisany kod jest zrozumiały dla kogoś innego – pamiętaj, że możesz nie być jedyną osobą, która będzie wprowadzać zmiany na danej wiki. Odstępy i odpowiednie nazwy to dobre metody na ułatwienie tego.
- komentuj kod w sposób zrozumiały np.
/* This code does x, y and z */; - gdy tworzysz dodatkowe klasy, nadawaj im zrozumiałe nazwy;
- zadbaj o logiczne wcięcia i odstępy i trzymaj się jednego stylu;
- uporządkuj swój kod, by style odpowiadające za konkretny element wiki znajdowały się w jednym miejscu;
Nazywanie klas[]
Własne klasy najlepiej nazywać w sposób opisowy i spójny, tak by można je było łatwo połączyć z odpowiednimi szablonami, przykładowo .mainpage-box jest bardziej czytelne .mp213b.
Możesz także rozważyć nadawanie wszystkim klasom własnego prefiksu powiązanego z wiki (np. „filk-” na wiki o dyskografii Filk). Wszystkie klasy CSS są globalne, a domyślna skórka i silnik MediaWiki używają nazw takich jak notice czy toc. Dzięki prefiksowi unikasz konfliktów z istniejącymi klasami.
Wydajność[]
Obrazy i czcionki używane przez CSS często pojawiają się wielokrotnie. Nawet drobne różnice mogą znacząco wpływać na wydajność — szczególnie przy plikach hostowanych lokalnie. Istnieją trzy sposoby osadzania plików w CSS:
- src:url('/wiki/Special:Redirect/file/NAZWA PLIKU')
- Ta metoda jest łatwa w utrzymaniu, ale powstające przekierowanie może spowodować, że plik nie będzie prawidłowo buforowany przez przeglądarkę internetową
- Zalecane dla plików używanych na jednej stronie
- src:url('/wiki/Special:FilePath/NAZWA PLIKU')
- Powoduje dwa przekierowania, najpierw do powyższej składni, a następnie do rzeczywistego pliku.
- Nie zalecane
- src:url('https://static.wikia.nocookie.net/NAZWAWIKI/images/X/XY/NAZWA_PLIKU')
- Ta metoda jest bardziej pracochłonna trudniejsza w utrzymaniu — wymaga nieprzetworzonego adresu URL, pod którym przechowywany jest plik. Pozwala jednak na buforowanie przez przeglądarkę internetową, a tym samym zmniejsza obciążenie sieci i zwiększa szybkość renderowania.
- Zalecane dla plików używanych na wielu stronach
Przydatne linki[]
- Polityka modyfikacji - informacje dotyczące dozwolonych zmian na Fandomie;
- W3Schools - poradnik CSS (ang.);
- Mozilla Developer Network - internetowa dokumentacja CSS (ang.);
- CSS-Tricks - serwis internetowy poświęcony CSSowi (ang.);
- Serwis CanIUse - pozwoli sprawdzić, jakie właściwości są obsługiwane przez współczesne przeglądarki (ang.);
- Usługa sprawdzająca CSS od W3C – to pozwoli Ci sprawdzić kod pod względem błędów, podobnie jak Specjalna:CSS.
Dalsze wsparcie
Szukasz dalszego wsparcia lub masz pytanie? Sprawdź poniższe linki, aby dowiedzieć się więcej.
- Dowiedz się więcej, sprawdzając inne strony pomocy.
- Uzyskaj pomoc od innych użytkowników Fandomu w Dyskusjach na Centrum Społeczności.
- Skontaktuj się ze wsparciem Fandomu poprzez formularz kontaktowy.