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.

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.  

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.

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.

Pięć dodatków wartych uwagi

Nie muszę pisać czym są dodatki, gdyż każdy doskonale to wie. Istotną umiejętnością jest właściwy ich dobór, aby wybrać te, które staną się pożytecznymi elementami strony.
Pamiętaj, aby umieszczać takie dodatki, które wzbogacą twoją stronę, a nie je zaśmiecą. Nie wrzucaj wszystkiego hurtem, jak: pogody, kalendarzy, zegarków, imienin, świąt itp... jeśli one tak na prawdę są zbyteczne na stronie. Przeładowana strona takimi śmieciami odpycha potencjalnego użytkownika, niż go zachęca do rejestracji.

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.

VGH: Jak dodać legendę w Forum

Poradnik pokaże wam jak można dodać prostą legendę z rangami, widoczną w Forum na stronach założonych na vgh.pl. Poradnik jest skierowanych dla tych osób, które stosują także poradnik: Kolorowanie ników administratora, moderatora. Największym mankamentem jest fakt, że wszystko należy robić ręcznie.

VGH: Jak dodać graficzny opis forum

Na bardzo wielu forach dyskusyjnych, poszczególne fora/kategorie są opatrzone grafiką. W poradniku pokażę wam dwa sposoby aby uzyskać dwa różne efekty dodania grafiki za pomocą CSS, aby ozdobić w ten sposób swoje forum na stronach vgh.pl.

VGH: Jak zmienić ikonkę bullet

Ikonka bullet to nic nadzwyczajnego, po prostu kilku pikselowa mała grafika, która jest wyświetlana w nawigacji, shoutboxie, profilu i innych panelach strony, która jest w postaci trójkącika, kropki, strzałki lub jeszcze innej formy w różnych kolorach. Coś strasznego? Może nie, ale jeśli jesteś osobą, która edytowała nie jednokrotnie styl strony to często taka pomarańczowa bądź zielona ikona wszystko wizualnie psuła. Przedstawię ci bardzo prostu kod, za pomocą którego zmienisz tą ikonkę, na taką jaką chcesz.

VGH: Jak dodać avatary w shoutboxie i komentarzach

Z powodu brak dostępu FTP na vgh.pl to normalnie w plikach php nie możemy wprowadzić takich zmian, aby przy nickach w shoutboxie i komentarzach pojawiły się avatary użytkowników. Aby obejść tą niedogodność można zastosować CSS.

Niestety metoda ma dużą wadę. Jeśli strona posiada dużo userów, to dodawanie avka każdemu użytkownikowi może powodować duże niedogodności. Dodawanie tych avatarów może nie powodować w nas czerwonej gorączki, jeśli witryna skupia małą grupkę userów.

VGH: Jak zmienić system ocen

Na vgh system ocen wyrażany jest za pomocą określeń od "Świetny!" do "Słaby", a co jeśli chcielibyśmy mieć gwiazdki, kropki, łapki bądź inne ikonki? Nie można? Oczywiście, że można to zmienić dzięki dobremu CSS. Poradnik stworzyłam specjalnie dla jednego z userów z forum webmasterzy.org - Tomi1991, który swego czasu pytał się mnie czy kiedyś pojawi się jakaś modyfikacja związana z ocenami.

VGH: Jak dodać własne emotikony

Każdy z nas na pewno codziennie posługuje się emotikonami w trakcie pisania na forach, blogach, czatach. Na stronach założonych na vgh.pl pomimo dostępu do FTP, możemy zmienić emotki przy pomocy CSS. Małe, duże, zielone, czarne - jakie tylko chcemy. Na deviantart możemy znaleźć od groma różnych zestawów emotek, a ja wam pokaże jak je umieścić na stronie dzięki zastosowaniu CSS.

VGH: Jak dodać w forum ikonki z innego stylu

Korzystamy z wybranego stylu, w którym nie podobają się nam ikonki sygnalizujące nowe posty, brak nowych postów, temat przyklejony, temat zablokowany, itd., a chcielibyśmy takie z innego stylu? I co zrobić? Raz możesz zastosować mój poradnik Jak zmienić w forum ikonki nowe posty, brak nowych postów itp. lub zastosować poniższą metodę, aby zaimplementować ikonki ze innego stylu do swojego. Wszystko w oparciu o CSS.

VGH: Jak zmienić w forum ikonki nowe posty, brak nowych postów itp.

Masz stronę na vgh, ale spędza ci sen z powiek fakt, że nie możesz zmienić ikonek w forum, które sygnalizują nowe posty, brak nowych postów itp? Brak FTP nie jest przeszkodą, gdy zna się CSS. Dzięki poradnikowi wyjaśnię ci jak standardowe ikony w Forum, które sygnalizują nowe posty, brak nowych postów, temat przyklejony, temat zablokowany, itd. zmienić na własne ikonki tak jak na obrazku obok (pierwsze pochodzą ze stylu Executive, zaś drugie to już moje ikonki).

VGH: Jak dodać graficzne rangi w Forum

Z tego co pamiętam na forum w.org przewijało się od groma pytań czy istnieje możliwość dodania graficznych rang. Na każdym forum takie rangi to prawie podstawa. Brak dostępu do FTP na vgh.pl, już na wstępie eliminuje te strony, aby w ich forach pojawiła się tak możliwość. Czy do końca? Nie. Dzięki zastosowaniu CSS można ręcznie wprowadzić taką opcję, aby z rang w postaci słów zmienić ja na kolorowe grafiki. Stosując mój poradnik można uzyskać efekt jaki widać na obrazku obok.