Nowy lay-out, własna skórka WordPress ;-) - my-motivator.pl Nowy lay-out, własna skórka WordPress ;-) - my-motivator.pl my-motivator.pl
Nowy lay-out, własna skórka WordPress ;-)
Wrzesień 30, 2013


Od wczoraj na blogu nowa skórka. Ma być bardziej kolorowo, ale bez wodotrysków. Chciałem się pochwalić – wszystko zrobiłem osobiście ;-)

Nowa skórka WordPress

Tak jak widzicie, powstała pierwsza w pełni autorska skórka WordPress w moim wykonaniu. Poświęciłem dla niej sporo czasu, natomiast mam wrażenie że się opłaciło. Jest z cała pewnością niepowtarzalnie i nie znajdziecie tego wyglądu na żadnym innym blogu.

Pewnie nie jest zbyt nowocześnie – nie taki jednak był cel. Uczyłem się, jak to wszystko przygotować, nie korzystając z szablonów rodziców i pisząc każdą linijkę kodu samodzielnie. Efekt jest taki, że chciałem pokombinować. I tak też zrobiłem. Widzę jeszcze parę aspektów wartych poprawy – natomiast generalnie wszystko już działa.

Na głównej stronie znajdziecie zatem 7 obszarów. Nagłówek wraz z opcjami menu i logiem jest pierwszym z nich. Zachęcam do sprawdzenia czegoś na kształt responsywności. Zrezygnowałem z takiej „pełnej” responsywności, ponieważ uznałem że przeliczanie wszystkich wartości na procenty i później ich specjalne pozycjonowanie nie mają do końca sensu. Strona jednak wyświetli się na każdym urządzeniu poprawnie, dzięki zastosowaniu mechanizmu zmienianych styli w odniesieniu do konkretnych rozdzielczości. Zachęcam do przetestowania, szczególnie na stronie głównej (tej z wpisami) gdzie zmienia się praktycznie wszystko ;-).

2013-09-29_21h26_33

Powracając jednak do obszarów – patrząc od góry po nagłówku widzicie 3 najnowsze wpisy, następnie w ramce znajdziecie 3 wpisy wybrane przeze mnie. Jeśli zmniejszycie rozdzielczość, liczba ta spadnie do 2. Następnie wyświetlona zostanie normalna pętla WordPress i 6 wpisów. Kończymy stopką, w której zmieściłem jeszcze 3 pola dla widgetów – przy niższych rozdzielczościach się to nieco zmienia.

Po prawej stronie w zależności od widoku – 2 lub nawet 3 sidebary. Pierwszy wyświetlał będzie cytat dnia (ten sam, który pojawia się codziennie na Facebooku). Tutaj korzystam z nieautorskiego projektu (jeszcze;p) – wtyczki Daily Tips. Następne sidebary prezentują wybrane przeze mnie treści ułożone w HTML jako widgety tekstu.

Social buttons ukryte pod panelami

Social buttons ukryte pod panelami

Szczególnie podobają mi się przykrywane pola portali społecznościowych, które widzicie nad i pod wpisami. Niestety w starszych przeglądarkach ich wyświetlenie jest niemożliwe – staram się unikać skryptów itd., a efekt osiągnąłem przy użyciu tylko CSS3. W najnowszym Internet Explorer 10 niestety nie można korzystać z tej funkcjonalności – gubi się on w relacjach – dziecko vs. rodzic… Tragedia Microsoftu i ich IE trwa zatem dalej i najnowsze wersje tego nie zmieniają. Ciekawe jak wypadnie IE11.

Podsumowując – skórka moim zdaniem jest akceptowalna ;-) Kiedyś może przygotuję coś bardziej „modern”. Muszę jednak trochę od tego odpocząć, ponieważ wykonywanie tych samych zadań w pracy i domu staje się nużące ;)

Wtyczka „Social Slider My-Motivator

Po lewej stronie zauważyliście zapewne linki do portali społecznościowych ukryte w chowających się zakładkach. Przy mniejszych rozdzielczościach wygląd ten się nieco zmienia i przestaje być wyskakującym. To właśnie moja pierwsza wtyczka do WordPress – „Social Slider My-Motivator” z której jestem niezwykle zadowolony. Wiadomo – problemów z InternetExplorerem spotkałem znów ogromne ilości, dlatego w IE wyświetla się ów Social Slider My-Motivator w nieco innej formie – zachęcam do testów.

social slider facebook

social slider facebook

Pewnie na stronie jest jeszcze wiele błędów i niedociągnięć których nie udało mi się wychwycić. Jeśli zatem znajdziecie coś, co warto było by poprawić – proszę o kontakt w komentarzu lub poprzez przeprojektowany formularz kontaktowy ze strony kontakt.

Kubiak Krzysztof


Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CommentLuv badge