Selektory CSS

31.12.2014


Napisałam dla Was już parę instrukcji, ale zdałam sobie sprawę, że nie przedstawiłam Wam najbardziej podstawowej rzeczy - selektorów CSS, które jakby nie patrzeć są potrzebne przy jakichkolwiek zmianach. Dlatego dziś przedstawię Wam listę tych selektorów.
Ostatnio dostałam kilka maili od osób z pytaniami "Jaki jest kod na wyśrodkowanie nagłówka" "Jak zmienić nagłówki gadżetów" i jeszcze wiele wiele więcej. Selektory pomogą Wam w otrzymaniu odpowiedzi na dane pytanie.

Selektory ogólne

body - odpowiada za cały blog,dzięki temu selektorowi możemy ustawić np. ramkę lub tło dla całego bloga przykład 1,przykład 2
.content-outer - dzięki temu selektorowi, możemy utworzyć np. obramowanie lub cień. Obejmuje to obszary - nagłówka, postów, kolumny bocznej, pagera. Przykład 1, przykład 2.
 #Blog1 - odpowiada za obszar całego postu wraz z jego datą i pagerem bloga,dzięki niemu możemy ustawić np tło dla obszaru wpisu i pagera.
.Attribution - podpis w stopce bloga czyli miejsce gdzie jest napis Technologia Blogger
.navbar - pasek nawigacyjny na górze bloga
.cookie-choices-info - ramka z informacją o ciasteczkach
.cookie-choices-info .cookie-choices-text - tekst (informacja o ciasteczkach)
.cookie-choices-info .cookie-choices-button - przyciski w informacji o ciasteczkach
a:hover - wszystkie linki po najechaniu na nie myszką
.feed-links - napis Subskrybuj: Posty (Atom)

Nagłówek

.header - nagłówek bloga
.Header h1 - tytuł bloga
.Header .description - opis bloga, pod nagłówkiem

Posty

.post-outer - odpowiada tylko za obszar postu,bez daty i pagera.
.date-outer - odpowiada za obszar całego postu wraz z datą bez pagera,dzięki niemu możemy ustawić np. tło dla obszaru wpisu.
.date-header  lub h2.date-header - cały obszar nagłówka z datą (na całą długość posta)
.date-header span - tylko nagłówek z datą
.post-footer - stopka postu
h3.post-title - cały obszar tytułu posta (na całą długość)
h3.post-title a - tylko obszar tytułu posta
h3.post-title a:hover - tytuł posta po najechaniu na niego myszką
.post-author - autor w stopce posta
.comment-link - komentarze w stopce posta
.post-footer-line-2 - etykiety w stopce posta
.post-body  - obszar samego wpisu bez daty i tytułu posta
.post-body img  - wszystkie zdjęcia umieszczone w poście
.jump-link - przycisk czytaj więcej w poście
.jump-link:hover - przycisk czytaj więcej w poście po najechaniu na niego myszką
.post blockquote - cytaty w poście
.column-center-inner - odpowiada za obszar postu wraz z datą, stopką posta oraz pagerem.

Komentarze

.comment-header - nagłówek komentarzy z nazwą komentującego,datą i godziną. Przykład możecie zobaczyć u mnie na blogu
.comments h4 - nagłówek komentarzy nad wszystkimi dodanymi komentarzami pod postem.
.comment p  - wszystkie komentarze
.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ń pod komentarzem po najechaniu na nie myszką.
.avatar-image-container - avatary obok komentarzy

Kolumna boczna

.column-right-inner - odpowiada za obszar całej prawej kolumny,selektor ten może nam posłużyć do ustawienia ramki kolumny lub tła
.column-left-inner - odpowiada za obszar całej lewej kolumny,selektor ten może nam posłużyć do ustawienia ramki kolumny,tła lub wielkości czcionki.
.column-right-inner .widget - dotyczy wszystkich gadżetów w prawej kolumnie
.column-left-inner .widget - dotyczy wszystkich gadżetów w lewej kolumnie

Gadżety

.sidebar .widget h2 - odpowiada za wszystkie nagłówki gadżetów w kolumnach bocznych
.widget h2 - odpowiada za wszystkie nagłówki gadżetów wraz z datą
.main-inner .widget h2 - odpowiada za wszystkie nagłówki gadżetów w kolumnach bocznych oraz za nagłówek z datą
#Label1  - cały obszar etykiet wraz z tytułem gadżetu.
.label-size a - tylko etykiety
#Label1 h2 - nagłówek gadżetu etykiety
#Label1 a:hover - linki etykiet po najechaniu na nie myszką
#BlogArchive1 - gadżet archiwum
#BlogArchive1 h2 - Nagłówek gadżetu archiwum
#BlogArchive1 a - linki w archiwum
#BlogArchive a:hover - linki archiwum po najechaniu na nie myszką
#ArchiveList  - sam lista archiwum bez nagłówka gadżetu
#Stats1  - gadżet statystyki
#Stats1 h2  - Nagłówek gadżetu statystyki
#Text1 - cały gadżet z tekstem,liczba 1 jest zmienna zależy od tego jaki nasz gadżet Tekst ma numerek,żeby to sprawdzić wystarczy wejść w układ-otworzyć nasz gadżet z Tekst i na górze przewinąć link do samego końca tam nam się pojawi jaki numer ma nasz gadżet.
#Image1 - cały gadżet z obrazkami na blogu,tutaj również liczba jest zmienna jak w przypadku gadżetu tekst i tak samo się to sprawdza.
#FollowByEmail1 - cały gadżet obserwuj przez e-mail
#HTML1 - cały gadżet HTML/JavaScript,tutaj również liczba jest zmienna jak w przypadku zdjęć i tesktu.
#Followers1 - cały gadżet z obserwatorami bloga
.popular-posts - cały gadżet popularnych postów
.popular-posts  .item-thumbnail img  - miniaturka popularnych postów
#BlogArchive1_ArchiveMenu - archiwum, styl menu
.FollowByEmail .follow-by-email-inner - gadżet obserwuj przez e-mail
.FollowByEmail .follow-by-email-inner .follow-by-email-address - pole do wpisywania adresu w gadżecie obserwuj przez e-mail
.FollowByEmail .follow-by-email-inner .follow-by-email-submit - przycisk do subskrypcji w gadżecie obserwuj przez e-mail

Strony/menu

.tabs-outer lub .tabs-inner - pasek stron
.tabs-inner .widget li a - same strony
.tabs-inner .widget li.selected a - aktywna strona tzn. strona na której obecnie się znajdujemy
.tabs-inner .widget li a:hover - strony po najechaniu myszką
#PageList1 - cały gadżet ze stronami
#PageList1 a - same strony
#PageList1 a:hover  - strony po najechaniu myszką

Stopka bloga/pager bloga

.footer-outer - stopka bloga
.footer-outer h2 - nagłówki gadżetów w stopce bloga
.blog-pager  - cały obszar pagera bloga (starsze,nowsze posty)
.blog-pager a - tylko obszar przycisków starsze,nowsze posty i strona główna
.blog-pager a:hover  - przyciski starsze,nowsze posty i strona główna po najechaniu na nie myszką
a.home-link - przycisk strona główna w pagerze bloga
a.home-link:hover - przycisk strona główna w pagerze bloga po najechaniu myszką
a.blog-pager-older-link - przycisk starsze posty
a.blog-pager-older-link:hover - przycisk starsze posty po najechaniu myszką
a.blog-pager-newer-link  - przycisk nowsze posty
a.blog-pager-newer-link:hover - przycisk nowsze posty po najechaniu myszką

40 komentarzy:

  1. Bardzo przydatny post! Kiedyś taki szukałam, więc na pewno nie jednej osobie się on bardzo przyda :)

    http://moooneykills.blogspot.com/2014/12/mrs-winter.html

    OdpowiedzUsuń
  2. O! Przypomniało mi się jak kiedyś uczyłam się tego wszystkiego sama, to były czasy wkurzania się :D

    OdpowiedzUsuń
    Odpowiedzi
    1. Tak dokładnie tak! nawet czasem bluzgi leciały w moim przypadku,a potem lament i szloch aby coś w końcu zadziałało :)

      Usuń
  3. bardzo ciekawy post, wydaję mi się że będę wracać nie raz do niego , ponieważ uczę się na takim profilu gdzie HTML jest czymś obowiązkowym dla mnie ;) obserwuję :)

    http://thebeautyofinthedetails.blogspot.com

    OdpowiedzUsuń
  4. Bardzo fajny post! :3 Chyba po raz pierwszy taki widzę! :3 Bardzo oryginalny! ;))
    http://neversayneverbyjulia.blogspot.com/

    OdpowiedzUsuń
  5. Bardzo ciekawy i przydatny post.
    Pozdrawiam
    http://pauline-memories.blogspot.com
    Udanej zabawy sylwestrowej
    Szczęśliwego Nowego Roku .

    OdpowiedzUsuń
  6. Świetny wygląd bloga :*
    Wesołego Nowego roku :D
    Zapraszam do mnie :)
    http://miss-clare.blogspot.com/

    OdpowiedzUsuń
  7. Dziękuję za tego posta, bardzo przydatny :)
    Szczęśliwego Nowego Roku 2015 ♥
    http://blog017.blogspot.com/2014/12/goodbye-2014-hello-2015.html
    Zapraszam na podsumowanie roku 2014 ! <3

    OdpowiedzUsuń
  8. I love this post!! Its sooo helpful! Thx for sharing!!

    Wanna follow each other? Your blog is amazing!
    Wish you and your beloved a happy new year, good luck and health!
    xoxo Colli || TOBEYOUTIFUL

    OdpowiedzUsuń
  9. przydatny post! Wszystkiego dobrego w Nowym Roku ♥

    Pozdrawiamy!
    ♡ Twins Life. [KLIK] ♡

    OdpowiedzUsuń
  10. przydatne...

    http://Fidanzataa.blogspot.com

    OdpowiedzUsuń
  11. Post bardzo przydatny, a ja zadam jeszcze jedno pytanie. Wokół baneru mam białą ramkę i zastanawiam się czy nie mogę się jej jakoś pozbyć ;)
    Mój blog-klik

    OdpowiedzUsuń
    Odpowiedzi
    1. Rozumiem,że chodzi Ci o banery,które masz w kolumnie bocznej,jeśli chcesz się pozbyć ramek i cieni we wszystkich banerach i obrazkowych tytułach gadżetów to zapraszam do tego postu http://blonparia.blogspot.com/2014/02/post-zaproponowany-2-kilka-kodow.html pierwsze dwa kody to właśnie na usunięcie obramowania wokół zdjęć w kolumnach bocznych ;)

      Usuń
  12. Uwielbiam tutoriale :) Więc fajnie, że będziesz je wstawiać na bloga ;3
    KLIK-BLOG

    OdpowiedzUsuń
  13. Mogłabyś mi napisać jaki jest dokładny kod, żeby w obramowanie komentarza zawierało to co u Ciebie?

    OdpowiedzUsuń
    Odpowiedzi
    1. Nie podaje gotowych kodów chyba, że na potrzeby wpisu. Podam Ci selektor, bo akurat w tej liście tego nie ma.
      Selektor: .comment-block do niego po { dopisujesz wszystko co Ci się podoba, obramowanie, kolor itd i zamykasz to tym ;} a o rodzajach ramek wspomniałam w tym wpisie http://blonparia.blogspot.com/2014/12/jak-wykonac-aktywny-przycisk-czytaj.html punkt 3 D

      Usuń
  14. jak zrobić takie tło dla dolnej kolumny bloga? niektóre blogi mają trzy dolne kolumny w stopce bloga a stopce bloga nikt nie pisze artykułów. Blonpario prosze o pomoc jak pokombinowac z kodem?

    OdpowiedzUsuń
  15. Układ stopki bloga zmieniasz ww dostosuj - układ i tam wybierasz ile kolumn ma mieć stopka bloga. Jeśli chodzi o kolor stopki, to wszystko zależy od szablon. W szablonie Awesome inc. (Rewelacja) w dostosuj - zaawansowane jest podkategoria "stopka bloga", w której zmieniasz kolor. Jeśli jest to szablon Simple to trzeba kombinować w kodzie - jeśli posiadasz ten szablon to odezwij się na maila, a powiem co i jak zrobić :)

    OdpowiedzUsuń
  16. Owszem masz racje udało sie za pomocą twojego kodu pokombinować. W rezultacie zostałam przy ramce. Mam inny problem nie umiem za pomoca Twojego kodu wgrać przycisku czytaj dalej. Edytuje i w kodzie html przerabiam i dostosowuje szablon od Blokotka

    OdpowiedzUsuń
  17. Masz wgrane skracanie wpisu. Jednak domyślam się, że chodzi o zmienienie wyglądu czytaj dalej? Masz w szablonie taki o to kod: /* Read more---------------------------------------------- */.readmore a {position: absolute;text-align: right;display: block;width: 200px;right: 10px;padding: 20px 0;text-decoration: none;font-size: 16px;cursor: pointer;text-transform: uppercase;}.readmore a:hover {color: #dddddd;}

    Musisz edytować go pod siebie

    OdpowiedzUsuń
  18. mam włączone zawijanie i wczesniej w poprzednimm szablonie poszło jak z płatka a teraz wyskakują błędy html

    OdpowiedzUsuń
  19. chciałabym zapiast słowa czytaj dalej wstawic dwa zmieniające się obrazki

    OdpowiedzUsuń
  20. Nie za bardzo rozumiem o co chodzi

    OdpowiedzUsuń
  21. Wcześniej miałam inny szablon bloga i wszystko działało. Teraz zmieniłam szablon i przestało działać... Trudno będę miała bez ładnej grafiki. A sama ją przygotowałam w tym celu :(.
    Nie umiem jednak tego obejść choć to jest proste.

    OdpowiedzUsuń
  22. Już rozumiem. W tym szablonie masz automatycznie zwijanie wpisów co wiąże się z tym, że Twoja grafika, która była jako czytaj dalej się usunęła. Trzeba usunąć skrypt odpowiadający za automatyczne zwijanie wpisów, wtedy grafika powróci na miejsce

    OdpowiedzUsuń
  23. Hej, Twój post jest bardzo przydatny :)
    Ale mam pytanko... czy jest jakiś kod na obwódkę tekstu?
    Mam taki pomysł, żeby tytuł zrobić biały a obwódkę w innym kolorze ale nwm jak to zrobić :/
    Poratuje ktoś??

    OdpowiedzUsuń
  24. Nie spotkałam się z kodem na to aby tekst miał obramowanie, a wypełnienie białe. Chyba, że chodzi o to żeby był cały w ramce to wtedy owszem da radę :)

    OdpowiedzUsuń
  25. No właśnie nie w ramce :)
    Tylko żeby obramowanie samo było. Mimo wszystko dziękuję na odpowiedź :)
    (I znalazłam rozwiązanie: tło bloga na zielone, PrtSc, wklej do gimpa, usuń tło, duplikuj, zmień kolor na biały xD)

    OdpowiedzUsuń
  26. Jaki jest selektor do Listy Blogów?
    Z góry dziękuję!

    OdpowiedzUsuń
  27. dziękuję!

    2016-04-09 11:22 GMT+02:00 Disqus :

    OdpowiedzUsuń
  28. Wracam do Ciebie znów po pomoc. Zrobiłam sobie od nowa szablon sama, ale problem mam ze zmieniającymi się czcionkami w pasku stron na górze. Raz odświeżając jest to Arial, a raz Times New Roman, więc prawdopodobnie wgrany kod css koliduje z html, jeśli to możliwe. Druga sprawa, chciałabym, żeby napis "home", jak i starsze i nowsze wpisy były na środku, żeby mniej więcej wyglądalo to tak:

    OdpowiedzUsuń
  29. Proszę o wiadomość na maila

    OdpowiedzUsuń
  30. Julia Julitta14 maja 2016 09:15

    Dziękuję!

    OdpowiedzUsuń
  31. Świetny post i bardzo przydatne informacje. Mam pytanie - jak zmienić dane w .Attribution? Chcę usunąć tę całą technologię blogger.

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona