O szablonach, ich projektowaniu i moich z tym zmaganiach...

CSS: wpis na głównej

Najważniejszą częścią szerokiej szpalty są oczywiście wpisy. W szczególnych wypadkach (w zależności od kodu szablonu) w szerokiej poza wpisami może się znaleźć część tytułowa bloga. Poza wpisami szeroka zawiera jeszcze kategorie, etykietę wybranej kategorii i stronicowanie.

Data wpisu

.BlogDataWpisu
klasa ta opisuje wszystkie daty wpisów na stronie głównej; element blokowy;
jeżeli jednego dnia dodajesz więcej niż jeden wpis to przy wcześniejszym nie będzie daty; element ten pojawia się jeden raz na dzień więc przy wielu wpisach na dzień tylko najnowszy nad będzie miał datę;

BlogDataWpisu

Kontener z pojedynczym wpisem

.BlogWpisBox
klasa opisująca kontener z całą treścią wpisu zawierającą zarówno tytuł jak i informacje pod notką; element blokowy;
.BlogWpisItemTytul
klasa opisująca wygląd tytułu pojedynczego wpisu na stronie głównej, element blokowy;
.BlogWpisItemTytul a
kombinator opisujący wygląd linku do notki skrywającego się pod tytułem;
tytuł notki będzie linkiem jeżeli włączy się optymalizację kodu;
.BlogWpisTresc
klasa ta opisuje wszystko co wpisujesz w polu na treść wpisu; element wyświetlany w bloku;
zawartość elementu zależna jest od tego co umieszczasz we wpisie ale zakładam, że kilka znaczników będzie bardzo typowych i uniwersalnych dla każdego blogu;
.BlogWpisTresc a
kombinator opisujący wygląd linków we wpisie; element liniowy
najczęściej opisuję w tym miejscu kolor bądź rodzaj dekoracji linku jeżeli chcę aby był inny niż dla reszty blogu;
.BlogWpisTresc img
ilustracja we wpisie; jej ułożenie jest zależne od treści ale rzeczy takie jak ramka czy odstęp można opisać tutaj;
.BlogWpisTresc a img
ilustracja będąca linkiem
warto opisać ramkę (border) ponieważ przeglądarki często same ją w tym miejscu dodają więc chcąc mieć obramowanie we własnym guście tutaj należy wpisać odpowiednie style
.BlogWpisTresc h3
kombinator opisujący wygląd śródtytułów (nagłówków trzeciego stopnia)
.BlogWpisTresc blockquote
kombinator opisujący wygląd bloków cytatu; automatycznie przeglądarka dodaje odstęp; element wyświetlany w bloku;

Informacje pod treścią

Informacje pod notką są częścią BlogWpisBox, wydzieliłam je osobno tylko ze względów organizacyjnych.

.BlogWpisInfo
klasa opisująca całą zawartość informacji pod notką, element blokowy;
.BlogWpisInfo a
kombinator opisujący wygląd linków informacji pod notką na stronie głównej
.InfoPodTekstem
klasa opisująca całą zawartość informacji pod notką, element blokowy; alternatywny selektor dla .BlogWpisInfo
większość elementów pod notką ma dodana własną, dodatkową klasę, wyjątkiem sa przecinki a więc ich wygląd należy opisywać tutaj
.InfoPodTekstem a
kombinator opisujący wygląd linków informacji pod notką na stronie głównej; alternatywny selektor dla .BlogWpisInfo a
.IPTWięcej
klasa opisująca wygląd elementu więcej » pojawiającego się po podzieleniu notki na wstęp i treść; element blokowy
w bloksowych szablonach często ten selektor zapisywany jest łącznie ze znacznikiem div: div.IPTWięcej
.IPTWięcej a
klasa opisująca wygląd linku więcej »
.infoTagi
klasa opisująca wygląd elementu tagi zawierającego etykietę Tagi: i linki do wszystkich tagów dodanych do wpisu; element blokowy
.infoTagi a
kombinator opisujący wygląd linków z tagami pod pisami na stronie głównej bloga; kombinator opisuje element liniowy
.IPTczas
klasa opisująca wygląd elementu czas czyli godziny dodania wpisu; przypisana jest elementowi liniowemu span
.IPTautor
klasa opisująca wygląd loginu autora wpisu; przypisana jest elementowi liniowemu span
autorów może być na blogu wielu więc loginy mogą być różne ale w kodzie klasa jest jedna więc nie ma możliwości różnego prostego opisywania wyglądu tego elementu
.IPTkategoria
klasa opisująca wygląd linku kategorii; element liniowy bo klasa przypisana jest znacznikowi linku (czyli nie ma czegoś takiego jak .IPTkategoria a bo jest a.IPTkategoria)
.IPTlinkuj
klasa opisująca wygląd linku do strony z pojedynczą notką; element liniowy bo klasa przypisana jest znacznikowi linku (czyli nie ma czegoś takiego jak .IPTlinkuj a bo jest a.IPTlinkuj)
.IPTlinkujBezK
klasa opisująca wygląd linku do strony z pojedynczą notką gdy komentarze pod nią są wyłączone; element liniowy bo klasa przypisana jest znacznikowi linku (czyli nie ma czegoś takiego jak .IPTlinkujBezK a bo jest a.IPTlinkujBezK)
.IPTkomentuj
klasa opisująca wygląd linku do komentarzy; element liniowy bo klasa przypisana jest znacznikowi linku (czyli nie ma czegoś takiego jak .IPTkomentuj a bo jest a.IPTkomentuj)
klasa ta opisuje zarówno link do listy komentarzy pod notką gdy komentarze są dodane jak i link do bloksowej strony dodawania komentarzy; kod nie rozróżnia klasą tych linków
.IPTTrackBack
klasa opisująca wygląd linku do listy TrackBack; element liniowy bo klasa przypisana jest znacznikowi linku (czyli nie ma czegoś takiego jak .IPTTrackBack a bo jest a.IPTTrackBack); link pojawia się tylko gdy dodany jest chcociaż jeden trackback
.BlogWpisInfo br
kombinator odpowiedzialny za znacznik złamania wiersza; znacznik umieszczony jest pomiędzy elementem więcej a elementem tagi oraz przed elementem linkuj (co ma chyba większe znaczenie dla wyglądu)
.facebook-like
klasa opisująca wygląd wklejki z facebooka (facebook-like); element blokowy

BlogWpisBox

Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...