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

CSS: wpis na stronie z pojedynczą notką

Najważniejszą częścią szerokiej szpalty są oczywiście wpisy. Ich wygląd można opisać osobno dla dwóch sposobów wyświetlania: na stronie głównej i na stronie z pojedynczą notką. Osobno opisuje się też wygląd tzw. stron statycznych.

Na stronie z pojedynczą notką poza treścią notki wyświetlane są także TrackBacki i Komentarze jeżeli są.

Etykieta zagłębienia

#SkomentujBoxEtykieta
identyfikator odpowiedzialny jest za całą etykietę Blog > Komentarze do wpisu
#SkomentujBoxEtykieta a
kombinator opisujący wygląd linków w etykiecie zagłębienia czyli de facto tylko słowo Blog

SkomentujBoxEtykieta

Kontener z całym pojedynczym wpisem, trackbackami i komentarzami

#SkomentujBox
klasa opisująca kontener z całą treścią wpisu zawierającą zarówno tytuł, treść jak i informacje pod i nad notką a także całość elementów TrackBack i Komentarze; jedynym elementem który w szerokiej szpalcie jest poza tym pudełkiem jest wyżej wspomniana etykieta zagłębienia
#BlogWpisPoprzedniNastepnyBox
kontener nawigacyjny odsyłający do poprzedniej i następnej notki; element blogowy
#BlogWpisPoprzedniLewy
identyfikator przypisany elementowi blokowemu zawierającemu link do poprzedniej notki; zazwyczaj wyświetla się po lewej stronie i zawiera znak cudzysłowu francuskiego, coś jak dwa małe ostre nawiasy skierowane w lewo
w szablonie zapewne ma przypisane pływanie w lewo (<code>float:left;</code>), bez tego wyświetla się w bloku
#BlogWpisPoprzedniLewy a
kombinator odpowiedzialny za wygląd linku do poprzedniego wpisu; to samo co klasa .IPTlinkuj
#BlogWpisNastepnyPrawy
identyfikator przypisany elementowi blokowemu zawierającemu link do następnej notki; zazwyczaj wyświetla się po prawej stronie i zawiera znak cudzysłowu francuskiego, coś jak dwa małe ostre nawiasy skierowane w prawo
w szablonie zapewne ma przypisane pływanie w prawo (<code>float:right;</code>), bez tego wyświetla się w bloku
#BlogWpisNastepnyPrawy a
kombinator odpowiedzialny za wygląd linku do następnego wpisu; to samo co klasa .IPTlinkuj
.IPTlinkuj
klasa opisująca wygląd linku do poprzedniego bądź następnego wpisu; element liniowy bo klasa przypisana jest znacznikowi linku (czyli nie ma czegoś takiego jak .IPTlinkuj a bo jest a.IPTlinkuj);
ta sama klasa pojawia się na stronie głównej przy elemencie Link umieszczonym w informacjach pod notką więc jeżeli tam ma zmieniony wygląd to może tutaj wymagać kombinatora i odpowiednio dostosowanych stylów; polecam #BlogWpisPoprzedniNastepnyBox .IPTlinkuj
.TytulKomentowanegoWpisu
identyfikator opisujący wygląd tytułu pojedynczego wpisu, element blokowy;
.TytulKomentowanegoWpisu h2
kombinator opisujący wygląd tytułu wpisu jako śródtytułu drugiego stopnia;
przeglądarka zmieni margines (margin) elementu, wielkość oraz grubość kroju (font-size, font-weight);
.WstepKomentowanegoWpisu
identyfikator, który opisuje wszystko co wpisujesz w polu na wstęp notki jeżeli dzielisz ją na wstęp i treść; element wyświetlany w bloku;
zawartość elementu zależna jest od tego co umieszczasz we wstępie a można wszystko tylko trzeba to umieścić w odpowiednich znacznikach html; aby rzecz uprościć laikom zaproponowałam kiedyś mały myk; w zależności od użytych znaczników może być przydane opisanie ich przy odpowiednich kombinatorach;
.TrescKomentowanegoWpisu
identyfikator który opisuje wszystko co wpisujesz w polu na treść notki; 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;
.TrescKomentowanegoWpisu img
ilustracja we wpisie; jej ułożenie zapewne jest zależne od treści ale rzeczy takie jak ramka czy odstęp można opisać tutaj;
.TrescKomentowanegoWpisu 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
.TrescKomentowanegoWpisu h3
kombinator opisujący wygląd śródtytułów (nagłówków trzeciego stopnia)
.TrescKomentowanegoWpisu blockquote
kombinator opisujący wygląd bloków cytatu; automatycznie przeglądarka dodaje odstęp; element wyświetlany w bloku;

Informacje pod notką

.InfoKomentowanegoWpisu
klasa odpowiedzialna jest za element z datą i loginem autora notki
#PolecWpisStrKom
identyfikator odpowiedzialny za wygląd kontenera z dwoma linkami:poleć znajomemu » i śledź komentarze (rss) »; element blokowy
#PolecWpisStrKom a
kombinator opisujący wygląd linków w elemencie poleć wpis, obu linków czyli de facto całego elementu ale osobno każdy link
.SKpolec
klasa przypisana linkowi poleć znajomemu »; element liniowy (czyli nie ma czegoś takiego jak .SKpolec a bo klasa przypisana jest linkowi czyli jest a.SKpolec);
.SKsledz
klasa przypisana linkowi śledź komentarze (rss) »; element liniowy (czyli nie ma czegoś takiego jak .SKsledz a bo klasa przypisana jest linkowi czyli jest a.SKsledz);
.TagiKomentowanegoWpisu
klasa odpowiedzialna za wygląd wszystkich tagów pod notką; element blokowy
.TagiKomentowanegoWpisu span
kombinator odpowiedzialny tylko za etykietę Tagi:; element liniowy
.TagiKomentowanegoWpisu a
kombinator odpowiedzialny za każdy poszczególny tag w postaci linku; element liniowy
.SkomentujDodajKomentarzLink
klasa opisująca wygląd elementu Dodaj komentarz » umieszczonego bezpośrednio pod wpisem a nad TrackBackami i komentarzami; element blokowy
.SkomentujDodajKomentarzLink a
kombinator opisujący wygląd linków w elemencie Dodaj komentarz » czyli de facto właśnie tą frazę jako link; element liniowy
#SkomentujListaTrackback
identyfikator odpowiedzialny za całość elementu TrackBack; element blokowy
opis elementu i selektorów przydatnych do opisania jego pod-elementów znajduje się na innej stronie
#SkomentujListaKomentarzy
identyfikator odpowiedzialny za całość elementu Komentarze; element blokowy
opis elementu i selektorów przydatnych do opisania jego podelementów znajduje się na innej stronie
.SkomentujDodajKomentarzLinkPodLista
klasa opisująca wygląd elementu Dodaj komentarz » umieszczonego pod listą wszystkich dodanych już komentarzy; element blokowy
.SkomentujDodajKomentarzLinkPodLista a
kombinator opisujący wygląd linków w elemencie Dodaj komentarz » czyli de facto właśnie tą frazę jako link; element liniowy

SkomentujBox

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