CSS
Blog > Komentarze do wpisu
BODY, Box, Text, Szpalta - o co chodzi?

W CSSie każdy wiersz rozpoczynający się od # definiuje inny fragment strony. Każdy z tych fragmentów ma swoją nazwę - bardziej lub mniej zrozumiałą dla przeciętnego człowieka. Nie trzeba definiować wyglądu w każdym elemencie. Wszystkie prostokąty (boxy) znajdują się jeden w drugim, więc jeżeli dany element nie ma własnej definicji, użyje opisu elementu nadrzędnego. Np. jeśli nie opisze się boxu BlogGlownyBox, użyje on wyglądu zdefiniowanego w BODY.

Krótko co do czego:

BODY zazwyczaj definiuje całość strony. W tym przypadku chodzi tu głównie o "tło", czyli to, co widzimy wokół prostokątów, w których wyświetla się zawartość bloxa. W szablonie "Blogowy" ten fragment jest szary. Po co to? Ten fragment opisze wszystko, co nie zostało zdefiniowane indywidualnie. Czyli jeżeli wytniemy jakąś część CSSa, wygląd definiowanego przez nią fragmentu będzie taki, jaki podaliśmy w BODY.
Body A opisuje jak będą wyglądały linki w blogu. Tak jak wyżej, ta definicja będzie miała zastosowanie dla tych fragmentów, które nie zostaną opisane indywidualnie. Body A:hover to opis wyglądu tych linków po najechaniu na nie kursorem myszy.
#BlogGlownyBox to prostokąt, w którym znajdują się wszystkie elementy bloxa (tytuł, archiwum, treść itd.). W szablonie "Blogowy" jest biały
#NadTytul to pole nad tytułem bloga. Można tam wstawić obrazek powodując odsunięcie tytułu i opisu w dół.
#BlogTytulBox to prostokąt, w którym wyświetla się tytuł bloxa.
#BlogTytulOpis to wygląd opisu naszego bloga. Czcionka, położenie i kolor. Treść opisu wpisuje się w Ustawienia>Właściwości, a to czy ma się wyświetlać w Wygląd> Elementy > Pokaż pole z opisem bloga pod tytułem
#BlogTytulText, #BlogTytulText A, #BlogTytulText A:hover - te trzy wiersze decydują o wyglądzie tekstu - tytułu bloga. Pierwsza wartość definiuje ogólne właściwości takie jak czcionka, czy jej rozmiar. Druga to określenie koloru i dekoracji linka (którym jest tytuł), a trzecia to wygląd tytułu po najechaniu na niego myszką.
#BlogBodyBox - to cały obszar pod tytułem. Zarówno kolumna z linkami jak i ta z wpisami.
#Stopka to obszar na dole bloga, pod wpisami i linkami, a nad paskiem Blox-a
#BlogWazkaSzpalta - tak zwane "menu", czyli fragment z archiwum/kalendarzem, i zakładkami.
#BlogSzerokaSzpalta, #BlogSzerokaSzpalta A, #BlogSzerokaSzpalta A:hover - definicje dotyczące szerokiej części bloga, a więc tej, gdzie są wpisy. Podobnie jak przy #BlogTytulText - BlogSzerokaSzpalta A I #BlogSzerokaSzpalta A:hover określają wygląd linków.
#BlogKategorieBox to prostokąt w którym znajdują się nazwy kategorii wpisów w naszym blogu i RSS. W szablonie "Blogowy" to niebieski fragment. #BlogKategorieBox A i #BlogKategorieBox A:hover to wygląd linków do kategorii w tym boxie, a #BlogRss A i #BlogRss A:hover to linki do RSS-a
#BlogKategorie to położenie tyułów kategorii. Np. szerokość prostokątu i maginesy.
#BlogRss to położenie linka do RSS.
.BlogWpisItemTytul - wygląd tytułu każdej notki
DIV.BlogWpisItemTytul A jeśli w tytule wpisu masz link, to tu definiuje się jego wygląd
.BlogWpisTresc - definicje czcionki użytej do wyświetlania notek
DIV.BlogWpisTresc A - wygląd linków znajdujących się w notce.
.BlogDataWpisu - czcionka i położenie daty napisania notki
.BlogWpisBox - położenie treści notki (boxu w którym się znajduje)
.BlogWpisInfo - czcionka i położenie informacji o notce (godzina, kto, kategoria)
#BlogLinkiBox, #BlogLinkiBox A, #BlogLinkiBox A:hover - tu widać znaczek "Blox" - A i A:hover jak wyżej
#UdostepnijCss, #UdostepnijCss A, #UdostepnijCss A:hover - jeśli umożliwiasz pobieranie swojego CSSa to tu możesz określić lokalizację znaczka udostępniającego

Jeśli jako archiwum wybrałeś kalendarz, zdefiniuj poniższe wiersze. Jeśli wybrałeś Archiwum, przejdź do #BlogZakladkiBox
#BlogKalendarzBox - położenie kalendarza
TABLE.Kalendarz - czcionka dla nieaktywnych elementów kalendarza (np. dni bez wpisów)
TD.Miesiac - definicja czcionki dla nieaktywnej nazwy miesiąca. Ponieważ nie ma ma nieaktywnych nazw miesiąca, to tu można wpisać np. FONT-WEIGHT: bold - co spowoduje że linki będą pogrubione i w normalnym widoku i po najechaniu myszą. Można też zostawić ten fragment pusty.
TD.Miesiac A, TD.Miesiac A:hover - wygląd nazwy miesiąca (link i link po najechaniu na niego myszką)
TD.DzienTygodnia - czcionka, w której wyświetlane są nazwy dni tygodnia w kalendarzu
TD.DzienMiesiaca - czcionka dni bez wpisów w kalendarzu
TD.DzienMiesiaca A, TD.DzienMiesiaca A:hover - wygląd aktywnych dni miesiąca (linków)

#BlogZakladkiBox - położenie prostokąta z zakładkami
#ZakladkiTytul - definicja czcionki i położenia napisu "Zakładki"
.TytulFolderaZakladek - jak sama nazwa wskazuje, czcionka i położenie tytułów folderów zakładek
#ZakladkiItems - położenie folderów z zakładkami (odstępy pomiędzy folderami)
.ZakladkaEtykieta - położenie poszczególnych linków w zakładkach(odstępy pomiędzy kolejnymi linkami)
.ZakladkaEtykieta A, .ZakladkaEtykieta A:hover - czcionka zakładek - link i link po najechaniu kursorem

Jeśli jako archiwum wybrałeś "kalendarz", nie ma sensu definiować wierszy ze słowem "archiwum". Jeśli wybrałeś "archiwum", definiuj całość.
#BlogArchiwumBox - położenie prostokąta z archiwum
#ArchiwumTytul - definicja wyglądu i położenia napisu "Archiwum"
.ArchiwumItem - położenie nazw miesiący w archiwum (względem siebie)
.PoziomDrzewa - położenie całej zawartości folderów z zakładkami w stosunku do nazw tych folderów.
.ArchiwumItem A, .ArchiwumItem A:hover - wygląd tekstu archiwum (nazwy miesiąca) - link i link po najechaniu kursorem

Tu się zaczyna opis strony z komentarzami:
#SkomentujWazkaSzpalta - podobnie jak wcześniej: definicja wyglądu węższej części ("menu") - np. położenie, margines.
#SkomentujBox - położenie prostokąta, w którym wyświetlają się komentarze i pole do wpisu komentarza.
#SkomentujBoxEtykieta - wygląd pola, w którym wyświetla się ścieżka ("Blog > Komentarze do wpisu")
#SkomentujBoxEtykieta A, #SkomentujBoxEtykieta A:hover - wygląd linków w tym polu
.TytulKomentowanegoWpisu - czcionka i położenie tytułu notki
.InfoKomentowanegoWpisu - czcionka i położenie podpisu i godziny pod notką
#PolecWpisStrKom - położenie i wielkość czcionki napisu "poleć znajomemu » śledź komentarze (rss) »"
.InfoKomentarzAuthor - położenie i wielkość czcionki, którą napisany jest login autora komentarza
.InfoKomentarzData - położenie i czcionka daty wpisania komentarza
.infoKomentarzTekst - położenie i czcionka treści komentarza
#SkomentujAutor - czcionka i położenie napisu i okienka "login" (lub loginu jeśli jesteś zalogowany) przy polu do komentowania
#PoleKomentarzaEtykieta - czcionka i położenie napisu "Komentarz" nad polem do wpisywania komentarza
.SkomentujKomunikat - położenie napisu "Aby skomentować ten wpis musisz podać swój indentyfikator (login) i hasło"
DIV#SkomentujKlawisze INPUT - wygląd guzików "Zapisz" i "Anuluj"
#SkomentujListaKomentarzy - położenie komentarzy

Wracamy na stronę główną. Jęśli udostępniasz możliwość przeszukiwania bloga, zdefiniuj poniższe.
#BlogPrzeszukiwanie - położenie "szukacza"
div#BlogPrzeszukiwanieText INPUT - wygląd okienka do wpisywania szukanego słowa
div#BlogPrzeszukiwanieKlawisz INPUT - wygląd guzika "Szukaj"
#BlogPokazWszystkieWpisy - element archaiczny. Kiedyś można było wyświetlić na raz wszystkie wpisy z bloga i tu się ustawiało wygląd prowadzącego do tego linka. Teraz tego nie ma i już nie działa.

Znów komentarze:
.SkomentujBlad - położenie komunikatu o błędzie podczas dodawania komentarza (np. jeśli wciskasz "zapisz" nic nie wpisując w okno komentarza)

Znów strona główna:
#BlogTytulyOstatnichWpisow, #BlogAutorzyBox - położenie boxów z tytułami 10 ostatnich notek i "O autorze"
#BlogTytulyOstatnichWpisow ul, #BlogAutorzyBox ul - to samo co wyżej
#BlogTytulyOstatnichWpisow li, #BlogAutorzyBox li - położenie i wielkość linków w boxie boxów z tytułami 10 ostatnich notek i "O autorze"
#BlogTytulBoxaOstatnichWpisow, #BlogAutorzyTytul - położenie i czcionka napisów "O autorze" i "Ostatnie notki"
#BlogTytulyOstatnichWpisow li a, #BlogAutorzyBox li a, #BlogTytulyOstatnichWpisow li a:hover, #BlogAutorzyBox li a:hover - czcionka linków do wizytówki autora i tytułów wpisów w "Ostatnich notkach"
#BlogStronicowanieBox - położenie boxu z linkami do kolejnych stron z wpisami bloxa (1 , 2 , 3 , 4 , 5  następne)
div#BlogStronicowanieBox table - box z tymi linkami znajduje się w tabelce. Tu można określić jej parametry (wymiary, pokazywanie krawędzi, kolory itp.)
td.BlogStronicowaniePoprzednie - położenie słowa "poprzednie" (wyświetla się od 2 strony wpisów)
td.BlogStronicowanieStrony - położenie cyferek (numerów stron)
td.BlogStronicowanieNastepne - położenie słowa "następne"

Znów komentarze:
#SkomentujHaslo input, #SkomentujURL input, #SkomentujAutor input - położenie i wielkość pól przy wpisywaniu komentarza (login, hasło, URL)
div#captcha img, div#captcha - wygląd i położenie obrazka zabezpieczającego przed spamowaniem

wtorek, 11 lipca 2006, ememzet

Polecane wpisy