W związku z żałobą w Polsce możemy zauważyć bardzo dużo stron w barwie czarno-białej, symbolizującą właśnie żałobę.
Szukałem prostego rozwiązania które w szybki sposób przekształciłoby zwykłą kolorową stronę w stronę czarno-białą.
Znalazłem kilka rozwiązań który fajnie działały ale tylko pod Internet Explorer, poniżej dodatek który wystarczy dopisać do pliku css:
1 2 3 4 | *{ opacity: 1; filter: gray; } |
Dzięki temu nasza strona będzie w cała szara, ale tylko w IE.
Jeśli chcemy aby zmiany były widoczne także pod Firefoksem czy Chrome musimy użyć już java scriptu.
Na stronie Jamesa Podolseya znalazłem odpowiedni wpis i dostosowałem go do mojej skórki.
Możesz go pobrać z tego miejsca – Barwy Zalobne (549).
W spakowanym rarze znajdują się 2 pliki:
- grayscale.js
- footer.php
Pierwszy plik to plik java, drugi zawiera kilka linijek które trzeba dodać do naszej strony przed znacznikiem </body>.
Nazwałem go footer.php ponieważ w WordPressie większość skórek w takich plikach zawiera również ww. znacznik.
1 2 | <script src="<?php bloginfo('template_directory'); ?" type="text/javascript"><!--mce:0--></script>
<script type="text/javascript"><!--mce:1--></script> |
To co jest bardzo ważne w tym pliku to nazwa między nawiasami – zamiast tego musimy wpisać nazwę odpowiedniego diva który okala całą naszą stronę – w moim przypadku był to „container„. Jest to bardzo ważne ponieważ bez odpowiedniego diva, całość może nie zadziałać.
Oczywiście cały plik js umieść w katalogu z Twoim theme – lub jeśli nie używasz wordpressa to po prostu umieść w głównym katalogu.
Ten sposób nie jest idealny, ma on dwie wady:
- nie działa pod IE
- nie działa na zdjęcia które nie są na naszym hostingu (np. reklamy)
Rozwiązaniem jest połączenie pierwszego i drugiego sposób aby żałoba była widoczna zarówno pod IE jak i FF/Chrome. Zmiana/wyłączenie na ten okres reklam lub obrazków które nie są na naszym hostingu.
Daj znać w komentarzu czy na Twojej stronie wszystko udało się zastosować. W razie problemów również pisz w komentarzu.
Pobierz całość – Barwy Zalobne (549).
Podobne Wpisy na Wordpress.Praktycznie.net:
- Biała Strona – błąd WordPress! Napotkałem ostatnio na ciekawy błąd – otóż przy aktualizowaniu wordpressa...
Tagi: barwy żałobne, css, czarno-białe, java script, zmiana strony
12.04.2010 at 22:12
Super! Wcześniej szukałem i ściągałem już ten plik jednak nie wiedziałem jak to zastosować.
Działa niby ok ale nie wszystkie obrazki straciły kolory.
Te które są w katalogu /nazwa_theme/images zostały bez zmian, kolorowe.
13.04.2010 at 05:04
To ja mam ciekawostkę
W mojej skórce (freestyle) skrypt zadziałał bez wpisywania tej bardzo ważnej rzeczy, czyli bez okalającego diva.
13.04.2010 at 05:05
A, jeszcze jedno. Widoczne jest niestety wyraźne zwolnienie podczas ładowania strony (chwilowe zawieszenie się ładowania).
13.04.2010 at 07:43
Dzięki, działa elegancko
pod IE 8 sposób drugi też działa.
13.04.2010 at 08:33
witam,
porady na IE oczywiście zadziałały bez żadnego problemu, jednak pod Firefox niestety nie, umieściłem na stronie w katalogu głównym plik "grayscale.js" oraz wpisałem treść z pliku footer.php przed </body>,
mam jednak problem co wpisać w ( …. ) dotyczące DIV'a. Proszę o pomoc
pozdrawiam
Sławek
13.04.2010 at 09:09
hmm na IE8 ? Ja mam i mi nie działa niestety
13.04.2010 at 09:14
no to oczywiste wczytujesz plik java na samym końcu – dlatego tak to jest. Jeśli komuś się nie chce przerabiać grafiki i css – to wrzucenie takiego pliku jest najłatwiejsze
13.04.2010 at 12:09
Dzięki! Wszystko działa.
13.04.2010 at 12:22
Tylko najpierw widać kolorową stronę, potem szarą. Nie da się tego do nagłówka bloga dać, żeby od razu była strona szara?
13.04.2010 at 17:38
Odezwij się do mnie na gg to Ci pomogę – nie wpisałeś adresu strony to nawet nie mogę podejrzeć
Wysłałem Ci w tej sprawie maila.
14.04.2010 at 19:36
to jest zwykłe pragromowanie polecenia wydajesz i system to wykonuje ,pozdrowienia
16.04.2010 at 07:13
Po pierwsze styl opacity: 1 stosuje się dla FF i jest to całkowity brak przezroczystości.
Po drugie dla IE trzeba by napisać ten sam parametr w postaci filter:alpha(opacity=100).
Po trzecie, jak się coś kopiuje z zewnątrz – warto najpierw sprawdzić.
16.04.2010 at 12:06
nie działa:( nie wiem co wpisac w tym nawiasie
16.04.2010 at 19:03
tak jak kolega napisał, że najpierw widać kolorową stronę, potem szarą. Nie da się tego do nagłówka bloga dać, żeby od razu była strona szara? przyłączam sie do jego pytania a tak to działa i dziękuje
16.04.2010 at 19:18
Niestety osobiście nie wiem jak to zrobić – dodaj do nagłówka, ale u mnie to nie zadziałało
Próbować można 
16.04.2010 at 19:19
Odezwij się do mnie na gg to Ci pomogę – ogólnie trzeba wpisać nazwę diva który okala całość. Jednak ktoś tutaj napisał że jemu działa nawet bez tej nazwy – testuj
16.04.2010 at 19:20
Masz rację – u tylko nie wiem dlaczego u mnie 1 nie zaciemnia całego – sprawdziłem.
16.04.2010 at 19:20
niestety nie znam takiej metody ;/
20.04.2010 at 14:43
W IE bez problemu z FF mam problemy, do następnej żałoby mam nadzieję, że rozkminie w czym problem. Ale dzięki za naprowadzenie na możliwe rozwiązania
05.07.2010 at 13:49
nie Java a JavaScript. A to roznica!