FANDOM


Witam Was w pierwszym artykule z serii „Od technicznej strony”! Część z Was może kojarzy poradnik CSS, jednak to będzie coś nieco innego. Tutaj będę przedstawiać różne kody oraz porady ich dotyczące, a artykuły, w każdym razie na początku, będą się skupiać na tym, jak uczynić profil bardziej oryginalnym i atrakcyjnym dla odwiedzających. W pierwszym artykule skupimy się na dodawaniu własnego tła na stronę profilu. Jednak na sam początek przyda się garść podstawowych informacji.

CSS dodawany do profilu — od czego zacząć?Edytuj

Przede wszystkim, co to jest właściwie CSS? Już spieszę z odpowiedzią. CSS to skrótowiec od angielskiego określenia Cascading Style Sheets, oznaczającego kaskadowe arkusze stylów. Za pomocą CSSu możemy zmieniać wygląd interesujących nas elementów strony napisanej w HTMLu. Ponieważ sam HTML nie daje nam możliwości dowolnego stylizowania elementów, z pomocą przychodzi CSS oraz jego potęga. Elementy strony możemy stylizować bezpośrednio w pliku HTML, ale także w osobnych plikach CSS. My będziemy zajmować się tym drugim.

Dlatego teraz, czytelniku, jeśli zdecydowałeś się zmodyfikować swój profil, wejdź na stronę Specjalna:Moja strona/wikia.css. Link przekieruje Cię na podstronę Twojego profilu, na której będziesz pisać swoje kody. Na tej stronie możesz pisać dowolne kody, nawet te łamiące politykę modyfikacji, ponieważ ich efekt widzi tylko osoba zalogowana na Twoje konto. Na tej stronie według mnie lepiej jest testować różne kody. Później, gdy zechcesz, by wszyscy widzieli Twój kod, polecam utworzyć osobną stronę (np. Specjalna:Moja strona/profil.css — słowo "profil" możesz zastąpić czymkolwiek innym, byleby pozostała końcówka ".css"). Gdy już utworzysz taką stronę, zwróć się do technika, który zaimportuje Twój kod do ogólnego CSSu i sprawi, że będzie widoczny dla wszystkich użytkowników.

To tyle informacji ogólnych, przejdźmy do praktyki!

Dodawanie tła do profiluEdytuj

Tu jeszcze będzie nieco teorii, ale już bardziej związanej z tym, co będziemy robić. Otóż, gdy będziecie robić rzeczy związane z CSSem na własną rękę, pamiętajcie, że bardzo przydatnym przyciskiem jest „Zbadaj element”. Gdy klikniecie prawym przyciskiem myszy na ekran, ta opcja jest jedną z dostępnych (u mnie przedostatnia). Wydaje mi się jednak, że na Microsoft Edge jej tam nie ma i jak dotąd nie wiem, gdzie to znaleźć.

Przed wszystkimi selektorami, klasami i innymi rzeczami, które chcemy zedytować na profilu, powinniśmy dodać:
BODY.page-Użytkownik_Twoja_nazwa
. W przypadku mnie będzie to:
BODY.page-Użytkownik_Dżemożerca11
, a w przypadku nazwy ze spacjami (jako przykład wezmę YuriPee 34):
BODY.page-Użytkownik_YuriPee_34
. To wszystko po to, by Wasze modyfikacje w obrębie profilu nie pojawiały się na innych stronach wiki. Przy innych okazjach wspomnę o stronach tablicy, bloga i wkładu.

Żeby zmienić tło strony, nie trzeba nic dokładać. Wystarczy, że wpiszemy to:

BODY.page-Użytkownik_Twoja_Nazwa {
/* Tutaj będziemy wpisywać właściwości, w tym przypadku zmianę tła */
}

Na początek przyjrzyjmy się właściwości background (oraz jej podwłaściwościom), której będziemy tu używać. Żeby nie pominąć żadnych ważnych aspektów, posłużę się stroną Webkod, do której link znajdziecie na końcu artykułu.

background-colorEdytuj

Za pomocą tej właściwości możemy zmienić wyłącznie kolor tła, nic więcej. Jednak czasami się to opłaca. Ja na przykład pod tło obrazkowe wolę sobie podłożyć kolor, gdyby z niewiadomych przyczyn z obrazkiem miało się coś stać.

Przede wszystkim, kolory w HTML i CSS dzielimy na trzy typy:

  • angielskie nazwy, np. red, green
  • zapis szesnastkowy (heksadecymalny), np. #ff8c00 (pomarańczowy), #f00 (czerwony) (w takich kolorach możesz się spotkać także z wielkimi literami, jednak to nie ma znaczenia; ja używam małych, bo jest mi wygodniej)
  • zapis RGB, czyli dziesiętna wersja liczby zapisanej w systemie szesnastkowym, np. 255, 140, 0 (pomarańczowy) czy 255, 0, 0 (czerwony)

Wykaz angielskich kolorów oraz ich odpowiedników heksadecymalnych i RGB możesz znaleźć na stronie pomocy na Wikipedii. Dokładniej kolory możesz dobrać tutaj.

Ciekawostka: Jeśli nie pomyliłam się w rozumowaniu, kolorów w HTML jest dokładnie 16 581 375. Jak widać, na pewno nie zabraknie Wam barw do dekorowania profilu. ;)

Żeby zmienić kolor profilu, użyjcie tego kodu (przypominam, najpierw wstawcie sobie do Specjalna:Moja strona/wikia.css do testów, a potem do Specjalna:Moja strona/profil.css czy innej strony, którą admin zaimportował do ogólnego CSSu):

BODY.page-Użytkownik_Twoja_Nazwa {
  background-color:red; /* To jest tylko przykład, "red" można zastąpić dowolnym innym kolorem po angielsku */
}

Jakby coś, tekst umieszczony między /* i */ to komentarz. Możecie umieszczać dowolną ilość komentarzy w swoim kodzie, by np. wyjaśnić sobie jakąś właściwość lub łatwiej dotrzeć do konkretnego kodu.

Jeśli decydujecie się na zapis szesnastkowy, użyjcie tego kodu:

BODY.page-Użytkownik_Twoja_Nazwa {
  background-color:#ff0000; /* należy pamiętać o znaku "#" przed numerem koloru, inaczej kod nie zadziała */
}

Jak ostatni został nam zapis rgb (w tym artykule nie wspominam o rgba, nie chcę Wam za bardzo mącić w głowie):

BODY.page-Użytkownik_Twoja_Nazwa {
  background-color:rgb(255, 0, 0);
}

Jak już napisałam, to są tylko przykłady kolorów (w każdym przypadku jest to czerwony), możecie więc je dowolnie zmieniać.

Wydaje mi się, że ten artykuł będzie już z lekka długi, dlatego jednak rozbiję go na kilka części. W następnej części dowiecie się, jak umieścić gradient w tle profilu oraz jak dodać obrazek, czyli zapewne najbardziej wymarzona część tej lekcji.

Jak obiecałam, tu daję link do strony Webkod, konkretniej do właściwości background-color opisane wyżej: http://webkod.pl/kurs-css/wlasciwosci/wszystkie/background-color

Zapraszam do przetestowania zmiany tła profilu już teraz! Na wszelkie pytania odpowiadam w komentarzach.