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.  

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.

STYLIZACJA: Zbliżająca się wiosna

Ta stylizacja utrzymana jest w kolorach zieleni i bieli. chciałam użyć jak najmniej użyć grafik, aby wygląd był bardziej przejrzysty. Pomysł narodził się pod koniec lutego, kiedy zaczęło się robić coraz cieplej w Warszawie. W zupełnie nowy sposób zaaranżowałam newsy. Najbardziej by pasował chyba na jakiego bloga, heh.

STYLIZACJA: Manchester United

Piłka nożna to nie moja smykałka, dlatego na początku tworzenia tego stylu miałam kłopot z wyborem zdjęć do topa strony. Tak jak w przypadku, poprzedniego stylu, nie ma loga graficznego, a jest ono w postaci tekstu - po prostu nazwa strony. Na vgh.pl jest bardzo dużo tworzonych stron o tematyce sportowej, a tą stylizacją chciałam pokazać, co można uzyskać stosując CSS.

STYLIZACJA: Łososiowe maki

Zamieszczam pierwszą na blogu stylizację przygotowaną na vgh.pl "Łososiowe maki" - wybrałam taki tytuł gdyż najbardziej pasował mi do stworzonej przeze mnie kolorystyki. W tej edycji nie ma logo w postaci grafiki, zastępuje je logo tekstowe. Pomysł powstał, gdy jedna z użytkowniczek forum webmasterzy.org stwierdziła, że kobieca mniejszość jest nie doceniana. Może ktoś stwierdzić, że styl jest zbyt cukierkowy, ale jak dla mnie jest po prostu ok.

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 poszerzyć forum na całą szerokość (artykuły, linki, galerię, podstrony)

Czy jest możliwość poszerzenia forum na całą szerokość? Takich tematów na forum w.org pojawiało się od groma. Dzięki poradnikowi pokaże wam jak poszerzyć forum na pełną szerokość strony, bez paneli bocznych. Metodę można również zastosować do innych działów strony.

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.

VGH: Jak usunąć niepożądane grafiki w szablonie

Bardzo często się zdarza, że nie można usunąć jakiejś grafiki w szablonie, gdyż głównie takie szablony są słabo zakodowane przy pomocy CSS, czyli danemu fragmentowi nie została przypisana klasa. Przykłady skórek z takowymi problemami to m.in. Blogger - top strony (header), Localize - top strony (header), Warcraft - grafika w stopce. Temat dosyć często się przewija, więc aby ułatwić reszcie życie, to powstał ten poradnik.

VGH: Jak dodać graficzne kategorie w Artykuły, Download, Linki, Faq

Kategorie w takich działach jak Artykuły, Download, Linki, Faq to "suche" linki, bez wyrazu. Stosując CSS można te kategorie wzbogacić o grafiki czy tła, ale bardziej upiększyć stronę. Jedynym ograniczeniem jest nasza wyobraźnia. Możemy zastosować drobne grafiki, które odzwierciedlają tematykę kategorii, większe grafiki, bądź tylko kolorowe tła. Przygotowałam dwie wersje kodów, takie jak na przykładowym obrazku.