BUDOWA WŁASNYCH SKÓREK DLA BLOGÓW MY.GTG
WERSJA 1.0

I. WSTĘP

W tym poradniku zostaną przedstawione pokrótce metody tworzenia skinów, przeznaczonych do użycia na blogach My.GTG. Po lekturze niniejszego dokumentu, powinieneś bez problemu utworzyć swoją własną atrakcyjną skórkę. No... przynajmniej mam taką nadzieję :)

Osobom obeznanym z CSS'em polecam zapoznać się jedynie z listą dostępnych klas. Im raczej dodatkowe porady tu zamieszczone, nie będą potrzebne.

Zacznijmy od początku. W archiwum razem z tym dokumentem znajdziesz jeszcze 3 pliki: test_css.css, test_top.png, test_top_tlo.png oraz mygtg_logo.psd. Pierwszym zajmiemy się na początku, drugi posłuży nam jako top (lub też jak niektórzy mówią: logo) strony, a co zrobić z trzecim i czwartym powiem po drodze :p Otwórz plik test_css.css najlepiej w jakimś prostym edytorze tekstu lub html'a (ten jest lepszy, bo prawdopodobnie koloruje składnię). Wewnątrz znajduje się 47 ponumerowanych bloków. Każdy z nich odpowiada za konkretny element strony. Wiem, wiem - z początku wygląda to strasznie, lecz już za moment wszystko stanie się jasne :D Od razu uprzedzam, że wygląd blogu będziemy ustalać modyfikując TYLKO klasy (fragmenty objęte klamrami), reszta nas nie interesuje. Dodam też, że definiować można jedynie kolorki, tła (również sposób jego powtarzania), obramowania i (w wybranych miejscach) rozmiary/wymiary. Także jeśli ktoś spróbuje np. "rozwalić" stronę poprzez ustawienie szerokości jakiegoś elementu na 1000px to nie powinno mu się to udać - system sam wszystko skoryguje :>

II. PODSTAWY

Na początek kilka "fachowych" pojęć, żeby było wiadomo o czym mówię. Spójrz na poniższą ramkę:

body {
color: #555555;
}

Wszystko co w niej widzisz to tzw. KLASA (ang. class). W naszym przykładowym pliku test_css.css mamy takich klas 46. Klasa opisuje dany element strony, który jest zdefiniowany za pomocą NAZWY KLASY (czerwony fragment). Z reguły nazwą klasy jest nazwa znacznika (tag'u) html'owego, który ta klasa opisuje. Tak więc, jeśli chcemy zdefiniować wygląd zawartości obejmowanej przez tag body, to klasę nazywamy wtedy body. Istnieje możliwość nadania klasie innej nazwy i przypisania jej do konkretnego tag'u jednak teraz nie jest nam to potrzebne. Fragment oznaczony kolorem czarnym to ATRYBUT. Przykładowo atrybut color definiuje kolor tekstu. Dostępnych atrybutów jest wiele. Te, których można użyć przy budowie skina, będę omawiał na bieżąco. Ostatnim pojęciem jest WARTOŚĆ atrybutu (niebieski). Jeśli dla atrybutu color ustawimy wartość np. red to wtedy tekst objęty klasą będzie miał kolor czerwony :) Kolor można określać słownie (po angielsku) lub heksadecymalnie (szesnastkowo), np. red da nam taki sam efekt jak #FF0000. Proste? No to przejdźmy teraz do pierwszego fragmentu.

III. DOSTĘPNE KLASY

1

body {
background: #eeeeee;
scrollbar-face-color: #ededed;
scrollbar-highlight-color: #dedede;
scrollbar-shadow-color: #dedede;
scrollbar-arrow-color: #0d6679;
scrollbar-track-color: #eeeeee;
scrollbar-3dlight-color: #eeeeee;
scrollbar-darkshadow-color: #eeeeee;
}

Klasa określa ogólny wygląd całego dokumentu. Możemy tu zdefiniować tło (atrybut background lub jeśli chcemy w tle umieścić grafikę, powinniśmy użyć atrybutu background-image z wartością url(nazwa_pliku_graficznego) - jeśli używamy jednego atrybutu, drugi możemy usunąć). Atrybuty scrollbar-* (działa w przeglądarkach Opera oraz IE) służą do określenia wyglądu wszelkich suwaków w obrębie całej strony. Polecam samodzielne eksperymety z kolorami :)

2

table.top_tlo {
background-image: url(test_top_tlo.png);
background-repeat: repeat-x;
}

Klasa pozwala określić dodatkowe tło (jeśli np. chcemy tak jak w przykładzie "rozciągnąć" top strony na całej szerokości). Używamy wówczas pliku zbliżonego wyglądem do top'u (takiego jak test_top_tlo.png) i powtarzamy jego wyświetlanie tylko w poziomie - służy do tego atrybut background-repeat. Wartości jakie możemy mu przypisać to:
- repeat-x - powtarza w poziomie
- repeat-y - powtarza w pionie
- no-repeat - wyświetla raz i nie powtarza
Gdy nie podamy atrybutu background-repeat wogóle, tło będzie powielane zrówno w pionie jak i w poziomie. Jeśli chcemy ustalić, z którego miejsca tło ma zacząć się powtarzać, powinniśmy wstawić do klasy dodatkowy atrybut background-positon. Jako wartość należy wtedy podać miejsce, od którego rozpocznie się powielanie tła. Aby tło zaczęło powtarzać się w prawym dolnym rogu strony wpisujemy bottom right (w całości powinno wyglądać to tak: background-position: bottom right;).

3

td.top_menu {
color: #222222;
background: #76b4c1;
text-align: right;
height: 20px;
}

Klasa definiuje wygląd komórki tabeli, zawierającej linki do poszczególnych modułów blogu (blog, archiwum, galeria, itd). Atrybutem color określimy tu kolor separatorów "·" oddzielających linki. Atrybut text-align ustala wyrównanie linków w komórce, a height wysokość komórki tak by można było dopasować ją rozmiarami do tła.

4

td {
color: #555555;
}

Klasa definiuje wygląd podstawowej komórki i jej zawartości, gdy nie zostało to określone inną klasą.

5

.sitehead {
color: #0d6679;
}

Klasa definiuje wygląd nagłówka news'ów (i innych nagłówków do niego podobnych).

6

.usitehead {
color: #aaaaaa;
border-bottom: 1px solid #aaaaaa;
}

Klasa definiuje wygląd tekstu pod nagłówkiem news'a. Atrybuty:
- border-bottom - określa dolne obramowanie (1px - grubość, solid - styl linii, #aaaaaa - kolor); jako styl linii można wstawić jeszcze m.in dotted - linia przerywana, double - linia podwójna, więcej

7

.sitebody {
color: #555555;
}

Klasa definiuje wygląd tekstu w treści news'a.

8

a {
color: #1c94ae;
text-decoration: none;
}

9

a:hover {
color: #aaaaaa;
text-decoration: underline;
}

Klasy definiują wygląd standardowych linków (8) oraz ich wygląd po najechaniu na nie kursorem myszy (9). Atrybuty:
- text-decoration - dekoracja tekstu (underline - podkreślenie, overline - linia nad tekstem, none - brak dekoracji, underline i overline można używać razem dzięki czemu otrzymamy obydwa efekty jednocześnie)

10

a.top_menu {
font-family: georgia;
font-size: 14px;
color: #ffffff;
text-decoration: underline;
text-transform: lowercase;
font-style: italic;
}

11

a.top_menu:hover {
font-family: georgia;
font-size: 14px;
text-decoration: none;
}

Klasy definiują wygląd linków w górnym menu (10) prowadzących do głównych modułów oraz ich wygląd po najechaniu na nie kursorem myszy (11). Atrybuty:
- font-family - krój czcionki
- font-size - rozmiar czcionki
- text-transform - wymuszenie zmiany wyglądu tekstu (lowercase - zamienia litery na małe, uppercase - zamienia litery na wielkie)
- font-style - styl czcionki
- font-weight - "waga" czcionki (np. bold)

12

.menupoint {
color: #cccccc;
}

Klasa definiuje wygląd puktora "»" użytego w nagłówkach m.in menu.

13

.menuhead {
color: #f5f5f5;
border: 1px solid #2C2B28;
background: #0d6679;
}

Klasa definiuje wygląd nagłówka menu.

14

.menubody {
color: #333333;
border-left: 1px solid #2C2B28;
border-right: 1px solid #2C2B28;
border-bottom: 1px solid #2C2B28;
}

Klasa definiuje wygląd obszaru obejmującego treść bloku menu.

15

.menu {
color: #666666;
}

16

a.menu:hover {
color: #666666;
background: #dfdfdf;
}

Klasa definiuje wygląd linków znajdujących się w bloku menu (15) oraz ich wygląd po najechaniu na nie kursorem myszy (16).

17

.cytat {
color: #0d6679;
border: 1px solid #aaaaaa;
background: #dfdfdf;
}

18

.kod {
color: #0d6679;
border: 1px solid #aaaaaa;
background: #dfdfdf;
}

Klasa definiuje wygląd fragmentów tekstu oznaczonych w BBCode jako quote (cytat) i code (kod).

19

.input_file {
color: #000000;
background: #dfdfdf;
border: 1px solid #2C2B28;
}

Klasa definiuje wygląd elementu formularza file (służącego do uploadu plików).

20

input.blog {
color: #555555;
background: #dfdfdf;
border: 1px solid #2C2B28;
}

Klasa definiuje wygląd elementu formularza input (zwykłe pole tekstowe).

21

input.radio {
color: #555555;
background: #dfdfdf;
}

Klasa definiuje wygląd elementu formularza radio (pole jednokrotnego wyboru).

22

textarea {
color: #555555;
background: #dfdfdf;
border: 1px solid #2C2B28;
}

Klasa definiuje wygląd elementu formularza textarea (pole tekstowe).

23

select.blog {
color: #555555;
background: #dfdfdf;
border: 1px solid #2C2B28;
}

Klasa definiuje wygląd elementu formularza select (rozwijana lista wyboru).

24

.strony {
color: #aaaaaa;
border-top: 1px solid #aaaaaa;
}

Klasa definiuje wygląd komórki (zawierającej stronicowanie - linki do kolejnych stron) oraz jej zawartości. Atrybuty:
- border-top - styl górnego obramowania komórki

25

td.stopka {
color: #aaaaaa;
border-top: 1px solid #aaaaaa;
}

Klasa definiuje wygląd komórki stopki oraz jej zawartości.

26

a.stopka {
color: #aaaaaa;
}

27

a.stopka:hover {
color: #0d6679;
}

Klasa definiuje wygląd linków w stopce i stronicowaniu (26) oraz ich wygląd po najechaniu na nie kursorem myszy (27).

28

.arch_tab {
border-bottom: 1px solid #2C2B28;
}

Klasa definiuje wygląd tabeli w archiwum. Styl obramowania powinien być identyczny z tym z klas .arch_rok, .arch_mies i .arch_ln.

29

.arch_rok {
background: #dfdfdf;
border-top: 1px solid #2C2B28;
border-right: 1px solid #2C2B28;
border-left: 1px solid #2C2B28;
}

Klasa definiuje wygląd komórki (tabela w archiwum) zawierającej rok oraz jej zawartości.

30

.arch_mies {
background: #eeeeee;
border-top: 1px solid #2C2B28;
border-right: 1px solid #2C2B28;
border-bottom: 1px solid #2C2B28;
}

Klasa definiuje wygląd komórki (tabela w archiwum) zawierającej miesiące oraz jej zawartości.

31

.arch_ln {
background: #dedfde;
border-right: 1px solid #2C2B28;
}

Klasa definiuje wygląd komórki (tabela w archiwum) zawierającej random post oraz jej zawartości.

32

.alb_tab {
border-top: 1px dotted #aaaaaa;
}

Klasa definiuje wygląd tabeli w galerii. Styl obramowania powinien być identyczny z tym z klas .ualbhead i .ulinkhead.

33

.albhead {
color: #555555;
}

Klasa definiuje wygląd nagłówka (nazwy albumów, tytuły obrazów nad miniaturkami) w galerii.

34

.ualbhead {
color: #aaaaaa;
border-bottom: 1px dotted #aaaaaa;
}

35

.ulinkhead {
color: #aaaaaa;
border-bottom: 1px dotted #aaaaaa;
}

Klasa definiuje wygląd tekstu pod nagłówkiem (pod nazwami albumów, tytułami obrazów) w galerii (34) oraz pod nazwami stron w linkach (35).

36

img.alb {
border: 1px solid #0d6679;
}

37

img.alb:hover {
border: 1px solid #2C2B28;
}

Klasa definiuje wygląd obramowania miniaturki w galerii (36) oraz jego wygląd po najechaniu na miniaturkę kursorem myszy (37).

38

img.obr {
border: 1px solid #0d6679;
}

Klasa definiuje wygląd obramowania powiększenia obrazu w galerii.

39

td.kal {
color: #2C2B28;
border: 1px solid #aaaaaa;
}

Klasa definiuje wygląd tekstu znajdującego się w komórce kalendarza (dzień powszedni) oraz jej obramowania.

40

td.kal_n {
color: #0d6679;
background: #dfdfdf;
border: 1px solid #aaaaaa;
}

Klasa definiuje wygląd tekstu znajdującego się w komórce kalendarza (niedziela) oraz jej obramowania.

41

td.kal_d {
color: #dfdfdf;
background: #0d6679;
border: 1px solid #2C2B28;
}

Klasa definiuje wygląd tekstu znajdującego się w komórce kalendarza (aktualny dzień) oraz jej obramowania.

42

a.kal_l {
color: #2C2B28;
}

Klasa definiuje wygląd linku znajdującego się w komórce kalendarza (dzień powszedni).

43

a.kal_nl {
color: #0d6679;
}

Klasa definiuje wygląd linku znajdującego się w komórce kalendarza (niedziela).

44

a.kal_dl {
color: #dfdfdf;
}

Klasa definiuje wygląd linku znajdującego się w komórce kalendarza (aktualny dzień).

45

img.foto {
border-right: 1px solid #2C2B28;
}

Klasa definiuje wygląd obramowania zdjęcia w bloku menu moja kartoteka. Styl obramowania powinien być identyczny z tym z klasy .menubody.

46

td.kartoteka {
color: #555555;
}

Klasa definiuje wygląd tekstu w bloku menu moja kartoteka.

No, skoro znasz już wszystkie klasy i wiesz co opisują, możesz przystąpić do samodzielnej modyfikacji pliku test_css.css. Pamietaj, że jeśli używasz jako tła plików graficznych, to najwygodniej bedzie umieścić je w jednym folderze razem z plikiem CSS. Wówczas w klasach nie musisz podawać pełnej ścieżki dostępu do pliku (http://serwer.pl/folder/plik.png, itp), a jedynie samą jego nazwę (plik.png). Po zmodyfikowaniu pliku CSS, możesz przystąpić do tworzenia top'u strony.

IV. TOP STRONY

Co do tworzenia top'u, nie będę się rozpisywał. Najlepiej podam tylko kilka wskazówek odnośnie jego zalecanych parametrów:
- szerokość: maksymalnie 700px (po przekroczeniu tej wartości, strona się rozjedzie)
- wysokość: od 50px do 200px (zbyt małe i zbyt duże top'y nie są przyjemne dla oka, zwłaszcza jeśli nie zawierają nic ciekawego)
- format: najlepiej PNG (jest chyba najwygodniejszy - wysoka jakość, stosunkowo mały rozmiar), ale można użyć też JPG lub GIF; zdecydowanie odradza się używanie bitmap (BMP) - długo się ładują
- waga/rozmiar: do 20kB

W top'ie można umieścić praktycznie wszystko (oprócz treści określonych w regulaminie jako zabronione) - niekoniecznie jego tematyka musi być związana z serią Grand Theft Auto. Warto umieścić tam też jakiś tytuł/swój nick, gdyż system pomija wstawianie go (tak jak ma to miejsce w naszych gotowych skórkach).

Jeśli chcesz w swoim top'ie umieścić logotyp My.GTG, możesz skorzystać z dołączonego do tego archiwum pliku PSD. Zawiera on łatwe do umieszczenia u siebie logo systemu. Plik PSD można otworzyć przy pomocy programu Adobe Photoshop. Prosimy o nie nadużywanie logotypu oraz o nie umieszczanie go poza systemem (na innych stronach). Praktyki takie będą karane usunięciem blogu, blokadą konta lub w inny sposób ustalony przez Administratora.

V. UŻYWANIE SKÓRKI

Na koniec pozostaje nam tylko umieścić wszystkie pliki na zdalnym serwerze WWW (może to być nawet zwykłe darmowe konto bez PHP, MySQL, etc - ważne tylko, aby serwer miał wyłączone zabezpieczenie hotlink) i wskazać URL do nich w panelu swojego blogu. W tym celu wchodzimy do panelu i przy opcji styl blogu zaznaczamy Mój Styl. Następnie przechodzimy do opcji adres pliku z topem strony i w pole obok wpisujemy URL do naszego top'u. To samo robimy przy opcji adres pliku css z tym, że tam podajemy URL do naszego pliku CSS. Kiedy jesteśmy już pewni, że wszystko zostało zrobione, a podane adresy są prawidłowe, klikamy na dole strony na link gotowe. System zapisze nasze nowe ustawienia. Teraz wystarczy wejść przykładowo na główną stronę swojego blogu, aby nowe ustawienia zaczęły działać. Jeśli podane adresy są poprawne, wszystko powinno się wyświetlać tak jak to sobie zaplanowaliśmy. W przeciwnym wypadku należy skorzystać z klawisza F5. Jeśli po odświeżeniu strony wciąż coś jest nie tak jak należy, powinieneś zacząć wykonać kroki wskazane w części VI tego poradnika.

VI. GDY COŚ NIE DZIAŁA

Co zrobić, gdy na blogu nie wyświetla się top?
- odśwież stronę
- sprawdź czy podany w panelu URL jest prawidłowy
- sprawdź czy działa serwer, na którym znajduje się plik
- sprawdź czy plik znajduje się na pewno na serwerze
- sprawdź czy nazwy pliku i folderów na serwerze są IDENTYCZNE z tymi podanymi w URL (wielkość liter ma znaczenie, sprawdź też wielkość liter w rozszerzeniu pliku)
- sprawdź rozmiar pliku (czy nie jest zbyt duży i nie ładuje się powoli)

Co zrobić gdy, blog nie wyświetla się tak jak zostało to określone w pliku CSS?
- odśwież stronę (jest to z reguły konieczne po wprowadzeniu zmian w pliku)
- sprawdź czy podany w panelu URL jest prawidłowy
- sprawdź czy działa serwer, na którym znajduje się plik
- sprawdź czy plik znajduje się na pewno na serwerze
- sprawdź czy nazwy pliku i folderów na serwerze są IDENTYCZNE z tymi podanymi w URL (wielkość liter ma znaczenie, sprawdź też wielkość liter w rozszerzeniu pliku)
- sprawdź czy nie popełniłeś błędu w składni (czy klamry "}" są domknięte, czy po każdej wartości atrybutu postawiony jest średnik ";")
- sprawdź czy nie zrobiłeś gdzieś po prostu literówki
- sprawdź do czego odnosi się dana klasa i czy można w niej użyć artybutów, których chcesz użyć (np. atrybut background-repeat nie zadziała jeśli nie użyjesz również atrybutu background-image)
- możliwe, że konkretny atrybut jest blokowany przez system - na to nic nie poradzisz :)

Jeśli żadna z powyższych podpowiedzi nie pomogła Ci w rozwiązaniu Twojego problemu, a jest on naprawdę uciążliwy lub nie daje Ci spokoju, zawsze możesz skontaktować się ze mną (jak się skontaktować?).