STYLIZACJA: Kapitan Ameryka

Tym razem Kapitana Amerykę postanowiłam wybrać jako motyw przewodni do nowej stylizacji na vgh. Wykorzystałam tą tapetę jako główne tło strony i to ona zdecydowanie nadaje całości ciekawego klimatu, a raczej nadaje całości dynamizmu, mam nadzieje, że macie podobne wrażenie. Dla ciekawskich, wykorzystałam czcionkę Bangers, która idealnie mi pasuje do marwelowskiego świata :)

STYLIZACJA: Balon

Zamieszczam kolejną stylizację. Tym razem strona na pełnej szerokości z ładnym prostym topem oraz jasną minimalistyczna kolorystyką. Przejrzystość i czytelność czasami jest lepsza niż przepych. Sądzę, że taka stylizacja pasowałaby na wszelkiego rodzaju strony wielotematycznych, firmowych, o grach, filmach etc...

STYLIZACJA: Gotowanie

Baaaaardzo dawno nic nie pisałam i wszystko stanęło całkowicie w miejscu. Niestety, ale życie czasem pisze swój scenariusz i niestety mam drobne problemy życiowe, przez które nie miałam często czasu bądź ochoty aby zająć się czymkolwiek na blogu. Liczę, że ulegnie to zmianie i zamieszczam podgląd nowego stylu. Ostatnio na w.org padło pytanie czy są jakieś skórki związane z gotowaniem. Jak wiemy nie ma żadnej i to mnie zainspirowało do utworzenia tej prostej stylizacji.

STYLIZACJA: Fashion

Mam pomysły więc korzystam z okazji i tworzę nowe stylizacje. Czy nie zdziwiło was, że jakoś na vgh nie ma stron poświęconych tematyce mody? A może jakoś do tej pory nie miałam okazji na takie natrafić? Dlatego kolejną swoją pracę poświęcam temu tematowi. Tym razem dodałam grafiki do kategorii newsów i przemieściłam je na dolną lewą stronę newsa.

VGH: Jak edytować styl na vgh #1 - wstęp

Jak zapowiadałam wcześniej, uruchamiam cykl postów, za pomocą których wyjaśnię jak edytować styl na stronach zakładanych na vgh.pl. Jeszcze na wstępie chcę zaznaczyć, że poradnik będzie bardzo, ale to bardzo łopatologiczny. Głównie jest on skierowany dla osób, które w ogóle nie mają pojęcia jak tzw. ugryźć to CSS, bądź jest to dla nich czarna magia. Postaram się wytłumaczyć wszystko krok po kroku, jak dziecku które chce się nauczyć liczyć od 1 do 10. 

Przypominam, że pierwszy poradnik na temat edycji  stylu został stworzony przez Kei92 i możecie go znaleźć na w.org - tutaj.

STYLIZACJA: Kwiat wiśni

Po pierwsze stylizację stworzyłam spontanicznie, chciałam uzyskać coś bardzo kobiecego. Po drugie, jak można zauważyć całość trochę przypomina bardziej bloga niż stronę na php-fusion. Uzyskanie takiego efektu było zamierzone, a dodatkowo chciałam wycisnąć tyle ile się da, aby stylizacja była przyjemna dla oka. Po trzecie - menu górne, poziome (w tym również ikonki dodające nowe treści), shoutbox to są wystylizowane domyślne panele. Jedyny HTML jaki tam jest dodatkowo wrzucony to ikonki portali społecznościowych i wyszukiwarka. Panel lewy jest stały względem przeglądarki, czyli w chwili przesuwania suwaka w dół, przesuwają się tylko newsy i panele prawe. Szerokość strony jest wyrażona w 100%, więc dopasuje się również do mniejszych rozdzielczości monitorów niż jest u mnie :D

STYLIZACJA: Real Madryt

Na początku muszę napisać, że nie interesuje się piłką nożną. Padło na Real Madryt, gdyż po pierwsze na vgh.pl zakładanych jest wiele stron poświęconych klubom piłkarskim, a po drugie wybrałam zespół, który jest bardzo popularny. Na pomysł stylizacji wpadłam wczoraj i dzisiaj zakończyłam kodować. Całość, jak widać, utrzymałam w odcieniach żółci i szarości. Dodatkowo umieściłam inną wyszukiwarkę oraz slider pod menu.

STYLIZACJA: Niebieska

Nowa stylizacja powstała na tzw. "spontanie". Cały czas trzymam się nurtu tworzenia całości w stylu magazynu i bez lewych paneli. Szarości, błękity (#1bb3cd i #45a8b3) i ciut czerni to chyba obecnie moi faworyci. Jak na razie to moja ulubiona edycja. Prostota, lekkość i przejrzystość to zdecydowanie najlepszy wybór na uzyskanie ładnego wyglądu strony. Po za tym, może kiedyś wrzucę poradnik jak zrobić taką stopkę newsów :)

VGH: Jak zmienić wygląd informacji o ciasteczkach

Od marca zeszłego roku, zgodnie z Prawem Telekomunikacyjnym (Dziennik Ustaw z 21.12.2012, poz. 1445) dotyczącym plików cookies, wszystkie strony są zobowiązane do zamieszczania informacji o tych plikach. Emil z automatu wprowadził na wszystkich stronach vgh taką informację, która znika w chwili odświeżenia strony. Nie mam zastrzeżeń odnośnie treści komunikatu, lecz samego wyglądu. Pokażę wam jak zmienić ten element wizualnie.  

Blender colorów

Color Blender to narzędzie on-line, dzięki któremu na podstawie wybranych dwóch kolorów, wyświetlą się nam kolory pośrednie. Ktoś zapyta po co nam to? Jeśli tworzysz szablon swojej strony, to zawsze na początku każdy z nas ma jakiś pomysł jakie kolory powinny tworzyć wizualnie witrynę. Na przykład chcemy stworzyć stronę, której kolorystyka będzie się składała z dwóch zasadniczych kolorów, zielonego i błękitnego jak na przykładzie poniżej. Narzędzie pokaże nam kolory pośrednie w odniesieniu do naszych kolorów. Kolory pośrednie możemy wykorzystać m.in. do stylizacji cieni bloków, linków, hr i czego tam nam dusza zapragnie, aby strona nie była monotonna, a za to ciekawa.

STYLIZACJA: Magazyn black

Idąc tropem stylizacji w wersji magazynu, jak ta tutaj, chciałam stworzyć coś ciemnego jednak prostego i łatwo czytelnego. Kolorystykę głównie dobrałam w czerni i ciemnych szarościach. Kilka kolorowych akcentów dodałam tylko po to aby całość nie była ponura.

STYLIZACJA: Newspaper

Uzmysłowiłam sobie, że jak do tej pory nie widziałam aby na php-fusion powstał jakiś fajny szablon w stylu magazynu. Poniższą stylizację na vgh zaaranżowałam w samych szarościach, aby całość była prosta i przejrzysta. Wykorzystałam tylko dwa fonty "Courier New" i "Verdana". Ikonki w stopce newsów są zakodowane w identyczny sposób jak w stylu: Niebiesko-zielony wektor.

STYLIZACJA: Niebiesko-zielony wektor

Pomysł na tą stylizację narodził się dzisiaj. Chciałam stworzyć coś prostego i przejrzystego z dozą jasnych kolorów. Wybór padł na #9cc62b oraz #70e2da. Nie chciałam też wykorzystywać jakiś postaci bądź krajobrazów w topie, więc wybór padł na wektory. Najwięcej nerwów przysporzyło mi menu górne, głównie przez to, że wszystkie menu w skórkach są kodowane w postaci - link obok linku. Byłoby wygodniej gdyby kod był zamieszczony w liście nieuporządkowanej (ul). Stylizowałam oczywiście domyślne menu poziome z zastosowaniem rotacji (CSS3).

STYLIZACJA: Pink

Stylizacja powstała jako moja odpowiedź dla Eluchy, która pytała się czy na vgh.pl dam radę wyczarować stylizację, przypominającą skórkę, która się jej podobała. Całość oczywiście utrzymana w kolorystyce czarno-szaro-różowej.

CSS3 generator

Strona css3generator.com to bardzo ciekawy i użyteczny generator dla wszystkich projektantów szablonów. Nie musimy pamiętać wszystkich atrybutów, a zwłaszcza deklaracji prefiksów dla różnych przeglądarek -moz-, -webkit- itp. Od ręki możemy wygenerować sobie kod z pożądanymi wartościami atrybutów. Do wyboru mamy Border Radius, Box Shadow, Text Shadow, RGBA, @Font Face, Multiple Columns, Box Resize, Box Sizing, Outline, Transition, Transform, Gradient.

VGH: Jak dodać efekt zoom

Stosując CSS3, bez jQuery możemy w łatwy sposób uzyskać efekt zoomu, czyli powiększania się zdjęcia lub bloku tekstowego po najechaniu na niego kursorem. Aby poznać szczegóły zapraszam do rozwinięcia posta. Wersje demonstracyjną można zobaczyć TUTAJ.

VGH: Jak upiększyć panel logowania

Dzięki poradnikowi dowiecie się jak edytując przy pomocy CSS kilka pseudoklas, można uzyskać ładnie wyglądający domyślny panel logowania.
Na pierwszym zdjęciu od lewej widać jak normalnie wygląda ten panel, zaś zdjęcia obok pokazują co można tzw. upiększyć za pomocą CSS.

VGH: Jak umieścić panele boczne po jednej stronie

Zauważyłam, że osoby, które chcą mieć panele boczne po jednej stronie, to w jednym panelu bocznym wklejają kod tabeli z dwoma kolumnami, a następnie umieszczają tak treść, przez co imituje ona wygląd strony z dwoma panelami po jednej stronie. Cóż, stosując tą metodę, admini nie mogą już wykorzystać domyślnych paneli np. z ankietą, shoutboxem, tematami na forum czy panelem logowania.

Dzięki poradnikowi, pokażę wam, że panele lewe/prawe jednocześnie można umieścić po jednej stronie (patrz obrazek niżej), bez konieczności tworzenia własnych kodów z tabelami, a wystarczy zastosować CSS - dokładniej atrybut float.

VGH: Jak ustalić stałą szerokość zdjęć w Forum

Bardzo często dodawane zdjęcia w postach w Forum na stronach vgh.pl deformują wygląd strony, tzw. strona się rozjeżdża, zwłaszcza jak ktoś ma ustaloną szerokość strony w px, a zdjęcie ma znacznie większą szerokość. Przeglądanie w takiej sytuacji strony/konkretnego tematu jest wizualnie nie korzystne. Aby ustalić wszystkim dodawanym zdjęciom konkretną szerokość można to zrobić przy pomocy CSS. Uwaga: poniższy kod z poradnika także będzie wpływał na szerokość zdjęć dodanych do sygnaturek.

Zmiana wielkości tekstu przez czytelnika

Zastosowanie poniższego kodu na stronie, umożliwi osobie przeglądającej witrynę zmianę wielkości fontów do takiej, jakiej czytelnik sobie życzy. Czytelnik będzie mógł powiększyć, bądź pomniejszyć tekst na stronie wg swojego upodobania. Poradnik przygotowałam w oparciu o skrypt Document Text Sizer ze strony www.dynamicdrive.com.