DBzP #3 - kody CSS i ich zastosowanie

Heii!

Dzisiaj w ramach trzeciego posta z serii 'Design bloga z Paulan' mam dla Was listę kodów CSS oraz mini instrukcję ich 'obsługi'.

Wartości pogrubione można zmieniać i dopasowywać do swojego szablonu.

Poniższa legenda powinna pomóc Wam w tworzeniu wybranego kodu :)

POZYCJA: center- wyśrodkowanie, justify- wyjustowanie, right- do prawej, left- do lewej

STRONA: left- lewa, center- środkowa, right- prawa

URL: adres url do obrazka, który ma się znaleźć w jakimś miejscu

RAMKA: dotted- kropkowana, dashed- przerywana, solid- ciągła, double- podwójna, hidden- niewidoczna

NAGŁÓWEK

  ustalenie wysokości nagłówka

                     .header { height: 300px;}                         

KARTY

    

                       obrazek jako tło kart                         

.tabs-outer {background-image: url(URL);} 

  

                                       rodzaj ramki wokół karty                                        

.tabs-outer {border-style: RAMKA;}       

                                    Grubość ramki wokół karty                                         

.tabs-outer {border-width: 5px;}      

    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;}                                                         

POSTY

Pozycja nagłówka postu

h3.post-title {text-align: POZYCJA;}   

    

Pozycja daty

h2.date-header {text-align: POZYCJA;}

duże litery w tytule posta

h3.post-title {text-transform: uppercase;}  

  Zaokrąglone rogi tła pod postem

 (Wartości odpowiadają kolejnym rogom zgodnie z kierunkiem ruchu wskazówek zegara, zaczynając od prawego górnego)

.post {border-radius: 10px 20px 30px 40px;}

Margines posta

.post {padding: 50px;}  

Styl ramki wokół postów.

.post {border-style: RAMKA;} 

Grubość ramki wokół postów.

.post {border-width: 1px;}      

   

  Suwak w notce.

.post { overflow: scroll; width: 450px; height: 600px; }

Usunięcie linków "Starszy post", "Nowszy post".

.blog-pager { display: none !important;}    

         

Obrazek pod postem (oddzielający posty)

.post {background-image: url(URL);}    

Usunięcie napisu 'Technologia blogger'

#Attribution1 {display: none;}

KOMENTARZE

Margines komentarza

.comment p {padding: 10px;}   

Styl ramki wokół komentarza

.comment p {border-style: RAMKA;}

Okrągłe awatary w komentarzach

 (wszystkie wartości muszą być takie same!)

.avatar-image-container {

-moz-border-radius: 20px !important;

-webkit-border-radius: 20px !important;

-goog-ms-border-radius: 20px !important;

border-radius: 20px !important;

}             

Styl ramki wokół awatara.

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

       

Grubość ramki wokół awatara.

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

KOLUMNY

     Pozycja tekstu w danej kolumnie.

.column-strona-inner {text-align: POZYCJA; }

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; }     

 LINKI

Rozsunięcie się liter linku po najechaniu kursorem.

a:hover { letter-spacing: 3px; } 

Rozsunięcie się wyrazów linku po najechaniu kursorem.

a:hover { word-spacing: 5px; }

Pojawienie się ramki wokół linku po najechaniu kursorem.

a:hover {border-STRONA-style: RAMKA ;}         

Litery linku stają się duże po najechaniu kursorem.

a:hover {font-variant: small-caps;}        

     

Rodzaj ramki która pojawi się wokół linku po najechaniu kursorem

a:hover{outline-style: RAMKA;}   

Kody wzięte z bloga http://www.mypastel-garden.pl/  

A jak je zastosować?
1. Kopiujemy wybrany kod i uzupełniamy go według legendy (jeżeli jest taka potrzeba).
2. Wchodzimy w 'układ', a następnie 'projektant szablonów'.

       

3.Wybieramy opcję 'zaawansowane' i wchodzimy w kody CSS.

4.Na białej karcie wklejamy kod i zapisujemy. Następne kody należy wklejać pod poprzednimi - nie obok.

Uwaga! Niektóre kody nie działają do wszystkich szablonów!

Jest to post bardziej dla początkujących blogerek/blogerów, ale Ci doświadczeni może znajdą jakiś kod, którego dotychczas nie znali, a może im się przyda :)