Zmiana wyglądu stron internetowych

Ostatnio zacząłem używać dodatku Stylish, który naprawdę potrafi upiększyć strony internetowe. Dodatek jest bardzo prosty w obsłudze nawet dla początkujących, gdyż zmiana wyglądu strony polega na kilku kliknięciach:

1. wejście na stronę Stylish’a
2. wpisanie strony w wyszukiwarkę
3. wybranie odpowiedniego dla nas motywu
4. kliknięcie przycisku „Install with Stylish”

Motyw jest gotowy do użycia.

Jak właściwie działa Stylish?

Stylish to dodatek do Chrome, Firefox’a, Opery, Safari (i pewnie paru innych), który dodaje swój własny styl na koniec nagłówka strony (head). Przeglądarka traktuje to jako normalny wewnętrzny arkusz stylu (CSS), więc wygląd strony ulega zmianie (czasem nawet ją widać, gdy przeglądarka zbyt wolno zareaguje).

Jak zrobić swój własny motyw do strony w Stylish?

Sprawa jest bardzo prosta dla tych, którzy umieją CSS. Jeśli właśnie tak jest, to musisz tylko wykazać się wizją i wiedzieć kilka podstawowych rzeczy. Cała dokumentacja znajduje się na stronie Stylish’a, więc osoby choć trochę znające angielski nie będą miały problemu.

Zmieńmy kolorki w Google!

Przykład będzie robiony na Chrome.

Po instalacji dodatku obok paska adresu powinna wyświetlić się nam ikonka z literą S – to jest właśnie stylish. Kliknijmy w nią.

Wyświetli się „menu” Stylish’a, w którym mamy 2 opcje do wyboru:

• Find more styles for this site.
• Manage installed styles.

Wybierzemy tą drugą.
Naszym oczom ukaże się bardzo czysta dla oka strona do zarządzania motywami.

Wybierzmy „Write new style”. Naszym oczom ukaże się pole tekstowe podświetlające składnie znane z programów typu Notepad++. Zanim jednak zaczniemy zabawę, zapiszmy nasz „projekt” wpisując odpowiednią nazwę przy „Name” i kliknijmy Save.

Jedyne co możemy teraz zrobić, to wpisywanie kodu lub ewentualnie myślenie nad naszą kreacją 🙂 Wybierzmy to pierwsze. Weźmy coś prostego:
body {
background-color: black;
}
i od razu wypróbujmy. Hola hola, najpierw trzeba sprecyzować dla jakich stron ma być używany motyw. Domyślnie, bedą to wszystkie, a jakoś nie sądzę, że chciałbyś widzieć Facebooka z czarną czcionką na czarnym tle 😉 Pod polem tekstowym znajdziemy własnie te ustawienia.
Kliknijmy Specify i zacznijmy zajmować się opcjami:

• URL – dla adresu
• URLs starting with – dla adresów zaczynających się od
• URLs on the domain – dla stron w domenie
• URLs matching the regexp – dla adresów, w których znajduje się określone słowo

Chyba najlepszym wyborem będzie URLs on the domain. Wpiszmy tam google.pl i kliknijmy Add.

Teraz możemy kliknąć Save i otworzyć stronę google.pl. Nie wygląda ona jednak najlepiej…

Ten obrazek wszystko psuje… Go też można zmienić! Korzystając ze źródła strony (w Chrome prawym na stronę -> Zbadaj element lub Ctrl + U) można się dowiedzieć jakie ID posiada div z logiem jako tło. Ułatwię Wam zadanie, jest to hplogo.

Dopiszmy więc w naszym kodzie:
#hplogo {
background-image: url(http://www.enterwebhub.com/wp-content/uploads/2012/07/Google_logo.jpg);
}
Obrazek znalazłem w Google 😛 Kliknijmy Save i zobaczmy, jak to wygląda.

I tu pojawiają się schody. Nie działa! Gdybyśmy jednak przeczytali dokumentację Stylish’a to wiedzielibyśmy, że nasz kod jest źle wpisany! (Gratuluję, jeśli ktoś to zauważył.) Do wszystkiego należy dopisać !important, aby w prostych słowach mówiąc – przewyższało wszystko. Tak powinien wyglądać nasz kod:
body {
background-color: black !important;
}
#hplogo {
background-image: url(http://www.enterwebhub.com/wp-content/uploads/2012/07/Google_logo.jpg) !important;
}

I teraz (pomijając spłaszczony obrazek) jest dobrze! Nie będę już nic więcej tłumaczył i zostawiam Was w niepewności z pytaniem: Czy da się zrobić coś, aby ten obrazek wyglądał normalnie? 😉

A co z Firefoxem? Takie coś mi nie działa!

Na lewo od pola tekstowego widzimy przycisk „To Mozilla format”. Gdy go klikniemy, wyświetli się nam wersja dla Firefox’a, różniąca się jedynie tym, że cały kod jest między „@-moz-document domain(„google.pl”) {” i „}”.

Wady Stylish’a

Niestety, nic nie jest idealne:

• nie ma synchronizacji (przy korzystaniu z Chrome jestem przyzwyczajony do tego, że dodatki się synchronizują – szkoda, że ich ustawienia już nie)
• motywy istnieją głównie dla popularnych witryn anglojęzycznych, do innych stron trzeba je robić samemu
• Stylish czasem „nie ogarnia” gdy włączy się szybko kilka kart”

Pomimo tych wad i tak będę go używał. Sam dodatek jest bardzo dobry i polecam go każdemu, kto korzysta z jednej witryny przez taki czas, że mu się znudził jej wygląd 🙂