Proste komendy css

Wyśrodkowanie nagłówka

.header-inner .widget div, .header-inner img {
margin-left:auto;
margin-right:auto;
} 

Wyśrodkowanie tytułu posta

h3.post-title, .comments h4 {text-align: center;}

Wyśrodkowanie daty posta

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

Wyśrodkowanie paska stron

#PageList1 ul {
text-align: center;
}
#PageList1 ul li {
float: none;
display: inline;
}

Wyśrodkowanie gadżetów w prawej kolumnie

.column-right-inner {text-align: center; } 

Wyśrodkowanie gadżetów w środkowej kolumnie

 .column-center-inner {text-align: center; }

Wyśrodkowanie gadżetów w lewej kolumnie

.column-left-inner {text-align: center; }

Cienie w prawej kolumnie

.column-right-inner {text-shadow: 1px 1px 5px}

Cienie w lewej kolumnie

.column-left-inner {text-shadow: 1px 1px 5px}

Cienie pod tytułem posta

h3.post-title, .comments {text-shadow: 1px 1px 5px}

css - posty

Tła:

a) kolor:

.post {background-color: #5a5555;}

b) obrazek w tle:

.post {background-image: url(adres do obrazka);}

Przezroczystość:

.post {opacity: 0.7;}

Cienie:

a) tekstu:

.post {text-shadow: 2px 2px 5px #5a5555 }

b) ramki:

.post {box-shadow:0px 0px 2px black}

Zaokrąglone rogi:

.post {border-radius: 90px 90px 5px 5px;}

Marginesy

Tła:

a) kolor:

.post {background-color: #5a5555;}

b) obrazek w tle:

.post {background-image: url(adres do obrazka);}

Przezroczystość:

.post {opacity: 0.7;}

Cienie:

a) tekstu:

.post {text-shadow: 2px 2px 5px #5a5555 }

b) ramki:

.post {box-shadow:0px 0px 2px black}

Zaokrąglone rogi:

.post {border-radius: 90px 90px 5px 5px;}

Marginesy

.post {padding: 20px;}

Obramowanie:

a) linia ciągła:

.post {border-style: solid;}

b) linia kreskowa:

.post {border-style: dashed;}

c) linia kropkowana:

.post {border-style: dotted;}

d) linia podwójna:

.post {border-style: double;}

Grubość obramowania:

a) cienkie:

.post {border-width: thin;}

b) średnie:

.post {border-width: medium;}

c) grube:

.post {border-width: thick;}

z By Elfaba

css - komentarze

Tła:

a) kolor:

.comment p {background-color: #5a5555;}

b) obrazek w tle:

.comment p {background-image: url(http://s6.ifotos.pl/img/guiguojhj_xxenawe.png);}

Przezroczystość:

.comment p {opacity: 0.7;}

Cienie:

a) tekstu:

.comment p {text-shadow: 2px 2px 5px #5a5555 }

b) ramki:

.comment p{box-shadow:0px 0px 2px black}

Zaokrąglone rogi:

.comment p{border-radius: 90px 90px 5px 5px;}

UWAGA: parametry odpowiadają wszystkim czterem rogom. Można zostawić tylko jeden i będzie się wtedy odnosić do całej ramki.

Marginesy:

.comment p {padding: 20px;}

Obramowanie:

a) linia ciągła:

.comment p {border-style: solid;}

b) linia kreskowa:

.comment p {border-style: dashed;}

c) linia kropkowana:

.comment p {border-style: dotted;}

d) linia podwójna:

.comment p {border-style: double;}

Grubość obramowania:

a) cienkie:

.comment p {border-width: thin;}

b) średnie:

.comment p {border-width: medium;}

c) grube:

.comment p {border-width: thick;}

Awatary

Zaokrąglone rogi:

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

Obramowanie:

a) linia ciągła:

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

b) linia kreskowa:

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

c) linia kropkowana:

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

d) linia podwójna:

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

Grubość obramowania:

a) cienkie:

.avatar-image-container {border-width: thin;}

b) średnie:

.avatar-image-container {border-width: medium;}

c) grube:

.avatar-image-container {border-width: thick;}

Cienie:

.avatar-image-container {box-shadow:0px 0px 2px black}

Z By Elfaba

css - pasek stron

Tła:

a) kolor:

.tabs-outer {background-color: #5a5555;}

b) obrazek w tle:

.tabs-outer {background-image: url(http://s6.ifotos.pl/img/guiguojhj_xxenawe.png);}

Przezroczystość:

.tabs-inner {opacity: 0.7;}

Cienie:

a) tekstu:

.tabs-outer {text-shadow: 2px 2px 5px #5a5555 }

b) ramki:

.tabs-outer{box-shadow:0px 0px 2px black}

Zaokrąglone rogi:

.tabs-outer{border-radius: 90px 90px 5px 5px;}

UWAGA: parametry odpowiadają wszystkim czterem rogom. Można zostawić tylko jeden i będzie się wtedy odnosić do całej ramki.

Marginesy (chodzi o to, aby tekst nie przyklejał się do ramek):

.tabs-outer {padding: 3px;}

Obramowanie:

a) linia ciągła:

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

b) linia kreskowa:

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

c) linia kropkowana:

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

d) linia podwójna:

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

Grubość obramowania:

a) cienkie:

.tabs-outer {border-width: thin;}

b) średnie:

.tabs-outer {border-width: medium;}

c) grube:

.tabs-outer {border-width: thick;}

Przesunięcie:

.tabs-outer {margin: 10px 30px 100px 44px;}

Odstępy między linkami:

.tabs-outer .widget li a {margin: 4px;} 

Długość menu:

.tabs-outer {width: 640px}

Wybrana karta:

.tabs-outer .widget li.selected a

Podświetlona:

.tabs-outer .widget li a:hover 

Z By Elfaba

css - linki

Odstępy między literkami:

a:hover {letter-spacing: 1mm;}

Podkreślenia:
a) linia ciągła:

a:hover {border-bottom-style: solid ;}

b) linia kreskowa:

a:hover {border-bottom-style: dashed;}

c) linia kropkowana:

a:hover {border-bottom-style: dotted;}

d) linia podwójna:

a:hover {border-bottom-style: double;}

Zmiana czcionki:

a:hover {font-family: Syncopate;}

Cienie:

a:hover {text-shadow: 2px 2px 5px #5a5555 } 

Z By Elfaba

Jak zrobić szeroką listę?

1. Wchodzimy w PROJEKT >> UKŁAD >> DODAJ GADŻET >> HTML/Java Script

Wklejamy następujący kod:

<form><select style="width: w tym miejscu wpisujemy dowolną liczbę pikseli, która ma być długością naszej szerokiej listy np.300px" onchange="window.open(this.options[this.selectedIndex].value,'_self')"

size=1 name=menu>

<option />- tutaj dajemy nazwę, która będzie wyświetlana. Tak jak u mnie jest np. Poprzednie -

<!-- change the links with your own -->

<option value="adres do pierwszej notki" />wyświetlany tytuł pierwszej notki

<option value="adres do drugiej notki" />wyświetlany tytuł drugiej notki

</select></form>

Kolejne posty można dodawać poprzez kopiowanie frazy i dodawanie jej przed </select></form>

Z By Elfaba

Jak zrobić nieruchome tło?

1. Na sam początek należy zalinkować obrazek np. na tinypic. Poza tym mam nadzieję, że Twój blog nie posiada jeszcze tła (w Szablon > Dostosuj > Tło usuń obraz, a kolory w Zaawansowane > Strona powinny się bez problemu zmieniać). 

2. Wchodzimy w ustawienia naszego bloga, następnie w SZABLON, a potem w DOSTOSUJ. Wybieramy ZAAWANSOWANE, a następnie DODAJ ARKUSZ CSS. 

3. Należy wkleić tam poniższy kod: 

body {background-image: url(ADRES OBRAZKA)!important;
background-attachment: fixed;
background-position: center top;
background-repeat: no-repeat;}

3. Wracamy do naszego obrazka, klikamy prawym przyciskiem myszy i wybieramy KOPIUJ ADRES URL GRAFIKI lub KOPIUJ ADRES OBRAZKA (zależy od przeglądarki). Ważne jest, aby adres prowadził bezpośrednio do obrazu, a nie do strony, na której on jest. Wracamy do kodu i w miejsce ADRES OBRAZKA wklejamy nasz.

4. Zanim zapiszesz szablon, zobacz, czy wszystko poprawnie się wyświetla poniżej. Może Twoje tło wymaga zmiany "no-repeat" na "repeat"? Albo jego pozycja zamiast "center top" powinna być "left top"? 

5. Gdy wszystko jest ok, zastosuj do bloga i gotowe!

Jak zrobić by zostały powiększone awatary komentatorów?

Kliknij tutaj lub obrazek powyżej. ;)

Jak zrobić okrągłe rogi zdjęć w poście?

Przed:

Po:

1. Wchodzimy kolejno w PROJEKT --> UKŁAD --> PROJEKTANT SZABLONÓW --> DODAJ ARKUSZ CSS.

2. Wklejamy poniższy kod:

.post-body img {
background: none;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius: 45px;
border: 0px;
shadow: none;
}

3. Wybieramy opcję zastosuj do bloga.

4. Gotowe! Oczywiście możemy zmieniać parametry zaznaczone kolorem zielonym według własnego gustu. Powoduje to zwiększanie bądź zmniejszanie efektu zaokrąglenia.

by Hafija Background