22 lipca 2015

Poradnik Designu - Początkowe kody css

Hej!♥ Dzisiaj chciałabym przedstawić Wam podstawowe kody css, które z pewnością przydają się tym, którzy chcą samodzielnie zmienić swojego bloga. Wklejamy je do arkusza css (szablon-dostosuj-zaawansowane-dodaj arkusz css). Przy kopiowaniu nie pomińcie żadnego znaku ani litery.


NAGŁÓWEK:

Wysokość nagłówka:
.header { height:450px;}
Wartość "px" można zmieniać do swoich potrzeb.

Wyśrodkowanie nagłówka:
.header-inner .widget div, .header-inner img {
margin-left:auto;
margin-right:auto;
}

Położenie nagłówka:
.header-inner .widget div, .header-inner img {
margin-left: auto px;
margin-right:auto;
}
Wartość "auto" zmieniamy na wartość liczby px.
 
POSTY:

Wyśrodkowanie tytułu notki:
 h3.post-title, .comments h4 {text-align: center;}
Pozycja tytułu posta:
 h3.post-title {text-align: Pozycja;} 
Cienie w tytule postu:
h3.post-title, .comments {text-shadow: 1px 1px 5px}
Cienie pod tekstem w poście: 
.post {text-shadow: 2px2px 5px #FFFFFF; }
 Zaokrąglone rogi tła pod postem:
.post {border-radius:10px 20px 30px 40px;}

Margines posta:
.post {padding: 50px;}

Styl i grubość ramki wokół posta:
.post {border-style: STYL RAMKI;}
.post {border-width:1px;}
Duże litery w tytule posta: 
h3.post-title {text-transform: uppercase;}   
Usunięcie linków "Starszy post", "Nowszy post".
.blog-pager { display: none !important;}    

Podkreślenie tytułu posta:
 h3.post-title {border-bottom: 1px #000000 solid ;}
1px = Grubość podkreślenia im większa liczba tym większa grubość.
#000000 - Odpowiada za kolor podkreślenia
solid -  rodzaj kreski ( solid- linia ciągła, dotted- kropkowana, dashed- kreskowana)
KOMENTARZE:

Okrągłe awatary komentarzy:

.avatar-image-container {
-moz-border-radius:20px !important;
-webkit-border-radius:20px !important;
-goog-ms-border-radius: 20px !important;
border-radius: 20px !important;
}

Styl i grubość ramki wokół awatara w komentarzu:


.avatar-image-container {border-style: RAMKA;}

.avatar-image-container {border-width: 5px;}


 Margines komentarza:
.comment p {padding:10px;}


Styl i grubość ramki wokół komentarza:
.comment p {border-style: RAMKA;}
.comment p {border-width: 5px;}
GADŻETY:
 Wysokość lewej kolumny:
.column-left-inner {margin-top: -20px}


Wysokość prawej kolumny:
.column-right-inner {margin-top: -20px}

Marginesy w danej kolumnie
column-strona-inner { margin: 25px 50px 75px 100px; } 
             
Ustawienie odległości pomiędzy linijkami w widżetach.
.sidebar .widget { line-height: 5px; }    


Zmniejszenie odległości między paskiem bocznym a paskiem z postami:

Lewa kolumna:
.column-left-inner { margin-left: -12px; }
Prawa kolumna:
.column-right-inner { margin-left: -12px; }
 Wyśrodkowanie daty:
h2.date-header {text-align: center;}

Wyśrodkowanie gadżetów w lewej kolumnie:
 .column-left-inner {text-align: center; }

Wyśrodkowanie gadżetów w prawej kolumnie:
 .column-right-inner {text-align: center; }
KARTY: 

Margines kart (górny, prawy, dolny, lewy)
.tabs-outer {margin: 10px 20px 30px 40px;}       
Rozsunięcie przycisków kart
.tabs-inner .widget li a {margin: 15px;}     
          
Odstępy pomiędzy linkami kart
.tabs-outer .widget li a {margin: 5px;}
Długość belki z kartami
.tabs-outer {width: 450px;}  
         
Wysokość belki z kartami               
 .tabs-outer {top: 20px;}
 Przesunięcie menu z kartami:  
#PageList1 ul { text-indent: 440px; }
#PageList1 ul li { float: none; display: inline; }

Kolor tła kart:

.tabs-outer {background-color:#FFFFFF;}   
Wpisujemy tutaj kolor z tablicy RGB

Wyśrodkowanie górnego menu:
#PageList1 ul {
text-align: center;
}
#PageList1 ul li {
float: none;
display: inline;
}
INNE: 
Usunięcie 'Technologia blogger'
#Attribution1 {display: none;}

Usunięcie paska nawigacyjnego u góry strony:
.navbar {display: none;}

Usunięcie napisów „Starszy post”, „Nowszy post”:
.blog-pager { display: none !important;}
ŹRÓDŁO: DON'T BE NORMAL
TAJEMNICZY OGRÓD 
Myślę, że choć niektórym z was pomogłam:) Jeżeli macie problem z jakimś kodem zapraszam do pisania w komentarzach, na każdy spróbuję pomóc!

38 komentarzy:

  1. Dziękuję, bardzo przydatne *o* ♥
    http://kierunek--szczescie.blogspot.com/2015/07/towards-sun.html

    OdpowiedzUsuń
  2. Dziękuję :) Bardzo przydatne, a ja dopiero zaczynam moją przygodę z blogowaniem :) Mój Blog - klik!

    OdpowiedzUsuń
  3. Ooo super, że zebrałaś to w jednym miejscu. Bardzo przydatne. :)

    www.littlecupofart.pl - blog o modzie,sztuce i kulturze :)

    OdpowiedzUsuń
  4. Przydatne kody :) Fajnie, że je tutaj zgromadziłaś!
    ******************************************************************************************
    MOGŁABYŚ MI POMÓC I POKLIKAĆ W 7 LINKÓW W MOIM OSTATNI POŚCIE? Byłabym bardzo wdzięczna! W zamian za poklikanie mogę polecić Twojego bloga lub go zaobserwować :)

    POZDRAWIAM!
    Mój blog-DREAMSSTATION

    OdpowiedzUsuń
  5. Wielkie dzięki za pomoc na pewno się przyda, dobrze, że są tu tacy ludzie :) http://mylifeismyonlylove.blogspot.com/

    OdpowiedzUsuń
  6. przydatny post!:-)

    jeżeli masz ochotę na wspólną obserwację to zacznij i daj znać u mnie, z chęcią się odwdzięczę! :-)
    www.similarose.blogspot.com/kliknij tutaj/

    OdpowiedzUsuń
  7. Dzięki, przydatne :)

    Całuję i zapraszam na mojego bloga :) :
    www.FASHIONCAROLINNA.com

    OdpowiedzUsuń
  8. skorzystam z tych wskazówek na pewno :)
    Mój blog - klik!

    OdpowiedzUsuń
  9. przydatne :)

    Zapraszam do siebie! :)
    http://xaaleksandra.blogspot.com/

    OdpowiedzUsuń
  10. Kiedyś często eksperymentowałam z tym, bardzo przydatne :)
    .
    http://paulinkq-my-life.blogspot.com

    OdpowiedzUsuń
  11. Bardzo przydatny post! Zaznaczyłam sobie kartę do ulubionych i jak bd eksperymentowała z designem to na pewno skorzystam :)
    Zapraszam

    OdpowiedzUsuń
  12. Do kodów CSS przydaję się program ( nie tylko do tego ) ColorPicker :D
    http://waittimeswithpomau.blogspot.com/

    OdpowiedzUsuń
  13. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  14. Świetny post, śmiało każdy może z niego skorzystać. Dodajemy do zakładek;) !
    Pozdrawiam i zapraszam do siebie:
    http://stylowka4u.blogspot.com/

    OdpowiedzUsuń
  15. Świetny poradnik! U mnie na blogu mam dużo kodów :P
    julia-skorupka.blogspot.com

    OdpowiedzUsuń
  16. Och, być może skorzystam. Zapisuję link do tego posta. Przydatne.
    niecodzienniezwykle.blogspot.com

    OdpowiedzUsuń
  17. Zapisuje sobie w ulubionych, na pewno mi sie przydadzą :)

    claaudiablog.blogspot.com

    OdpowiedzUsuń
  18. Witam, jestem początkująca :)
    Mogłabyś ocenić mojego bloga?
    zapraszam! ;)
    http://blooondyna.blogspot.com/

    OdpowiedzUsuń
  19. Bardzo przydatny post. :)
    KLIK

    OdpowiedzUsuń
  20. Kody CSS są bardzo przydatne, często z nich korzystam :)


    http://jvliett.blogspot.com/2015/07/kombinezon-na-lato-nowa-stylizacja.html Obserwuję ! :D

    OdpowiedzUsuń
  21. Bardzo przydatne są według mnie takie posty :]

    Zapraszam: http://wikis-life.blogspot.com/

    OdpowiedzUsuń
  22. przydatne rzeczy! :)

    http://kamila-mazur.blogspot.com/

    OdpowiedzUsuń
  23. Bardzo fajnie, że prowadzisz tego typu blog. To nie jest bardzo popularne. Wiele osób szuka takich porad w Internecie.
    Podoba mi się! :)

    OdpowiedzUsuń
  24. Bardzo pomocny post :)

    http://belief-hope-and-love.blogspot.com/

    OdpowiedzUsuń
  25. Przydatne. Dzięki.
    U mnie nowy post, zapraszam.

    http://odbicie-lustra.blogspot.com/

    OdpowiedzUsuń
  26. świetne rady dla poczatkujących, ja cos sama staram sie zrobic ze swoim blogiem (ledwo co zalozony), no ale zobaczymy co z tego bedzie :)
    http://zaczytana-oczytana.blogspot.com/

    OdpowiedzUsuń
  27. Bardzo przydatny post
    Buziaki ;*
    crazyy-mee.blogspot.com

    OdpowiedzUsuń
  28. Na takie coś czekałam! Dziękuje! <3

    OdpowiedzUsuń
  29. Przydatne.

    http://patrysjahasmikmero.blogspot.com/

    OdpowiedzUsuń
  30. świetny blog, bardzo ładnie piszesz ;)
    Pozdrawiam
    mogłabyś poklikać w linki i napisać ceny? bardzo mi zależy ! :) WISH LISTA‎

    OdpowiedzUsuń
  31. Bardzo przydatne, zwłaszcza to z komentarzami.
    Poza tym bardzo ładny design bloga, a pozostałe posty piszesz w bardzo przyjemny sposób.
    -> alexy-blog.blogspot.com
    ~Zapraszam do siebie, wpadnij jeśli masz chęć i czas~

    OdpowiedzUsuń
  32. Super post, bardzo przydatny tym bardziej, że wciąż pracuje nad wyglądem swojego bloga
    Pozdrawiam i zapraszam do mnie :)
    w-obiektywiie.blogspot.com

    OdpowiedzUsuń
  33. Przydane porady :)
    Klikniesz w te dwa linki? : KLIK KLIK + Może wspólna obserwacja? Jeśli tak to zacznij i daj znać u mnie.
    http://bruneheureuse.blogspot.com/2015/07/wspopraca-z-soufeel_21.html

    OdpowiedzUsuń
  34. Bardzo przydtne rady ale ja niestety dalej nic nie rozumiem haha

    wpadnij do mnie a bedzie bardzo milutko! Obserwuje i napewno bede wpadac czesciej! :D

    royalbed-blog.blogspot.com

    OdpowiedzUsuń
  35. Gram na pianinie i też się uczę sama grać. :3 W sumie gdyby nie moja mama (zmusiła mnie) i zespół Muse (zmotywował mnie) nie grałabym teraz na nim.
    Wow, fajnie, że książki czytasz, bo w tych czasach mało kto to robi. ;)

    OdpowiedzUsuń
  36. Bardzo pomocny wpis ! Napewno skorzystam dziękuje :)

    OdpowiedzUsuń
  37. No to mi się przyda :D tego posta nie zauważyłem :) ekstra :) moja stylizacja jest beznadziejna więc tak to może odwrócic losy mojego bloga :D powodzenia :) jak zawsze super robota :) http://zakochanymol.blogspot.com/2015/08/skalny-kwiat.html?showComment=1438811045514#c1949112036268619263

    OdpowiedzUsuń
  38. Mega przydatne =) dzięki tobie spróbuje zaraz coś zrobić ^^

    http://wgnadii.blogspot.com

    OdpowiedzUsuń

Have a nice Day Sweety!♥