Wprowadzenie: Czym jest motyw CSS?

Mówiąc najprościej, motyw CSS zawiera informacje odnośnie wyglądu witryny internetowej. Jeżeli z jakiegoś powodu uznasz chęć, aby Twoje prace były wyświetlane na stronie o wyglądzie innym niż domyślny bądź jest to związane z rozpoznawalnością Organizacji, kanonu itd., możesz utworzyć swój własny motyw.

Każdy użytkownik może stworzyć własny motyw. Z powodu specyfiki tego typu zabiegów w wygląd witryny istnieją odpowiednie zasady dotyczące ich tworzenia, publikacji i używania zawarte w tym artykule.

Tworzenie motywu

Prace nad motywem należy prowadzić na swoim Sandboxie. Podstawową zasadą jest Twoja umiejętność wyjaśnienia każdej linijki kodu swojego motywu. Musisz być w stanie przedstawić, co robi każda z nich. Podczas pisania motywu powinieneś pytać osoby zaznajomione z CSS, czy robisz to dobrze, a one powinny wówczas na bieżąco kontrolować to, co robisz. Każdy źle wpisany znak oznacza niepoprawne działanie kodu i ostatecznie motywu. Wszystko sprowadza się ku jednemu stwierdzeniu: dobrze by było, gdyby motyw CSS projektowała osoba zaznajomiona z tym kodem. Jeżeli jesteś całkowicie zielony w temacie, jest to dobra szkoła prostego programowania, ale wówczas powinieneś mieć osobę, która nadzorowałaby Twoją pracę.

Następną ważną kwestią jest to, że nie możesz w żaden sposób ingerować w elementy nawigacyjne Wiki ani moduł oceny. Wszystko powinno być tak, jak zostało z góry zaprojektowane. Jeżeli naprawdę zależy Ci na estetyce, możesz zmienić jedynie wygląd bez wpływu na funkcjonalność. W dalszym ciągu każdy powinien móc swobodnie poruszać się po witrynie i głosować. W przypadku modułu Interwiki (.scpnet-interwiki-frame) możesz poddać go stylizacji używając np. CSS3 Filters, ale pod żadnym pozorem nie możesz go całkowicie usunąć, nawet gdyby filtry nie zdawały rezultatu.

Tworząc motyw, nadal musisz pamiętać, że każda osoba wchodząca na stronę, musi nadal wiedzieć, że znajduje się na witrynie SCP Wiki — nie możesz zaburzać jej struktury i rozpoznawalności.

Oczywistą sprawą jest, że motyw CSS musi działać poprawnie na większych przeglądarkach (Chromium, Firefox, Safari) i być co najmniej funkcjonalny na mniejszych (IE 11 itp.). Ponadto musi sprawnie funkcjonować na wersjach mobilnych powyższych.

Motyw musi być całkowicie czytelny: nie może zawierać nieodpowiednich kombinacji kolorów (dla osób z daltonizmem mogą być wówczas nieczytelne; dotyczy to także każdych połączeń powodujących dyskomfort w czytaniu), utrudniać korzystania z czytników ekranu oraz zawierać trudnych do rozczytania czcionek. Jeżeli kogoś bolą oczy po czytaniu strony z zaaplikowanym Twoim motywem, znaczy to, że jest on nieodpowiedni.

Twój motyw nie może zawierać zbędnego, nic nie wnoszącego kodu. Powinieneś umieścić jedynie funkcjonalne, działające linijki. Kopiowanie tego samego kodu z sigma9 (nazwa podstawowego motywu wiki) jest niedozwolone. Ponadto, w tym przypadku większa ilość „tekstu” nie oznacza lepszej jakości i „fajności” motywu. Dodatkowo powinieneś starać się unikać używania znacznika !important, chyba że musisz coś nadpisać w sigma9 lub by zapewnić zgodność z innym CSS.

Ostatnia ważna, oczywista kwestia: motyw w całości musi być na licencji CC BY-SA 3.0. Jeżeli wykorzystujesz elementy obcego autorstwa, muszą być zgodne z licencją i zawierać stosowną atrybucję.

Jeżeli zaznajomiłeś się z powyższymi, możesz przystąpić do prac nad swoim motywem. Gdy uznasz motyw za gotowy, powiadom o tym moderatora lub administratora. Jeżeli Przedstawiciel Administracji zajmujący się Twoim motywem uzna go za spełniający standardy, możesz go opublikować.

Publikacja

Publikacja nowych motywów różni się znacznie od wrzucania nowych artykułów na witrynę.

Strona, którą musisz stworzyć, nazywana jest stroną motywu. Musi być umieszczona w kategorii theme: i posiadać tag motyw. Kategorie nadaje się poprzez dopisanie jej nazwy przed właściwą nazwą strony w polu prowadzania adresu.

Na stronie motywu musisz umieścić:

Kod motywu w postaci zmieniającej wygląd strony motywu — pełni ona funkcję jego podglądu.
Kod motywu w postaci podglądu CSS — zostanie on wyświetlony w sposób podobny do cytatu celem możliwości jego podglądu przez użytkowników i administrację.
Instrukcje, w jaki sposób motyw należy aplikować do strony.
- Użytkownicy muszą dodawać Twój motyw do ich stron metodą [[include]] Wikidota.
- Metoda @import CSS jest obecnie już niestosowana, dlatego należy używać w/w.
Użyte wszystkie funkcje, na jakie wpływa motyw: wygląd tabel, zakładek, linków itd., nowe efekty wizualne i techniczne itd. Wszystko, co jest nowe, a co dodałeś, musisz zawrzeć wraz z instrukcją użytkowania.
Dla jakiego celu odgórnego motyw został stworzony: dzieła oparte na kanonie, dokumenty organizacji itd. Po prostu opisz swój motyw i jego przeznaczenie.

Oto szablon strony motywu. Nie jest on sztywny, zawiera najpotrzebniejsze dane, które każda strona motywu musi mieć zawarte. Możesz dostosować każdą z sekcji wedle uznania (np. schować podgląd kodu w collaps).

[[module CSS]]
@import url(http://www.scp-wiki.net.pl/theme:nazwa-motywu/code/1);
[[/module]]

[[iftags +motyw]]

[[>]]
[[module Rate]]
[[/>]]

Aby wykorzystać ten motyw, użyj poniższego modułu na samej górze Twojej strony:

[[div class="code"]]
@@[[include :scp-pl:theme:nazwa-motywu]]@@
[[/div]]

Tu wpisujesz, dla czego został stworzony motyw: huby, GoI, kanony itd.

[[code type="css"]]
Tutaj wpisujesz kod swojego motywu
[[/code]]

[[/iftags]]

Szablon jest przetłumaczony i dostosowany pod standardy SCP-Wiki.net.pl, oryginał autorstwa Nobody i NotARealPerson, umieszczony na stronie http://scp-sandbox-3.wikidot.com/css-include-template .

Hotlinkowanie

Hotlinkowanie to linkowanie do plików na innej witrynie i jest praktyką odradzaną — pomyśl, jak awaria strony hostującej wpłynie na Twój motyw?

By zapobiec takim sytuacjom, wszystkie obrazki, czcionki i inne pliki używane przez motyw CSS powinny być dodane do strony motywu zgodnie z zasadami użytkowania plików. Możesz używać stron oferujących użytkownikom możliwość hotlinkowania, a które są pewnymi i sprawdzonymi magazynami wirtualnych plików. Przykłady to Google Fonts i Lorem Picsum. Pytaj administrację, gdy nie jesteś czegoś pewny.

Dodatkowo, CSS nie powinien być linkowany ze stron na Sandboxie lub innych miejsc, które nie są główną witryną.

Użytkowanie

Motywy CSS, które nie są używane, nie są dozwolone na witrynie. By Twój motyw został zaakceptowany musisz upewnić się do co najmniej jednego z poniższych:

Motyw będzie używany przez artykuł, który już istnieje na wiki.
Motyw zostanie opublikowany w podobnym czasie do artykułu, przez który będzie używany.
Motyw zostanie opublikowany na krótko przed (do tygodnia) artykułem, przez który będzie używany.

Ktokolwiek, kto akceptuje Twój motyw, może poprosić o zobaczenie artykułu lub szkicu, na którym motyw będzie użyty.

Strony autorskie nie są brane pod uwagę dla powyższych zasad. Podobnie artykuły znajdujące się na innych stronach Wiki nie są wliczane, chyba że są to prace znajdujące się na innych Filiach SCP.

Problemy z motywami CSS

Usuwanie

Motywy CSS są traktowane jak zwyczajne artykuły. Oznacza to, że podlegają standardowej polityce usuwania treści, gdy ich ocena spadnie poniżej 0. Ponadto motyw, który nie jest nigdzie używany, może zostać usunięty bez względu na ocenę po okresie dwóch tygodni bez jego aplikacji gdziekolwiek na witrynie.

Naprawianie

Jeśli Twój motyw nie funkcjonuje na większych przeglądarkach (Chromium, Firefox, Safari, mobile, IE11) w sposób, który kompletnie psuje nawigację, funkcjonowanie lub dostępność musi zostać usunięty (lub co najmniej usunięty z bloków include) z witryny i naprawiony, koniecznie w tej kolejności.

Wymagania

Oto lista prostych pytań, na które Twój motyw musi odpowiedzieć „tak”.

Czy to, co robi motyw, jest jasne?
Czy motyw jest zaaplikowany na jego stronie?
Czy działa? Czy jest wolny od oczywistych błędów?
Czy działa mobilnie?
Czy działa na różnych przeglądarkach?
Czy elementy nawigacyjne są obecne i w dobrym stanie?
Czy strona wciąż wygląda jak witryna SCP?
Czy instrukcje użytkowania są obecne?
Czy strona używa [[include]]?
Czy nie ma w nim zbędnego kodu?
Czy CSS jest łatwy do zrozumienia? Czy jeśli są skomplikowane części, są one trudne do wytłumaczenia? (Nie powinno być części, których Ty nie rozumiesz i autor nie potrafi wytłumaczyć.)
Czy jest wolny od problemów z dostępnością (kolory o niskim kontraście, nieczytelne lub za małe czcionki)?
Czy !important jest używane z rozwagą? (Parę użyć jest ok, ich brak jest idealny.)
Czy każdy element jest hostowany z Wikidotu?
Czy motyw jest obecnie używany na jakiejkolwiek stronie? Jeśli nie, czy autor może zademonstrować, że będzie używany?
Jeśli motyw dodaje nowe divy, czy ich użycie jest zaprezentowane?
Czy CSS jest dobrze ułożony i czy komentarze zachowują spójność? (Mogą one wskazywać na masowe kopiowanie i wklejanie.)
Czy motyw wygląda dobrze?
Czy autor rozumie, co robi każda część kodu?
Czy jest jasne, do czego jest motyw i kto powinien go używać?