Instrukcje CSS

Instrukcje pisałam sama z głowy na podstawie tego, co potrafię. Bardzo proszę o niekopiowanie i niewklejanie na swoich blogach poniższych treści, gdyż ich napisanie zajęło mi sporo czasu. Również bardzo proszę o niekopiowanie pomysłu na taką, a nie inną formę uporządkowania tych informacji. Byłoby miło, gdyby moja praca została pod tym względem uszanowana. Nie mam natomiast nic przeciwko odsyłaniu (poprzez jakiś link na blogu) do tych instrukcji.

Najnowszy dział, czyli szablon krok po kroku, zawierać będzie kody na gotowe szablony: wszystkie układy, typy menu, itd. Są to gotowe szkielety, w które podstawiać możecie swoje kolory i szybko, bez znajomości CSS'a, stworzycie własny szablon. Z tego powodu, gdyż praktycznie nie będziecie musieli nic robić od siebie, bardzo proszę o jedną rzecz. Jeśli coś stąd Ci się przydało przy tworzeniu szablonu, proszę bardzo o jakiś mały dopisek (przy każdym szablonie stworzonym z pomocą tych "szkieletów") w stylu: "Szablon stworzony z pomocą instrukcji na Terrible Crash" lub po prostu "Szablon stworzony z pomocą TEGO". Ważne, żeby dopisek ten zawierał zalinkowane słowo, które przeniesie do tej podstrony z instrukcjami. Z góry dziękuję.

Już niebawem pojawi się tutaj więcej kodów. Cierpliwości:)

Ogólne

• PRACA Z BLOGSPOTOWYM SZABLONEM - JAK ZACZĄĆ
  Przedstawię tutaj kilka złotych zasad dla początkujących. Poniżej, w kolejnych instrukcjach, znajdziecie mnóstwo gotowych kodów, które oczywiście możecie wykorzystywać. Jednak aby stały się dla Was użyteczne, musicie wiedzieć, co z tym należy zrobić. Znajdziecie tu też wskazówki, jakich błędów unikać.

  1. Kody CSS zawsze wklejamy/piszemy tutaj: Szablon > Dostosuj > Zaawansowane > Dodaj arkusz CSS.
  
  2. Pisząc własny kod w tym okienku możemy oglądać jednocześnie zmiany, jakie w szablonie zachodzą na podglądzie poniżej. Pamiętaj, że gdy wkleisz jakikolwiek kod, podgląd może nie zareagować. Naciśnij spację i zmaż ją, wtedy zmiany z wklejonego kodu wskoczą na podgląd.
  
  3. Staraj się nie pracować z szablonem w kilku zakładkach na raz. Popełniałam ten błąd na początku i już raz mi się zdarzyło, że przez przypadek zapisałam szablon w karcie, w której nie było jeszcze żadnych zmian i pozamykałam pozostałe karty (te ze zmianami)... I szablon poszedł.
  
  4. Każdy element możesz ustawić w dowolnym miejscu. Nie ma rzeczy niemożliwych. Jeśli coś sobie wymyślisz, to da się to zrobić, tylko musisz się troszeczkę natrudzić:)
  
  5. Jeśli nie zdefiniujesz rozmiarów dla wszystkich elementów bloga może się zdarzyć, że po ustawieniu np. kart w nietypowym miejscu nie da się na nie kliknąć (bo będzie je przysłaniał inny element). Jeśli jakikolwiek element jest dla Ciebie niedostępny (np. w link nie da się kliknąć) musisz wkleić do tego elementu kod:
  z-index:50;
  Pomaga zawsze:)
  
  6. Wybierając szablon bazowy dla swojego najlepiej skorzystać z czarnej Rewelacji.
  
  7. Jeśli wstawiasz nagłówek do ramki "Nagłówek" najlepiej wstawić go z linku. Nigdy nie wstawiaj go bezpośrednio z folderu, gdyż blogger zmieni Ci kolory. Zalinkuj go na imageshack.us, skopiuj bezpośredni link do obrazu i wklej ten link do ramki. Następnie wciśnij enter, kliknij gdziekolwiek w tej ramce, poczekaj, aż zacznie się ładować i pojawi się miniaturka nagłówka. Dopiero wtedy zapisz.
  

• Jak szybko zrobić szablon - podstawy
  Właściwie instrukcja ta powinna się nazywać tak: "Jak stworzyć własny szablon bez znajomości CSS'a". Generalnie mogłabym się tego pozbyć. Od dawna nie używam już wielu ze sposobów, które tam opisałam, głównie dlatego, że dzisiaj CSS jest dla mnie logicznym językiem. Wiem jednak, że post ten pomógł wielu osobom i co więcej, jest napisany w sposób naprawdę dla początkujących (opisywałam to, gdy sama byłam początkująca, ponieważ nigdzie nie mogłam znaleźć konkretnych pomocy, od czego zacząć robić szablon i stwierdziłam, że takie informacje powinny być gdzieś dostępne). Dlatego jeśli dopiero zaczynasz, to post ten jest dla Ciebie:) KLIKNIJ, ABY PRZECZYTAĆ!

• Selektory wraz z objaśnieniami
  Zbiór wszystkich przydatnych selektorów. Mogłabym publikować wszystkie, ale po co? Większości z nich używam, ale niektóre są mi po prostu niepotrzebne. Konkretne zastosowania części z nich znajdziecie w instrukcji poniżej (Jak szybko zrobić szablon - krok po kroku). Starałam się je dać w takiej kolejności, w jakiej najlepiej mi się z nim pracuje. Ogólne

  body	Dosłownie cały blog. Za pomocą tego selektora możemy wstawić tło w postaci obrazu, zalinkowane wcześniej na jakiejś stronie (polecam imageshack.us): body {background: url("http://adresobrazka.pl");} lub w postaci koloru: body {background:#000;}
  .header	Nagłówek. Dzięki niemu możemy ustawić, gdzie ma się nagłówek znajdować oraz co nim będzie, np.: .header {background: url("http://adresobrazka.pl"); width:400px;height:500px;} Koniecznie podajemy też wysokość (height) i szerokość (width) wykonanego nagłówka.
  .header h1	Dzięki temu możemy usunąć tekst nagłówka bez wstawiania przezroczystego nagłówka: .header h1 {display:none;}
  .main-inner	Selektor pozwoli nam ustanowić tło pod blogiem (postami i kolumnami) w układzie zamkniętym, można także ustawić miejsce, gdzie ta część bloga ma być: .main-inner {background:#e9e9e9;position:relative;left:-34px;}
  .footer-inner	Stopka. Możemy sobie edytować tekst w stopce, zmieniać jej wielkość... Jak wyżej:)
  .column-center-inner	Podobnie jak z .main-inner, jednak ten selektor dotyczy kolumny środkowej (postów i tego, co do niej wrzucimy).
  .column-right-inner	Dotyczy prawej kolumny z gadżetami.
  .column-left-inner	Dotyczy lewej kolumny. Również możemy wszystko tu wpisywać, szerokość, pozycję, itd.

  Posty i komentarze

  #Blog1	Ramka z postami. Dzięki niej pod postami i komentarzami możemy ustawić sobie tło obrazkowe: #Blog1 {background: url("http://adresobrazka.pl");} lub w postaci koloru: #Blog1 {background:#000;}
  .post-body	Pole z treścią notki. Dzięki temu możemy dodać kolejne tło, tak, jak w przypadku #Blog1.
  h3.post-title	Tytuł posta. Możemy ustalać wszystko, dosłownie:) Przykład z tłem: h3.post-title {background:#000;}
  h2.date-header	Data posta. Działa tak samo, jak h3.post-title.
  .post-author	Dopisek pod postem: "Autor: Yassmine". Możemy ustawić to w dowolnym miejscu, np. .post-author {position:absolute;width:100px;top: 10px; left:10px;}
  .comment-link	Działa tak, jak .post-author, tylko dotyczy odnośnika pod postem: "10 komentarzy".
  .post-timestamp	Godzina opublikowania posta: "o 22:35". Można z nią działać podobnie, jak z autorem posta czy linkiem do komentarzy.
  h2.date-header span	Również data, ale używamy tego selektora, jeśli chcemy go ustawić w nietypowym miejscu, np. poza ramką postów. Działa to tak, jak .post-author, .comment-link itd.
  .post-footer	Stopka posta, z linkiem do komentarzy, autorem, godziną posta. Używamy, gdy chcemu mieć wszystko w jednej linii, np. z tłem. .post-footer {background:#000;}
  .blog-pager	Pager ze stroną główną, linkami "starsze posty" i "nowsze posty" pod ramką z postami.
  .comment	Selektor komentarzy. Możemy dzięki niemu ustanowić tło do wszystkich komentarzy. .comment {background:#000;}
  .comment-block	Selektor samej treści komentarza. Możemy tu ustanowić odrębne tło tylko do tej treści: .comment-block {background:#fff;}
  .avatar-image-container	Awatar autora komentarza (pomniejszony obrazek profilowy przy jego treści). Możemy np. zaokrąglić: .avatar-image-container {border-radius: 90px;}

  Gadżety

  #Text1	Ramka z tekstem.
  #HTML1	Ramka HTML/JavaScript.
  #Image1	Ramka z obrazem.
  #Stats1	Statystyka bloga.
  #BlogArchive1	Archiwum bloga.
  #Poll1	Sondy.
  #PageList1	Ramka ze stronami (menu).
  #BlogList1	Ramka z linkami do innych blogów.
  #LinkList1	Ramka z listą linków.
  #Profile1	Ramka "o mnie".
  #Label1	Ramka z etykietami.
  #PopularPosts1	Popularne posty.
  #Translate1	Ramka z tłumaczeniem.

  Linki Jeżeli w danym gadżecie lub ogólnie elemencie występują linki, np. w ramce ze stronami, w ramce z tekstem, w tytule, w etykietach itd., a chcielibyście je edytować, to pamiętajcie, że można edytować linki w KAŻDYM elemencie, dopisując odpowiednie frazy, np.:
  

  a:link	Link zwyczajny. Przykład: #PageList1 a:link {color:#fff;}
  a:hover	Link po najechaniu myszką. Przykład: #Label1 a:hover {background:#fff;}
  a:visited	Link odwiedzony. Przykład: #HTML1 a:visited {color:#fff;}

Jak zrobić szablon - krok po kroku

• ZAPLANUJ UKŁAD
  Na początku musisz wiedzieć, jak Twój blog ma wyglądać, jaki nadasz mu kształt. Możesz wymyślić własny układ lub skorzystać z tych opracowanych przeze mnie. Aby powiększyć podgląd układu kliknij prawym przyciskiem myszy i wybierz: "otwórz w nowej karcie". Pogrubione rzeczy oznaczone kolorem różowym należy wyrzucić z kodów i zastąpić kodami kolorów, adresem url, itd.
  

  • POBIERZ KOD UKŁADU 1
    body {
    background:#KOD_KOLORU;
    }
    
    .header h1 {
    display:none;
    }
    
    .header {
    background: url("adres_obrazka");
    width:1000px;
    height:650px;
    position:relative;
    left:-50px;
    }
    
    .column-right-inner {
    position:relative;
    top:-350px;
    left:60px;
    width:250px;
    }
    
    #Blog1 {
    width:600px;
    position:relative;
    top:-200px;
    left:40px;
    }
    

  • POBIERZ KOD UKŁADU 2
    body {
    background:#KOD_KOLORU;
    }
    
    .header h1 {
    display:none;
    }
    
    .header {
    background: url("adres_obrazka");
    width:1000px;
    height:650px;
    position:relative;
    left:-50px;
    }
    
    .column-left-inner {
    position:relative;
    top:-350px;
    left:0px;
    width:250px;
    }
    
    #Blog1 {
    width:600px;
    position:relative;
    top:-200px;
    left:-10px;
    }

  • POBIERZ KOD UKŁADU 3
    body {
    background:#KOD_KOLORU;
    }
    
    .header h1 {
    display:none;
    }
    
    .header {
    background: url("adres_obrazka");
    width:1000px;
    height:650px;
    position:relative;
    left:-50px;
    }
    
    .column-right-inner {
    position:relative;
    top:-350px;
    left:20px;
    width:240px;
    }
    
    .column-left-inner {
    position:relative;
    top:-350px;
    left:-65px;
    width:240px;
    }
    
    #Blog1 {
    width:580px;
    position:relative;
    top:-200px;
    left:-10px;
    }

  • POBIERZ KOD UKŁADU 4
    body {
    background:#KOD_KOLORU;
    }
    
    .header h1 {
    display:none;
    }
    
    .header {
    background: url("adres_obrazka");
    width:900px;
    height:500px;
    position:relative;
    left:-50px;
    }
    
    .main-inner {
    background:#KOD_KOLORU_TŁA_POD_KOLUMNAMI_W_DÓŁ_OD_NAGŁÓWKA;
    position:relative;
    left:-34px;
    }
    
    .column-right-inner {
    position:relative;
    left:5px;
    width:240px;
    top:-10px;
    }
    
    #Blog1 {
    width:620px;
    position:relative;
    left:5px;
    top:-10px;
    }

  • POBIERZ KOD UKŁADU 5
    body {
    background:#KOD_KOLORU;
    }
    
    .header h1 {
    display:none;
    }
    
    .header {
    background: url("adres_obrazu");
    width:900px;
    height:500px;
    position:relative;
    left:-50px;
    }
    
    .main-inner {
    background:#KOD_KOLORU_TŁA_POD_KOLUMNAMI_W_DÓŁ_OD_NAGŁÓWKA;
    position:relative;
    left:-34px;
    }
    
    .column-left-inner {
    position:relative;
    left:5px;
    width:240px;
    top:-10px;
    }
    
    #Blog1 {
    width:620px;
    position:relative;
    left:-20px;
    top:-10px;
    }

  • POBIERZ KOD UKŁADU 6
    body {
    background:#KOD_KOLORU;
    }
    
    .header h1 {
    display:none;
    }
    
    .header {
    background: url("adres_obrazu");
    width:622px;
    height:500px;
    position:relative;
    left:206px;
    border-right:22px solid #KOD_KOLORU_TŁA_POD_KOLUMNAMI_W_DÓŁ_OD_NAGŁÓWKA;
    border-top:22px solid #KOD_KOLORU_TŁA_POD_KOLUMNAMI_W_DÓŁ_OD_NAGŁÓWKA;
    }
    
    .main-inner {
    position:relative;
    left:-34px;
    background:#KOD_KOLORU_TŁA_POD_KOLUMNAMI_W_DÓŁ_OD_NAGŁÓWKA;
    }
    
    .column-left-inner {
    position:relative;
    left:0px;
    width:240px;
    top:-552px;
    background:#KOD_KOLORU_TŁA_POD_KOLUMNAMI_W_DÓŁ_OD_NAGŁÓWKA !important;
    padding: 22px 8px 3px 8px !important;
    }
    
    #Blog1 {
    width:620px;
    position:relative;
    left:-20px;
    top:-10px;
    }

  • POBIERZ KOD UKŁADU 7
    body {
    background:#KOD_KOLORU;
    }
    
    .header h1 {
    display:none;
    }
    
    .header {
    background: url("adres_obrazu");
    width:622px;
    height:500px;
    position:relative;
    left:-50px;
    border-left:22px solid #KOD_KOLORU_TŁA_POD_KOLUMNAMI_W_DÓŁ_OD_NAGŁÓWKA;
    border-top:22px solid #KOD_KOLORU_TŁA_POD_KOLUMNAMI_W_DÓŁ_OD_NAGŁÓWKA;
    }
    
    .main-inner {
    position:relative;
    left:-34px;
    background:#KOD_KOLORU_TŁA_POD_KOLUMNAMI_W_DÓŁ_OD_NAGŁÓWKA;
    }
    
    .column-right-inner {
    position:relative;
    left:4px;
    width:240px;
    top:-552px;
    background:#KOD_KOLORU_TŁA_POD_KOLUMNAMI_W_DÓŁ_OD_NAGŁÓWKA !important;
    padding: 22px 8px 3px 8px !important;
    }
    
    #Blog1 {
    width:620px;
    position:relative;
    left:6px;
    top:-10px;
    }

  • POBIERZ KOD UKŁADU 8
    body {
    background:#KOD_KOLORU;
    }
    
    .header h1 {
    display:none;
    }
    
    .header {
    background: url("adres_obrazu");
    width:700px;
    height:720px;
    position:absolute;
    top:0;
    left:-16px;
    }
    
    .main-inner {
    position:relative;
    top:100px;
    }
    
    .column-right-inner {
    position:relative;
    left:-20px;
    top:78px;
    width:220px;
    padding: 22px 8px 3px 8px !important;
    }
    
    #Blog1 {
    width:500px;
    position:relative;
    left:100px;
    top:100px;
    }

• STWÓRZ NAGŁÓWEK
  Jeśli wybrałeś/aś już układ, to wiesz mniej lub więcej, jak duży nagłówek jest Ci potrzebny oraz czy będzie się wtapiał w tło, czy będzie miał zamknięte granice. Zatem możesz zacząć tworzyć swój nagłówek. Pomogą Ci w tym instrukcje i pliki psd. Pliki psd zawierają kompletną pracę, wszystkie warstwy, za pomocą których stworzyłam nagłówek. Możecie w nich więc zobaczyć, co robiłam, w jakiej kolejności, jakich technik używam, itd. Oczywiście w instrukcjach również starałam się to dokładnie opisać, aczkolwiek plik psd to zawsze gotowa praca. Proszę o umieszczenie informacji w stylu: "Nagłówek z instrukcji na Terrible Crash, jeśli stworzysz coś z pomocą tych tutoriali i plików psd. Poniżej przykładowe nagłówki, które możecie stworzyć z moimi pomocami dydaktycznymi:p
  KLIKNIJ, ABY PRZEJŚĆ DO TUTORIALI I PLIKÓW PSD!