29 czerwca 2015

Selektory


Buenos dias! Miło mi, że w tak piękny wakacyjny dzień mam tyle czasu i mogę pisać i pisać, oczywiście dla was. Nawet nie wiecie ile mi to sprawia przyjemności. A więc dzisiaj nie będzie nic skomplikowanego w dalszym ciągu mamy selektory, i jest to już ostatnia grupa, gadżetów i komentarzy.

GADŻETY



h2 - nagłówki wszystkich widżetów
.sidebar .widget h2 - nadanie stylu gadżetu
.widget-content - zawartość wszystkich widżetów
#Navbar1 - pasek nawigacyjny
#Header1 - nagłówek
#PageList1 - strony
#Blog1 - posty
#Attribution1 - napis Technologia Blogger i nazwa szablonu
#Profile1 - o mnie
#BloggerButton1 - button Bloggera
#Subscribe1 - subskrybuj
#Label1 - etykiety
#BlogArchive1 - archiwum bloga
#NewsBar1 - skrót wiadomości
#TextList1 - lista
#LinkList1 - lista linków
#BlogList1 - lista blogów
#Poll1 - ankieta
#VideoBar1 - pasek wideo
#Image1 - obrazek
#Text1 - tekst
#HTML - HTML/JavaScript
#Slideshow1 - pokaz slajdów
#PlusOne1 - przycisk polecenia w Google+
#CustomSearch1 - pasek wyszukiwania
#PopularPosts1 - popularne posty
#Stats1 - statystyka
#Translate1 - tłumaczenie
#Followers1 - gadżet z obserwatorami
KOMENTARZE

.comments - ramka ze wszystkimi komentarzami i liczbą komentarzy
.comments h4 - liczba komentarzy
#Blog1_comments-block-wrapper - ramka ze wszystkimi komentarzami bez liczby komentarzy
#comments-block,.comments-block - ramka komentarzy ale bez awatarów
.comment-author - podłużna belka, na której pojawia się imię autora komentarza ({nazwa autora} pisze...)
.avatar-image-container - awatary
.comment-body - tekst komentarza
.comment-footer - stopka komentarza, czyli to miejsce, gdzie jest data dodania komentarza, linki Odpowiedz itp.
.comment-timestamp - sama data dodania komentarza
.comment-delete - link do usunięcia komentarza
.comments .comment .comment-actions a, .comments .thread-toggle a - przyciski odpowiedz i usuń pod komentarzem
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover - przyciski odpowiedz i usuń po najechaniu
.comment-header - nagłówek komentarza z jego autorem, datą i godziną
.comments-content lub #comment-holder- wszystkie komentarze razem wzięte. Jeśli chcemy dać tło lub ramkę dla właśnie obszaru komentarzy pod postem należałoby użyć tego selektora. Raczej wymagane jest znowu użycie komendy padding.
.comments .comments-content .user - efekt "dla" autora komentarza;
.comments .comments-content .datetime  - efekt "dla" daty komentarza;
.comment-replies - odpowiedzi do danego komentarza;
.continue a - kolejny napis "odpowiedz" lub "reply", jednak tym razem to napis tuż pod ostatnią odpowiedzią na komentarz. Bardzo ciekawe i inne użycie to dodanie do selektora float:right; 

OGÓLNE
body - cały blog
.content - cały blog (oprócz paska nawigacyjnego)
.navbar - pasek nawigacyjny
.column-center-inner - środkowa kolumna bloga
.column-right-inner - prawa kolumna bloga
#sidebar-right-2-1 - lewa kolumna w prawej kolumnie bloga
#sidebar-right-2-2 - prawa kolumna w prawej kolumnie bloga
.column-left-inner - lewa kolumna bloga
#sidebar-left-2-1 - lewa kolumna w lewej kolumnie bloga
#sidebar-left-2-2 - prawa kolumna w lewej kolumnie bloga
.main-inner - obszar wszystkich kolumn i pagera bloga
NAGŁÓWEK
.header-outer - nagłówek bloga (na całą szerokość okna)
.Header - nagłówek bloga (na szerokość bloga)
.description - opis bloga
.titlewrapper - nagłówek bloga
.descriptionwrapper - opis bloga 
STOPKA
.footer-outer - stopka (cała szerokość okna)
.footer-inner - stopka (szerokość bloga)
.foot - każdy widżet w stopce
.Attribution - napis Technologia Blogger i nazwa szablonu
.feed-links - napis Subskrybuj Post (Atom)
#Attribution1 - napis Technologia blogger
KARTY
.tabs-outer - cały pasek kart, na całą szerokość bloga
.tabs-inner - cały pasek kart, na szerokość bloga
.tabs-inner ul li - każdy osobny przycisk kart
.tabs-inner .widget li a - linki kart
.tabs-inner .widget li.selected a - karty które wcześniej odwiedziliśmy
.tabs-inner .widget li a:hover - karty po najechaniu myszką
POST
#Blog1 - cały post
.blog-posts - cały pasek z postami (oprócz napisów "starszy post", "strona główna", "nowszy post")
.post-outer - post bez daty
.date-header - sama data
.date-header span - całe pole z datą
.post - sam post z nagłówkiem i stopką, ale bez daty
.post-body - tylko to co napisaliśmy w poście, bez daty i nagłówka
.post-title - obszar tytułu posta
.post-title a - link tytułu posta
.post-header - miejsce między tytułem posta a notką
.post-footer - stopka posta
.post-author - napis Autor: (wasz nick), pod postem
.post-author span - sam wasz nick pod postem
.post-timestamp - godzina publikacji posta
.timestamp-link - sama godzina bez literki "o"
.post-comment-link - ramka wokół linku do komentarzy
.comment-link - link do komentarzy
.post-body img - obrazki, które umieściliśmy w poście
.post-icons - ikonki, które znajdują się pod postem
.post-labels - etykiety posta
.reactions-label-cell - napis "Reakcje"
.post-location - lokalizacja napisania notki
#blog-pager - ramka z linkami "starszy post", "strona główna", "nowszy post"
.blog-pager a - same linki starszy post, strona główna, "nowszy post"
.home-link - ramka z linkiem Strona główna
.blog-pager-newer-link - ramka z linkiem "nowszy post"
.blog-pager-older-link - ramka z linkiem "starszy post"
.feed-links - napis Subskrybuj Posty(Atom)
.jump-link - przycisk czytaj więcej w pościeblockquote - cytat w poście
(c) tajemniczy--ogrod, (c) Graphical Thoughts 

Brak komentarzy:

Prześlij komentarz