Tworzymy pierwszą klasę w CSS

[Gama]

Witajcie. W tym poradniku zaprezentuję oraz opiszę jak stworzyć swoją pierwszą klasę w edytorze CSS IP.Board oraz jak wyświetlić ją na forum. Opiszę również poszczególne elementy tej klasy, abyś w przyszłości wiedział(a) co za co odpowiada

Zaczynamy !

Pierwszym krokiem będzie zalogowanie się do ACP oraz kliknięcie na zakładkę Wygląd. Teraz wybieramy styl który używamy na forum, lub do którego chcemy dodać naszą klasę CSS. Ja wybrałem domyślny styl IP.Board.

Z listy szablonów wyszukaj "globalTemplate". Znajdź linijkę

<div id='content' class='clearfix'>

i dodaj po niej ten kod

<div class="informacja">To jest moja pierwsza klasa CSS!</div>

.

Tekst "To jest moja pierwsza klasa CSS!" można zmienić np na "Super Forum" - wtedy kod prezentuje się tak:

<div class="informacja">To jest moja pierwsza klasa CSS!</div>

.

Jeżeli klasa nie będzie nazywać się "informacja" a np. "forum123" wtedy kod prezentuje się następująco:

<div class="forum123">To jest moja pierwsza klasa CSS!</div>

Jednak my pracujemy na klasie "informacja".

Teraz przechodzimy do zakładki CSS. Szablonami zajmiemy się na końcu. Po przejściu w tę zakładkę ujrzymy spis plików .css Nas interesuje ipb_styles.css ponieważ to on zawiera wszystkie główne klasy dla stylu.

Teraz przechodzimy do części właściwej. Mając otwarty plik ipb_style.css przesuwamy kod na sam dół. To tutaj dodamy naszą klasę CSS. Czy można ją dodać gdzieś indziej? Tak, ale dla naszej wygody dodamy ją zaraz na samym końcu

A więc zaczynamy. Pierwszą linijkę którą wpiszemy, będzie to:

.informacja {

Jest to definicja nowej klasy CSS, którą później wyświetlimy za pomocą kodu HTML. Klamra "{" , podobnie jak w językach programistycznych informuje że od tej pory podajemy właściwy kod - w naszym przypadku właściwości klasy "informacja"

Kolejną linijką będzie klamra zamykająca czyli

}

. Jest to bardzo ważne, ponieważ klasy które zdefiniujemy później nie będą działać lub mogą pojawić się błędy.

Teraz zdefiniujemy właściwości naszej klasy "informacja". Zdefiniujmy kolor tła. Dodajmy tę oto linijkę

background: #4181B5;

pomiędzy "{" a "}". Pewnie zastanawiasz się co to jest "#4181B5". Jest to kolor podany w RGB. Tutaj polecam tę stronę aby wybrać swój własny kolor: http://www.colorpicker.com/. W całości wygląda to następująco

.informacja {
background: #4181B5;
}

.

Efekt:

Niezbyt ładnie to wygląda. Zajmijmy się więc zwiększeniem wysokości klasy. Do tego potrzebne jest wpisanie linijki

height: 25px;

zaraz po

background: #4181B5;

. Jak to teraz wygląda?

Jest lepiej ale może być jeszcze lepiej. Skonfigurujmy więc tekst wyświetlany w tej klasie. Użyjemy do tego trzech atrybutów: padding (odstęp wewnątrz klasy, w px lub %), text-algin (wyrównanie tekstu, center - środek), oraz color (kolor tekstu, w RGB). Dodajmy ten kod:

padding-top: 5px;
text-align: center;
color: #fff;

.

Całość powinna wyglądać tak:

.informacja {
background: #4181B5;
height: 25px;
height: 25px;
padding-top: 5px;
text-align: center;
color: #fff;
}

A jak wygląda to na forum?

Jest coraz lepiej, teraz za pomocą atrybutu "margin-bottom" zrobimy odstęp pomiędzy naszą klasą CSS a pierwszą kategorią forum. Do kodu dodajemy

margin-bottom: 5px;

. Informuje on przeglądarkę, aby wykonała odstęp od następnego elementu o wielkości 5px. Efekt:

Jest dobrze, jednak w CSS3 - najnowszej wersji CSS, dodano możliwość zaokrąglenia rogów - co też teraz uczynimy.

Pomoże nam w tym atrybut border-radius. Dodajmy ten kod

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

Co to są: -moz-border-radius oraz -webkit-border-radius? Ze względu na różne silniki renderowania stron należy zdefiniować tę samą wartość osobno dla każdego z silnika. Dotyczy tylko niektórych elementów kodu CSS.

Całość wygląda teraz tak:

.informacja {
background: #4181B5;
height: 25px;
height: 25px;
padding-top: 5px;
text-align: center;
color: #fff;
margin-bottom: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

A na forum prezentuje się tak:

Zabraniam kopiowania na inne fora bez mojej zgody. Poradnik specjalnie dla invisionize.pl. Pozdrawiam, Gama

PS Mam nadzieję, że się przyda