Jak stworzyć własny styl CSS?

Powrót do gotowych szablonów | strona główna

Domyślny styl CSS (przyda się, gdy stwierdzisz, że oryginalna strona startowa wygląda lepiej niż ta po Twoich modyfikacjach)

Oto krótkie opisy poszczególnych sekcji

body { ... }- tutaj jest wpisany kolor tła (można zdefiniować inne rzeczy) generalnie polecam zostawić biały

body, th, td { ... }- tutaj określiłem domyślny rozmiar krój i kolor czcionki

.tb {...} - tutaj jest wygląd nagłówka modułu (tabelki)

.tc { ... } - tutaj jest wygląd modułu (tabelki) - część gdzie są linki

.pa1 {..} i .pa2 {...} - tutaj zdefiniowałem kolor tabelek (nagłówek i ciało tabel) w panelu administracyjnym - niektórym nie podobał się różowy kolor, więc teraz każdy może sobie ustalić jaki chce mieć kolor w panelu administracyjnym

A:link i podobne - tutaj jest zdefiniowany wygląd linków

Jak wyedytować styl?

Jeśli zapoznałeś się z informacjami, z jakich sekcji składa się styl (czyli wygląd jakich elementów można edytować) to możesz przystąpić do edycji stylu CSS. Może edytowanie styli jest trudniejsze niż korzystanie z jakiegoś kreatora, gdzie się wybiera np. jeden spośród kilku dostępnych kolorów, ale za to daje większe możliwości. Poniżej opiszę podstawy stylu CSS tak abyś mógł bez problemu zmienić kolory na stronie startowej. Jeśli chcesz dogłebnie poznać style CSS to odsyłam Ciebie do literatury informatycznej, tutaj podam tylko podstawy.

Więc każda sekcja składa się z nazwy (np.body) i nawiasów klamrowych { i }. Nawiasy klamrowe oznaczają gdzie zaczyna się i gdzie się kończy opis danej sekcji. Na logikę przypatrzmy się temu fragmentowi:

body {
background: #FFFFFF;
}

Oznacza to, że opis sekcji body składa się tylko z jednej linijki background: #FFFFFF; Jeśli byś chciał coś dopisać (np. zdefiniować rozmiar czcionki) to musiałbyś dopisać jakąś linijkę pomiędzy nawiasami klamrowymi. Zauważ, że opis sekcji body,th,td składa się aż z 3 linijek i są one zapisane pomiędzy nawiasami klamrowymi. Te nawiasy oznaczają skąd do kąd przeglądarka internetowa ma czytać definicje wyglądu danej sekcji. Zauważ, że każda sekcja ma jeden nawias otwierający i jeden zamykający, nie ma nigdzie opisu wyglądu, który by nie był w jakimś nawiasie klamrowym. Każda linijka opisu kończy się średnikiem.

Załóżmy, że chcemy zmienić kolor nagłówka modułu. W opisie wyczytaliśmy, że odpowiada za to sekcja .tb. Oto definicja wyglądu nagłówka modułu:

.tb {
border-top:1px solid #505030;
border-right:1px solid #505030;
border-left:1px solid #505030;
border-bottom:1px dashed #505030;
background: #E0E0C2;
}

Opis jest dość długi, składa się aż z 5 linijek. Pierwsze cztery linijki (te zaczynające się od słowa border) oznaczają obramowanie. Słowo top oznacza górę (czyli górna krawędź) left to lewa, right to prawa a bottom to dolna. Słowo solid oznacza, że obramowanie składa się z lini ciągłej a słowo dashed, że z linii przerywanej. 1px to grubość obramowania (1 pixel). Piąta linijka definiuje kolor tła (background). W każdej linijce jest dziwny ciąg znaków zaczynający się od hasza (#) i składający się z 6 cyfr. To jest właśnie kod koloru! W takim dziwnym formacie zapisuje się kolory. Tutaj jest dostępna tabela kolorów. Nie jest ona obszerna, ale w ramach eksperymentu możesz zmienić kolor jakiegoś elementu. Np. kolor tła nagłówka modułu. W tym celu ciąg znaków #E0E0C2 należy zamienić jakimś innym kodem koloru np. różowym (kod koloru różowego to #FF80FF). Jeśli próba się udała to powiem coś więcej o kolorach: otóż mamy do dyspozycji aż 16 milionów kolorów! Owa tabela zawiera tylko kilka najpopularniejszych kolorów, ale możesz skorzystać z mojego programu KreatorKolorów (6 KB) który potrafi stworzyć dowolny kolor spośród 16 milionów dostępnych.

W grafice komputerowej każdy kolor można opisać jako składową 3 podstawowych kolorów (red - czerwony, green - zielony, blue - niebieski). Ten format tworzenia kolorów nazywa się RGB. Każdy kolor powstaje jakby ze zmieszania ze sobą tych 3 kolorów w dowolnych proporcjach. Każdy z tych 3 kolorów może mieć odpowiednie nasycenie w skali 0 - 255 (0- brak, 255 max). Zmieszanie tych 3 kolorów daje 16 milionów kombinacji. W moim programie trzeba po prostu przesuwać suwakami i gdy uzyskasz odpowiedni kolor to kopiujesz do schowka kod koloru i dokonujesz zamiany.

Mam nadzieje, że to krótkie wprowadzenie pozwoli Tobie na stworzenie ciekawego szablonu. Nie bój się eksperymentować! Nawet jeśli uznasz, że nie masz zdolności artystycznych i że domyślna kolorystyka była najlepsza, to masz tutaj dostępny styl CSS domyślnego szablonu!

Powrót do gotowych szablonów | strona główna