Rozszerzona customizacja wyglądu Lichess na przykładzie zmiany koloru strzałek

Lichess umożliwia na niemałą customizację wielu elementów interfejsu. Możemy dowolnie zmienić tło, wybrać jeden z kilkunastu zestawów bierek, oraz kolorów pól i sporo innych. Mimo wszystko jednak nie jest to bardzo szeroki wybór, a niektóre elementy strony nie mają możliwości zmiany. Możemy jednak w przeglądarkowej wersji zainstalować wtyczkę, która umożliwi nam dosyć proste dostosowanie wyglądu do naszych potrzeb

Którą wtyczkę wybrać?

Oczywiście takich wtyczek jest całkiem sporo, ale przeglądając forum zauważyłem, że użytkownicy najbardziej polecają Stylus oraz Stylish. Ja korzystam z obu, ale w tym artykule skupię się na Stylus i pokażę na przykładzie jak zmienić kolor strzałek.

Wgranie szablonów

Po instalacji wtyczki wchodzimy sobie na to repozytorium. Jak widać dostępne są nie tylko opcje customizacji strzałek, ale również koloru pól, zestawów bierek czy nawet cały "theme" strony. My jednak skupimy się na strzałkach i klikamy w folder arrows (screen poniżej)

Następny krok to kliknięcie w button Instant install, który jeśli mamy zainstalowaną wtyczkę pozwoli nam na dodanie tego kodu do wtyczki

Następnie w lewym górnym rogu będziemy mieli opcję "Zainstaluj styl" i po instalacji jeśli wejdziemy na lichess zauważymy, że strzałki zmieniły swoje kolory.

Jak zmienić kolory strzałek na inne?

Choć udało się już wgrać nowe kolory strzałek niekoniecznie mogą nas satysfakcjonować nowym wyglądem. Jak więc dobrać kolory? Na pierwszy rzut okaz kod może odstraszać, ale do zmiany kolorów nie potrzebujemy absolutnie żadnej znajomości programowania. Skupiamy się na widocznym na screenie obszarze zaznaczonym na czerwono

Żeby zmienić kolor strzałki (lub kółeczka) klikamy na kwadracik i z palety barw wybieramy interesujący nas kolor. Po tej operacji zmiany na stronie będą widoczne od razu. Ważne! Kiedy skończymy edytować kolory trzeb zmiany zapisać klikając na button w lewym górnym rogu lub skrótem klawiszowym Ctrl + s.

Co jeśli chcemy wyłączyć style?

Wybieramy Stylusa z listy wtyczek w prawym górnym rogu przeglądarki i klikamy "Zarządzaj"

Pojawi nam się lista zainstalowanych stylów gdzie możemy za pomocą checkboxa włączyć lub wyłączyć konkretny styl (klikając w element listy możemy wrócić do panelu edycji stylów)

Podsumowanie

Jak widać taka customizacja to nic trudnego, analogicznie można też zmieniać inne elementy strony