11/01/2012

Arkusze

Mia

KODY CSS DLA SZABLONIARZY

POSTY


Kolor tła postów:
.post {background-color: #afa4b2;}

Obrazek w tle posta:
.post {background-image: url(adres do obrazka);}

Przezroczystość tła:
.post {opacity: 0.5;}

Marginesy:
.post {padding: 20px;}

Cień tekstu posta:
.post {text-shadow: 0px 0px 3px #000000}

Cień ramki posta:
.post {box-shadow: 2px 2px 5px;}

Ramki posta:
a)   Linia ciągła:
.post {border-style: solid;}

b)  Linia podwójna:
.post {border-style: double;}

c)    Linia kreskowana:
.post {border-style: dashed;}

d)  Linia kropkowana:
.post {border-style: dotted;}

Grubość ramki:
.post {border-width: 2px;}

Kolor tekstu i ramki w poście:
.column-center-inner {color: #000000;}

                                  Kolor ramki w poście:
.column-center-inner {border-color: #000000;}  

Rodzaj czcionki tekstu w poście:
.column-center-inner {font-family: Georgia;}

Wielkość czcionki w tekście:
.column-center-inner {font-size: 15px;}

Wyśrodkowanie tekstu:
.column-center-inner {text-align: center;}

Wyrównanie tekstu do lewej:
.column-center-inner {text-align: left;}

Wyrównanie tekstu do prawej:
.column-center-inner {text-align: right;}

Wyrównanie tekstu od lewej do prawej, tak zwane wyjustowanie:
.column-center-inner {text-align: justify;}

Zaokrąglone rogi:
.post {border-radius: 90px 90px 40px 40px;}

Przesunięcie:
.column-center-inner {margin: 90px 300px 0px -400px;}

WSZYSTKIE PARAMETRY MOŻNA ZMIENIĆ!
SPRAWDZAJ NA PODGLĄDZIE, CZY ZACHODZĄ JAKIEŚ ZMIANY. JEŚLI NIE, SPRAWDŹ CZY DOKŁADNIE SKOPIOWAŁEŚ I WKLEIŁEŚ KOD!

KOLUMNA BOCZNA LEWA

Kolor tła kolumny:
.column-left-inner {background-color: #4c3e6c;}

Przezroczystość tła:
.column-left-inner {opacity: 0.6;}

Marginesy:
.column-left-inner {padding: 15px ;}

Cienie tekstu ramek:
.column-left-inner {text-shadow: 0px 0px 3px #000000}

Cienie ramki kolumny:
.column-left-inner {box-shadow: 0px 0px 3px #000000}
Ramki kolumny:
a)    Linia ciągła:
.column-left-inner {border-style: solid;}
b)   Linia podwójna:
.column-left-inner {border-style: double;}

c)    Linia kreskowana:
.column-left-inner {border-style: dashed;}

d)    Linia kropkowana:
.column-left-inner {border-style: dotted;}

Grubość ramki:
.column-left-inner {border-width: 2px;}

Kolor tekstu i ramki w kolumnie:
.column-left-inner {color: #000000;}

Kolor ramki w kolumnie:
.column-left-inner {border-color: #000000;}        

Rodzaj czcionki tekstu w kolumnie:
.column-left-inner {font-family: Georgia;}

Wielkość czcionki w tekście:
.column-left-inner {font-size: 15px;}

Wyśrodkowanie tekstu:
.column-left-inner {text-align: center;}

Wyrównanie tekstu do lewej:
.column-left-inner {text-align: left;}

Wyrównanie tekstu do prawej:
.column-left-inner {text-align: right;}

Wyrównanie tekstu od lewej do prawej, tak zwane wyjustowanie:
.column-left-inner {text-align: justify;}

Zaokrąglone rogi:
.column-left-inner {border-radius: 90px 90px 40px 40px;}

Przesunięcie:
.column-left-inner {margin: 90px 300px 0px -400px;}

WSZYSTKIE PARAMETRY MOŻNA ZMIENIĆ!
SPRAWDZAJ NA PODGLĄDZIE, CZY ZACHODZĄ JAKIEŚ ZMIANY. JEŚLI NIE, SPRAWDŹ CZY DOKŁADNIE SKOPIOWAŁEŚ I WKLEIŁEŚ KOD!

KOLUMNA BOCZNA PRAWA
Kolor tła kolumny:
.column-right-inner {background-color: #4c3e6c;}

Przezroczystość tła:
.column-right-inner {opacity: 0.6;}

Marginesy:
.column-right-inner {padding: 15px ;}

Cienie tekstu ramek:
.column-right-inner {text-shadow: 0px 0px 3px #000000}

Cienie ramki kolumny:
.column-right-inner {box-shadow: 0px 0px 3px #000000}

Ramki kolumny:
a)    Linia ciągła:
.column-right-inner {border-style: solid;}
b)   Linia podwójna:
.column-right-inner {border-style: double;}

c)    Linia kreskowana:
.column-right-inner {border-style: dashed;}

d)    Linia kropkowana:
.column-right-inner {border-style: dotted;}

Grubość ramki:
.column-right-inner {border-width: 2px;}

Kolor tekstu i ramki w kolumnie:
.column-right-inner {color: #000000;}

Kolor ramki w kolumnie:
.column-right-inner {border-color: #000000;}     

Rodzaj czcionki tekstu w kolumnie:
.column-right-inner {font-family: Georgia;}

Wielkość czcionki w tekście:
.column-right-inner {font-size: 15px;}

Wyśrodkowanie tekstu:
.column-right-inner {text-align: center;}

Wyrównanie tekstu do lewej:
.column-right-inner {text-align: left;}

Wyrównanie tekstu do prawej:
.column-right-inner {text-align: right;}

Wyrównanie tekstu od lewej do prawej, tak zwane wyjustowanie:
.column-right-inner {text-align: justify;}

Zaokrąglone rogi:
.column-right-inner {border-radius: 90px 90px 40px 40px;}

Przesunięcie:
.column-right-inner {margin: 90px 300px 0px -400px;}

WSZYSTKIE PARAMETRY MOŻNA ZMIENIĆ!
SPRAWDZAJ NA PODGLĄDZIE, CZY ZACHODZĄ JAKIEŚ ZMIANY. JEŚLI NIE, SPRAWDŹ CZY DOKŁADNIE SKOPIOWAŁEŚ I WKLEIŁEŚ KOD!

KOMENTARZE

Kolor tła:
.comment p {background-color: #afa4b2;}

Obrazek w tle:
.comment p {background-image: url(adres do obrazka);}

Przezroczystość tła:
.comment p {opacity: 0.6;}

Marginesy:
.comment p {padding: 20px;}

Cień tekstu:
.comment p {text-shadow: 0px 0px 3px #000000}

Cień ramki komentarzy:
.comment p {box-shadow: 2px 2px 5px;}

Ramki komentarzy:
a)    Linia ciągła:
.comment p {border-style: solid;}

b) Linia podwójna:
.comment p {border-style: double;}

c) Linia kreskowana:
.comment p {border-style: dashed;}

d) Linia kropkowana:
.comment p {border-style: dotted;}

Grubość ramki:
.comment p {border-width: 2px;}

Kolor tekstu i ramki w komentarzach:
.comment p {color: #000000;}

Kolor ramki:
.comment p {border-color: #000000;}

Zaokrąglone rogi:
.comment p {border-radius: 90px 90px 40px 40px;}

WSZYSTKIE PARAMETRY MOŻNA ZMIENIĆ!
SPRAWDZAJ NA PODGLĄDZIE, CZY ZACHODZĄ JAKIEŚ ZMIANY. JEŚLI NIE, SPRAWDŹ CZY DOKŁADNIE SKOPIOWAŁEŚ I WKLEIŁEŚ KOD!

AWATARY
Cień ramki:
.avatar-image-container {box-shadow: 2px 2px 5px;}

Ramki:
a)   Linia ciągła:
.avatar-image-container {border-style: solid;}

b)  Linia podwójna:
.avatar-image-container {border-style: double;}

c)   Linia kreskowana:
.avatar-image-container {border-style: dashed;}

d)  Linia kropkowana:
.avatar-image-container {border-style: dotted;}

Grubość ramki:
.avatar-image-container {border-width: 2px;}

Kolor ramki:
.avatar-image-container {border-color: #000000;}

Zaokrąglone rogi:
.avatar-image-container {border-radius: 90px 90px 40px 40px;}

WSZYSTKIE PARAMETRY MOŻNA ZMIENIĆ!
SPRAWDZAJ NA PODGLĄDZIE, CZY ZACHODZĄ JAKIEŚ ZMIANY. JEŚLI NIE, SPRAWDŹ CZY DOKŁADNIE SKOPIOWAŁEŚ I WKLEIŁEŚ KOD!

KARTY/STRONY
W ODDZIELNYCH KARTACH:

Kolor tła:
.tabs-inner .widget li a {background-color: #afa4b2;}

Obrazek w tle:
.tabs-inner .widget li a {background-image: url(adres do obrazka);}

Przezroczystość tła:
.tabs-inner .widget li a {opacity: 0.6;}

Marginesy:
.tabs-inner .widget li a {margin: 10px;}

Cień tekstu:
.tabs-inner .widget li a {text-shadow: 0px 0px 3px #000000}

Cień ramki stron:
.tabs-inner .widget li a {box-shadow: 2px 2px 5px;}

Ramki:
a)    Linia ciągła:
.tabs-inner .widget li a {border-style: solid;}

b)   Linia podwójna:
.tabs-inner .widget li a {border-style: double;}

c)    Linia kreskowana:
.tabs-inner .widget li a {border-style: dashed;}

d)    Linia kropkowana:
.tabs-inner .widget li a {border-style: dotted;}

Grubość ramki:
.tabs-inner .widget li a {border-width: 2px;}

Kolor ramki:
.tabs-inner .widget li a {border-color: #000000;}

Zaokrąglone rogi:
.tabs-inner .widget li a {border-radius: 90px 90px 40px 40px;}

Przesunięcie:
.tabs-outer {margin: 0px -140px 0px 486px;}

W JEDNYM PASKU:
Kolor tła:
.tabs-outer {background-color: #afa4b2;}

Obrazek w tle:
.tabs-outer {background-image: url(adres do obrazka);}

Przezroczystość tła:
.tabs-outer {opacity: 0.6;}

Marginesy:
.tabs-outer {margin: 10px;}

Cień tekstu:
.tabs-outer {text-shadow: 0px 0px 3px #000000}

Cień ramki kart:
.tabs-outer {box-shadow: 2px 2px 5px;}

Ramki kart:
a)   Linia ciągła:
.tabs-outer {border-style: solid;}

b)  Linia podwójna:
.tabs-outer {border-style: double;}

c)   Linia kreskowana:
.tabs-outer {border-style: dashed;}

d)  Linia kropkowana:
.tabs-outer {border-style: dotted;}

Grubość ramki:
.tabs-outer {border-width: 2px;}

Kolor ramki:
.tabs-outer {border-color: #000000;}

Zaokrąglone rogi:
.tabs-outer {border-radius: 90px 90px 40px 40px;}

Przesunięcie:
.tabs-outer {margin: 0px -140px 0px 486px;}

WSZYSTKIE PARAMETRY MOŻNA ZMIENIĆ!
SPRAWDZAJ NA PODGLĄDZIE, CZY ZACHODZĄ JAKIEŚ ZMIANY. JEŚLI NIE, SPRAWDŹ CZY DOKŁADNIE SKOPIOWAŁEŚ I WKLEIŁEŚ KOD!

Budowa tej strony będzie aktualizowana. Za pomoc oraz przesłanie arkuszy dziękuję ChanLee.

51 komentarzy:

  1. Miałam coś przesłać odnośnie arkuszy css, ale Chan Lee mnie uprzedziła. Cóż, chyba nie mam tu nic do dodania, bo zakładka jest bardzo obszerna. :) ~Larrien

    OdpowiedzUsuń
  2. Bardzo dużo skorzystałam, dziękuję :)

    OdpowiedzUsuń
  3. Bardzo przydatne informacje, dziękuję serdecznie za ich umieszczenie :)

    OdpowiedzUsuń
  4. Dobrze, że są tacy ludzie jak wy bez was nie było by kolorowo:) Trochę tam pomajstrowałam przy tych kodach, thx za zamieszczenie =)

    OdpowiedzUsuń
  5. Bardzo ciekawe... Wykorzystałam już kilka kodów CSS stąd i się nie zawiodłam!
    Ale mam małe pytanko. Czy mógłby mi ktoś podać kod CSS, abym miała np. (obrazek) 111 komentarzy. Chodzi mi, żeby przed napisem ile jest komentarzy był obrazek.
    Jeszcze raz dziękuję za wszystkie te kody i liczę na odpowiedź! ; *

    OdpowiedzUsuń
  6. Bardzo dziękuję za stworzenie tej podstrony :3
    Bardzo mi pomogła ;3
    Dziękuję! :D

    OdpowiedzUsuń
  7. Dzięki za pomoc w ogarnięciu!! Mam tylko jeden problem przy zaokrąglonych rogach. Wpisałam kod: .post {border-radius: 70px 70px 70px 70px;} a zaokrągliły mi się tylko górne rogi... czemu tak się dzieje ?

    OdpowiedzUsuń
    Odpowiedzi
    1. Też tak mam, tak chyba ma być.

      Usuń
    2. czasami nie działa ten selektor. postaraj się wpisać przed .post selektor: .main-inner.

      Usuń
  8. Skorzystałam :D Dzieki :D

    OdpowiedzUsuń
  9. Macie jakiś kod na ustaloną szerokość menu (stron), np. 500 px?

    OdpowiedzUsuń
  10. Mam malutki problem. Ten kod: .column-right-inner {border-radius: 50px 50px 50px 50px;}
    nie chce zadziałać. Wszystkie inne działają prawidłowo oprócz tego. Czy któraś z was wie może jakie mogą być tego przyczyny? :c

    OdpowiedzUsuń
    Odpowiedzi
    1. - Może w szablonie jest już zastosowany jakiś kod, który zaokrągla rogi. Należy wtedy go odnaleźć i usunąć lub zmienić.

      - Może w kolumnie nie ma tła i kod działa, ale nie ma co zaokrąglać.

      - Spróbuj samym .column-right-inner {border-radius: 50px ; }

      Możliwości jest na prawdę wiele. Trudno jednoznacznie stwierdzić. :)

      Usuń
    2. Wypróbuj .main-inner .column-right-inner {border-radius: 50px 50px 50px 50px;}
      Powinno działać.

      Usuń
    3. Albo .column-right-outer {border-radius: 50px 50px 50px 50px;}

      Usuń
  11. Dzięki za udostępnienie kodów, powoli zaczynam łapać o co w tym chodzi :) Mam pytanko znacie kod na to, żeby lewa i środkowa kolumna nachodziła na nagłówek, ale na różnych wysokościach ?

    OdpowiedzUsuń
    Odpowiedzi
    1. Wpisz sobie .column-center-inner/.column-left-inner {margin-top: -50px;} .
      Jeśli chcesz, aby nachodziły na nagłówek musisz użyć wartości minusowej, oczywiście możesz ją zmienić. :)

      Usuń
  12. Czy macie może jakiś kod CSS na to, by wyśrodkować dopisek pod komentarzem? (w ustawieniach nazywa się to "wiadomość do formularza komentarzy" - żeby było wiadomo o co mi chodzi :P). Chciałam też zapytać jak zrobić obramowanie z tłem wokół nicku osoby piszącej komentarz (tak jak jest u was). I czy da się jakoś przesuwać treści bądź ramki z całym komentarzem? Trochę dużo mam tych pytań... Wybaczcie ^.^
    I normalnie chwała wam za te kody :D Są bardzo pomocne : )

    OdpowiedzUsuń
  13. Mam pytanie !
    Wygląda to mniej-więcej tak, że jeśli post jest w kształcie prostokąta a ja zaokrąglam rogi (90px) to wypełnia mi się szarym kolorem przestrzeń od tego nowego (zaokrąglonego ) posta do tego poprzedniego. Macie jakieś pomysły ? Bo nie za bardzo uśmiecha mi się perspektywa prostokątnego posta z narysowanymi wewnątrz rogami. Błagam pomóżcie !

    OdpowiedzUsuń
    Odpowiedzi
    1. Choć nie nie pracuję na tym blogu, to mogę ci pomóc: wchodzisz w "projekt" potem "dostosuj" klikasz "zaawansowane" i "tło posta" Tam, koło okienka, gdzie masz kolor, jaki jest ustawiony, to jest obok drugie okienko z jakby "kodem" koloru (że tak to określę) Klikasz i wpisujesz "transparent" Miałam podobny problem, więc mam nadzieję, że pomogłam. :)

      Usuń
  14. Mam pytanie. Wszystko działa bez zarzutów, ale mam problem z tłem komentarzy. Robi mi się czarne tylko tam, gdzie coś pisze, a reszta jest biała :( Chciałabym, żeby tego nie było. Jak to zmienić?
    Jakby coś, to mój blog: http://dramione-fremione.blogspot.com/

    OdpowiedzUsuń
  15. pomocne, dzięki ^^

    OdpowiedzUsuń
  16. Suuperr!! Bardzo mi pomogłaś,teraz mój blog wygląda ekstra. Dziękuję!

    OdpowiedzUsuń
  17. Mam pytanie: jak wyśrodkować tekst komentarzy ? Bo jak ktoś mi daje komentarze, to wychodzą one za ramkę... :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Ja ci mogę pomóc: użyj kodu:
      .comment p {padding: 20px;}
      Powinno pomóc :)

      Usuń
  18. Skorzystałam, wielkie dzięki (:
    Mam tylko jeden problem - nie działa mi kod na kolor tła w lewej kolumnie .column-left-inner {background-color: #c5552f;}
    Czy wiecie, co mogę zrobić, by zadziałał? Wszystkie inne kody, również na boczną kolumnę, działają prawidłowo, oprócz tego.

    Z góry dziękuję za odpowiedź C:

    OdpowiedzUsuń
    Odpowiedzi
    1. Z tłami tak jest, że często nie działają. Trzeba czekać ;c

      Usuń
    2. dodaj pierwsze .main-inner .column-right-inner
      powinno zadziałać

      Usuń
  19. Jak ja ci za to dziękuję:) Z pewnością skorzystam, bo wszystko działa bez zarzutu:D

    OdpowiedzUsuń
  20. Bawiłam się czcionką w kodzie HTML. Zrobiłam kopię zapasową bloga (bloga mam na bloggerze), lecz gdy potem weszłam w kody CSS, wszystkie które miałam zniknęły. Przywróciłam kopię zapasową, lecz w dalszym ciągu ich nie widać. Oczywiście formatowanie CSS pozostało, jednak wolałabym widzieć te kody.. POMOCY. Jak sprawić, żebym znów mogła je zobaczyć?

    OdpowiedzUsuń
    Odpowiedzi
    1. niestety, już ich nie zobaczysz. Po wejściu do HTMLa wszystkie arkusze CSS zostają tam automatycznie wgrane i zakodowane. Jedyny sposób to wejść w HTML i skopiować je, choć to już raczej niepotrzebne

      Usuń
    2. Kurczaczki :c szkoda. No ale nic, dziękuję bardzo ;-)

      Usuń
  21. Hej, potrzebuję małej pomocy. Chciałabym zrobić onetowski szablon na blogspocie. No i zrobiłam sobie nagłówek, wszystko ładnie, pięknie tylko mam pewien problem. Jak go wgrać tak żeby wyglądał jak ten tutaj: http://dzudi91.deviantart.com/art/Dramione-389234796
    jest na to jakiś kod, magiczna sztuczka szabloniarek, cokolwiek? ^_^

    OdpowiedzUsuń
    Odpowiedzi
    1. Nie ma żadnej sztuczki na to ;) Nagłówek musi po prostu zawierać ten sam kolor co kolor strony, żeby się pokrywały. A jeżeli chodzi o post, żeby był w ramce wystarczy wpisać zwykły kod na ramki i uzupełnić kolorem:
      .post {
      border-style: solid;
      background: #000;
      }

      Usuń
  22. Mam jeszcze jeden mały problem, z którym nijak nie umiem sobie poradzić. Chodzi mi o strony. Przykładowo w menu mam stronę zatytułowaną "słowniczek" i kiedy w nią wejdę to ramka, w której znajduje się tekst najeżdża mi na nagłówek (ramka z postem jest ustawiona dobrze). Jest na to jakiś kod?

    Podaję link do strony jeśli opisałam mój problem nie jasno ^_^
    http://bushido-droga-wojownika.blogspot.com/p/sowniczek.html

    OdpowiedzUsuń
    Odpowiedzi
    1. musiałaś przedobrzyć w kodach. Szybki sposób na obniżenie, choć nie wiem czy coś to da:
      .column-center-inner {margin: 190px 0px 0px 0px;}

      Usuń
  23. Nic, ale dziękuję. Będę kombinować dalej :)

    OdpowiedzUsuń
  24. Hej! Mam takie pytanie, orientujesz się może jak w 'Archiwum' przy miesiącach można usunąć liczbę postów obok?

    Pozdrawiam.

    OdpowiedzUsuń
  25. Hej mam pytanie chciałabym zmienić u siebie kolor ramki kart mam czarną, ale potrzebuje zmienić na szary tak , aby pasował do reszt czy orientujesz się może jak to ustawić?:)
    Dziękuję z góry za pomoc
    Pozdrawiam
    Sylwetta

    OdpowiedzUsuń
    Odpowiedzi
    1. #PageList1 li a:link {
      background: #484461;
      } Tylko kolor oczywiście taki jak ci pasuje

      Usuń
  26. Hej. Chciałam spytać czy istnieje jakiś, jakikolwiek kod, żebym mogła mieć obrazek w ramce (w ramce, nie w tle posta) posta? :-)
    Mam jeszcze jedno pytanie.. Czy można dodać obrazek, bardzo wąski u samej góry bloga, tam, gdzie jest zazwyczaj pasek nawigacyjny? Chodzi mi mniej-więcej o coś takiego: http://mcoradini.tumblr.com/ (jest u samej góry taki niebieski).. Byłabym bardzo wdzięczna za pomoc ;-)

    OdpowiedzUsuń
  27. Jeśli chodzi o obrazek w tle kart to wystarczy na to kod następujący:
    .tabs-outer {background-image: url(adres do obrazka);}, ewentualnie gdyby kod nie zadziałał to jest jeszcze drugi selektor: .tabs-inner{background-image: url(adres do obrazka);}. Takie menu jak to na tumblrze lepiej robić w szablonie domyślnym rewelacja (taki czarny).

    Co do pierwszego. Chodzi ci o to, że każdy obrazek w poście będzie w ramce? Jest na to sposób:

    .post-body img {border-style: solid; border-width: 2px; border-color: #fff; padding: 2px;}

    Parametry możesz zmieniać. :)
    Jeśli chodzi o coś całkiem odmiennego, to prosiłabym o kontakt GG lub e-mail. ;]

    OdpowiedzUsuń
  28. jak przyblizyc do siebie posty ? I Naglowek do posta ? Z gory dziekuje !

    OdpowiedzUsuń
  29. Hej :)
    Mam pytanie :) Czy jest kod na obrazek w tle w kolumnach? :)

    OdpowiedzUsuń
  30. Hej, mam pytanie, jaki jest kod na ustawienie koloru w tle?

    OdpowiedzUsuń
  31. Mam takie pytanie... Bo od pewnego czasu muszę zapisywać szablony / nagłówki w "png" ponieważ, w "jpg" zaczęło mi zmieniać kolory ( rogi były ciemniejsze). Teraz muszę ustawić szablon jako tło, a wyskakuje, że jest za duży rozmiar pliku. Próbowałam też to ustawić za pomocą kodów,ale nie działało. Jest jakiś inny sposób, zeby ustawić ten nagłówek jako tło ?

    OdpowiedzUsuń
  32. Hej, czy jest może taki kod, żeby w stronach po najechaniu na tekst litery się rozsuwały?

    OdpowiedzUsuń
  33. THNX! świetne!

    OdpowiedzUsuń