• Wpisów:346
  • Średnio co: 7 dni
  • Ostatni wpis:1 rok temu, 13:44
  • Licznik odwiedzin:461 235 / 2623 dni
Jesteś niezalogowany. Niektóre wpisy dostępne są tylko dla znajomych.
 
Gdzie wklejamy kod:

Aby dokonać zmian na blogu,klikamy kolejno:
USTAWIENIA -> WYGLĄD MINIBLOGA i na dole poniżej
WŁASNE STYLE wpisujemy kod...

Jezeli nie odpowiada nam wielkosc czcionki we wpisach,mozemy ja zmniejszyc lub zwiekszyc...
Odpowiada za to ten kod:

div.message div {
font-size: 27px;
}

Wystarczy w FONT-SIZE wpisac nasz wielkosc,np.

font-size: 12px; lub font-size: 20px; lub wielkosc ktora nam odpowiada...

Mozemy tez sprawic aby nasza czcionka byla pogrubiona,wystarczy do kodu dodac:

font-weight: bold;

Gotowe kody:

1.Zwykla czcionka

div.message div {
font-size: 15px;
}

2.Czcionka pogrubiona

div.message div {
font-size: 15px;
font-weight: bold
}
Dodaj komentarz ›/ Pokaż wszystkie (16) ›
 

 
Zaraz galki oczne wyplyna mi przez ten kod...
Dodaj komentarz ›/ Pokaż wszystkie (3) ›
 

 
Gdzie wklejamy kod:

Aby dokonać zmian na blogu,klikamy kolejno:
USTAWIENIA -> WYGLĄD MINIBLOGA i na dole poniżej
WŁASNE STYLE wpisujemy kod...

W ostatniej lekcji zmienilismy tlo naszych wpisow oraz czcionke...
Jednak jak kazdy zauwazyl,we wpisach na gorze i na dole-pojawily sie cienkie jasne paski-sa to radiusy...

Niektorzy je pozostawiaja a inni chca sie ich pozbyc-wiec im w tym troche pomoge...

Za Radiusy odpowiedzialny jest ten oto kod:

.message-even .native .radius-entry-bottom {
background: red
}
.message-even .native .radius-entry-top {
background: red
}
.message-odd .native .radius-entry-bottom {
background: red
}
.message-odd .native .radius-entry-top {
background: red
}

Jak widzicie tym razem mamy doczynienia z poczwornym kodem...
Dwie czesci odpowiadaja za gore i dol wpisow parzystych a kolejne-nieparzystych...

Jak sie ich pozbyc...

1.Jezeli tlo naszych wpisow mamy w kolorze,wystarczy ze w tym kodzie w BACKGROUND wpiszemy ten sam kolor jak nasze tlo...

2.Jezeli tlo naszych wpisow jest graficzne w BACKGROUND wpisujemy taki sam adres naszego obrazka...

3.Jezeli tlo naszych wpisow jest przezroczyste w BACKGROUND wpisujemy TRANSPARENT...

Gotowe kody:

1.Kolorowy radius

.message-even .native .radius-entry-bottom {
background: red
}
.message-even .native .radius-entry-top {
background: red
}
.message-odd .native .radius-entry-bottom {
background: red
}
.message-odd .native .radius-entry-top {
background: red
}

2.Radius graficzny

.message-even .native .radius-entry-bottom {
background: url("http://jakisserwer.pl/naszplik.jpg";
}
.message-even .native .radius-entry-top {
background: url("http://jakisserwer.pl/naszplik.jpg";
}
.message-odd .native .radius-entry-bottom {
background: url("http://jakisserwer.pl/naszplik.jpg";
}
.message-odd .native .radius-entry-top {
background: url("http://jakisserwer.pl/naszplik.jpg";
}

UWAGA...!!!
Zaraz za url(" a przed jakisserwer.pl wpisz koniecznie http://

3.Radius przezroczysty

.message-even .native .radius-entry-bottom {
background: transparent
}
.message-even .native .radius-entry-top {
background: transparent
}
.message-odd .native .radius-entry-bottom {
background: transparent
}
.message-odd .native .radius-entry-top {
background: transparent
}
  • awatar Vlovers Lena:-): Jak wpisalam ten kod to nicc mi sie nie zmienilo xd:-)
  • awatar Gość: Co to radiusy? xd
  • awatar Gość: @Testowo*: Tak o to własnie chodzi...
Dodaj komentarz ›/ Pokaż wszystkie (7) ›
 

 
Gdzie wklejamy kod:

Aby dokonać zmian na blogu,klikamy kolejno:
USTAWIENIA -> WYGLĄD MINIBLOGA i na dole poniżej
WŁASNE STYLE wpisujemy kod...

Przed chwila pokazalem jak zmienic tlo wpisow,teraz pokaze jak zmienic czcionke...

Skorzystamy z tego samego kodu co poprzednio a wiec:

.message-odd div.entry, .even {
background: green
}
.message-even div.entry, .odd {
background: green
}

Zeby zmienic czcionke we wpisach,wystarczy dopisac kilka linijek kodu,np.

font-family: arial; -okresla kroj czcionki,mozemy wstawic georgia,tahoma czy jaka tam chcemy...

font-style: italic; -dzieki temu nasza czcionka bedzie pochylona...

color: red; -okresla kolor naszej czcionki,zamiast RED mozna wstawic dowolny kolor...

Gotowy kod do wklejenia:

.message-odd div.entry, .even {
background: green;
font-family: arial;
font-style: italic;
color: red;
}
.message-even div.entry, .odd {
background: green;
font-family: arial;
font-style: italic;
color: red;
}

Jak juz wczesniej pisalem-jeden kod odpowiada za wpisy parzyste a drugi za nieparzyste...
Dzieki temu mozemy np. W jednych wpisach ustawic jeden kolor czcionki a wdrugich inny...

To samo dotyczy tla z poprzedniej lekcji...

UWAGA...!!!

Jezeli masz juz wpisany ten kod z poprzedniej lekcji,nie wstawiaj go po raz drugi...
Albo do tamtego kodu dopisz podane dodatki,albo wykasuj tamten kod i wstaw na nowo...
Dodaj komentarz ›/ Pokaż wszystkie (66) ›
 

 
Gdzie wklejamy kod:

Aby dokonać zmian na blogu,klikamy kolejno:
USTAWIENIA -> WYGLĄD MINIBLOGA i na dole poniżej
WŁASNE STYLE wpisujemy kod...

Teraz zajmiemy sie zmiana tla wpisow...

Tu bedziemy mieli doczynienia z podwojnym kodem-jeden odpowiedzialny za wpisy parzyste,drugi za nieparzyste...

Kod wyglada tak:

.message-odd div.entry, .even {
background: url("http://klikaj.wen.ru/waz.jpg" repeat-x scroll 0 0 green
}
.message-even div.entry, .odd {
background: url("http://klikaj.wen.ru/waz.jpg" repeat-x scroll 0 0 green
}

Tlo mozemy zmienic na trzy sposoby:

1.Ustawic jako tlo grafike,
2.Ustawic dowolny kolor tla,
3.Ustawic tlo przezroczyste...

1.Aby ustawic tlo graficzne-musimy miec wlasny obrazek,wrzucic na jakis darmowy serwer i w BACKGROUND wstawic do niego adres,np.

background: url("http://jakisserwer.pl/naszplik.gif";

PAMIETAJ...!!!
Zaraz za url(" a przed jakisserwer.pl musisz wpisac http://

2.Aby wstawic kolor tla w BACKGROUND wpisujemy wybrany przez nas kolor,np.

background: red; lub background: green; lub jaki sobie wybierzemy...

Link do palety kolorow-macie podany po prawej stronie,w moich adresach www...

3.Aby ustawic przezroczyste tlo w BACKGROUND wpisujemy TRANSPARENT:

background: transparent;

Gotowe kody do wklejenia:

1.Tlo graficzne

.message-odd div.entry, .even {
background: url("http://klikaj.wen.ru/waz.jpg" repeat-x scroll 0 0 green
}
.message-even div.entry, .odd {
background: url("http://klikaj.wen.ru/waz.jpg" repeat-x scroll 0 0 green
}

2.Tlo z kolorem

.message-odd div.entry, .even {
background: #000000
}
.message-even div.entry, .odd {
background: #000000
}

3.Tlo przezroczyste

.message-odd div.entry, .even {
background: transparent;
}
.message-even div.entry, .odd {
background: transparent;
}
  • awatar Fotomaniaczka<3: SWITNY BLOG <3
  • awatar beaa2001: mam takie pytanie jak...jak chcę wkleić nowy kod to te poprzednie mam usunąć czy jak? bo jak chcę wkleić nowe to nic się nie zmienia
  • awatar Diario de Violetta: Ja wkleiłam ten kod z grafiką i połowa jednego wpisu była tak jak chciałam, a druga zielona. Jak to naprawić?
Dodaj komentarz ›/ Pokaż wszystkie (53) ›
 

 
Gdzie wklejamy kod:

Aby dokonać zmian na blogu,klikamy kolejno:
USTAWIENIA -> WYGLĄD MINIBLOGA i na dole poniżej
WŁASNE STYLE wpisujemy kod...

W jednej z poprzednich lekcji napisalem,jak zmienic tlo wpisow,czyli to-w ktorym kazdy z nas dodaje wpis na swoj blog...

Teraz pokaze jak zmienic tlo bloku wokol pola wpisu...

Za to tlo odpowiada kod:

div#news, div#news_edit {
background: url("http://klikaj.wen.ru/tlo3.jpg" repeat-x scroll 0 0 #000000;
display: block;
margin: 0;
overflow: hidden;
padding: 0 0 0 10px;
width: 529px
}

1.W tym przykladzie jest pokazane,jak wstawic tlo graficzne...
Wystarczy teraz przygotowac wlasny plik,wyslac go na darmowy serwer i w BACKGROUND wstawic adres do Waszego obrazka,np.

background: url("http://jakisserwer.pl/naszobrazek.jpg";

PAMIETAJ...!!!
Zawsze za url(" a przed jakisserwer.pl musisz wpisac http://

2.Jezeli jednak nie chcemy tla graficznego, wystarczy w BACKGROUND wykasowac adres i wstawic wlasny kolor...Np:

background: red; lub background: #ffffff; lub jaki sobie wybierzecie...

3.Gdybysmy jednak chcieli uzyskac tlo przezroczyste,w BACKGROUND zamiast koloru badz adresu do pliku-wpisujemy TRANSPARENT,czyli:

background: transparent;

Teraz podam Wam gotowe kody do wklejenia:

1.Tlo graficzne

div#news, div#news_edit {
background: url("http://klikaj.wen.ru/tlo3.jpg" repeat-x scroll 0 0 #000000;
display: block;
margin: 0;
overflow: hidden;
padding: 0 0 0 10px;
width: 529px
}

2.Tlo z kolorem

div#news, div#news_edit {
background: #000000;
display: block;
margin: 0;
overflow: hidden;
padding: 0 0 0 10px;
width: 529px
}

3.Tlo przezroczyste

div#news, div#news_edit {
background: transparent;
display: block;
margin: 0;
overflow: hidden;
padding: 0 0 0 10px;
width: 529px
}
Dodaj komentarz ›/ Pokaż wszystkie (11) ›
 

 
Gdzie wklejamy kod:

Aby dokonać zmian na blogu,klikamy kolejno:
USTAWIENIA -> WYGLĄD MINIBLOGA i na dole poniżej
WŁASNE STYLE wpisujemy kod...

W poprzedniej lekcji pokazalem jak zmienic tlo bloku wpisow...Teraz pokaze jak zmienic w nim czcionke...

Do tego wykorzystamy ten sam kod,a wiec:

div#news_editor textarea, div#news_edit_editor textarea {
background: green;
border: medium none;
font-size: 16px;
height: 160px;
line-height: 1.2em;
overflow-y: scroll;
top: 0;
width: 520px
}

1.Aby zmienic wielkosc czcionki w FONT-SIZE wpisujemy nasza wielkosc,np.

font-size: 20px; lub font-size: 35px; sami dobierzecie odpowiednia wielkosc...

2.Jezeli oprocz tego chcecie zmienic kolor czcionki,dopiszcie w kodzie:

color: red; lub color: white; lub jaki kolor sobie wybierzecie...

3.Jezeli chcecie miec czcionke pochylona,w kodzie wystarczy dopisac:

font-style: italic;

4.Mozemy tez zmienic rodzaj czcionki,wystarczy do kodu dopisac:

font-family: arial; lub font-family: georgia; lub jaka czcionke chcecie...

Gotowy kod do wklejenia z dodatkami:

div#news_editor textarea, div#news_edit_editor textarea {
background: green;
border: medium none;
font-size: 16px;
color: red;
font-style: italic;
font-family: arial;
height: 160px;
line-height: 1.2em;
overflow-y: scroll;
top: 0;
width: 520px
}

UWAGA...!!!

Jeżeli wkleilaś/eś już w poprzedniej lekcji ten kod-nie wklejaj go po raz drugi...
Albo dopisz dodatki do kodu który już masz,albo skasuj kod i wklej go na nowo...
Dodaj komentarz ›/ Pokaż wszystkie (26) ›
 

 
Gdzie wklejamy kod:

Aby dokonać zmian na blogu,klikamy kolejno:
USTAWIENIA -> WYGLĄD MINIBLOGA i na dole poniżej
WŁASNE STYLE wpisujemy kod...

Teraz zajmiemy sie zmiana wygladu tla bloku wpisow-czyli tego bloku,w ktory wlasnie wpisuje ten tekst...

A wiec prosze wygodnie usiasc a panienki w spodniczkach,niech zaloza nozke na nozke-niech tez cos z tego mam...

Za tlo bloku odpowiada ten oto kod:

div#news_editor textarea, div#news_edit_editor textarea {
background: green;
border: medium none;
font-size: 16px;
height: 160px;
line-height: 1.2em;
overflow-y: scroll;
top: 0;
width: 520px
}

1.Aby zmienic kolor tla w BACKGROUND wpisujemy nasz kolor,np.

background: red; lub background: #555555; lub jakikolwiek inny...

2.Aby zmienic tlo na graficzne musimy najpierw nasz obrazek wrzucic na jakis darmowy serwer a nastepnie w BACKGROUND wpisac jego adres,np.

background: url("http://jakisserwer.pl/naszplik.jpg";

UWAGA...!!!
Pamietaj aby po url(" a przed jakisserwer.pl wpisac http://

1.Gotowy kod z kolorowym tlem:

div#news_editor textarea, div#news_edit_editor textarea {
background: green;
border: medium none;
font-size: 16px;
height: 160px;
line-height: 1.2em;
overflow-y: scroll;
top: 0;
width: 520px
}

2.Gotowy kod z tlem graficznym:

div#news_editor textarea, div#news_edit_editor textarea {
background: url("http://klikaj.wen.ru/waz.jpg" repeat-x scroll 0 0 green;
border: medium none;
font-size: 16px;
height: 160px;
line-height: 1.2em;
overflow-y: scroll;
top: 0;
width: 520px
}


...
  • awatar Daya Coleman: Nie działa...:( Wklejam mojego pliku nazwe do tego b coś tam i błąd albo nie poprawna ścieżka...co ja robię źle?
  • awatar The Ex♥;dd: Jest okkk
  • awatar zakrecona123: background: url("klikaj.wen.ru/waz.jpg") repeat-x scroll 0 0 green
Dodaj komentarz ›/ Pokaż wszystkie (24) ›
 

 
Gdzie wklejamy kod:

Aby dokonać zmian na blogu,klikamy kolejno: USTAWIENIA -> WYGLĄD MINIBLOGA i na dole poniżej WŁASNE STYLE wpisujemy kod...

W gornym bloku nasz nick znajduje sie po lewej stronie u gory-ale wcale tak nie musi byc...

Nasz nick mozemy przesunac na srodek badz w prawo a nawet na dol...

Do tego posluzy nam ten sam kod,ktory uzylismy do zmiany czcionki-a wiec:

div.profil-info h2 span{
color: #fff999;
font-family: gothic;
left: 10px;
position: absolute;
top: 7px;
z-index: -1
}
div.profil-info h2 a{
color: #fff999;
font-family: gothic;
}

Z tego kodu interesuja nas tylko dwie wartosci:

left: 10px; -dzieki temu przesuniemy Nick na srodek lub w prawo...
top: 7px; -dzieki temu przesuniemy Nick na dol...

Jak widzicie w obu przypadkach wystepuje PX czyli 10px i 7px...Co to jest:

Otoz PX to jednostka miary-tak jak centymetry,milimetry itp...Nie bede tu sie zbytnio wglebial ale traktujcie to np. jak milimetry...

Powrocmy do tematu...

Aby przesunac Nick na srodek w LEFT zamiast 10px wpisujemy np.

left: 150px; lub left: 200px; sami sobie ustalicie...

Aby przesunac Nick na dol,zamiast 7px mozna wpisac np.

top: 47px; lub top: 57px; turowniez musicie poeksperymentowac...

Nasz przykladowy kod bedzie wygladal tak:

div.profil-info h2 span{
color: #fff999;
font-family: gothic;
left: 180px;
position: absolute;
top: 47px;
z-index: -1
}
div.profil-info h2 a{
color: #fff999;
font-family: gothic;
}

UWAGA...!!!

Jezeli w poprzedniej lekcji wkleilas/es juz ten kod-NIE WKLEJAJ GO PO RAZ DRUGI...
Zamiast tego-albo wnies poprawki do tamtego kodu,albo tamten kod wykasuj i wstaw na nowo z poprawkami...


...
  • awatar Lubię Violette-Problem? <3.: Super.! Mój blog od razu zrobił się ładniejszy. Dziękuję! :)
  • awatar Kociara444: @Testowo*: Wielkie dzięki, działa.
  • awatar minikurs: @Kociara444: Sprawdź ten kod i napisz czy działa: div.profil-info h2 { font-size: 0; margin-bottom: 0; padding: 0; position: relative; z-index: 0; }
Dodaj komentarz ›/ Pokaż wszystkie (14) ›
 

 
Gdzie wklejamy kod:

Aby dokonać zmian na blogu,klikamy kolejno: USTAWIENIA -> WYGLĄD MINIBLOGA i na dole poniżej WŁASNE STYLE wpisujemy kod...

Czas na zmiane czcionki naszego nicka,za to odpowiedzialny jest ten podwojny kod:

div.profil-info h2 span{
color: #fff999;
font-family: gothic;
left: 10px;
position: absolute;
top: 7px;
z-index: -1
}
div.profil-info h2 a{
color: #fff999;
font-family: gothic;
}

Jedna czesc kodu zmienia kolor calego nicka,druga jest odpowiedzialna za cien...

1.Aby zmienic kolor nicka w COLOR wpisujemy nasz kolor,np.

color: blue; lub color: green; badz jaki kolor tylko chcemy...

2.Aby zmienic rodzaj czcionki w FONT-FAMILY wpisujemy nazwe naszej czcionki,np.

font-family: arial; lub font-family: georgia; badz jaka tam czcionke mamy...

PAMIETAJ...!!!

Zeby czcionka byla wyswietlana,musisz Ty i osoby ktore Cie odwiedzaja-miec ja zainstalowana w komputerze...
W innym przypadku bedzie wyswietlana jako zwykla czcionka...

3.Dodatki...

Dodatkowo mozesz np. Powiekszyc lub zmniejszyc czcionke,podkreslic i pochylic...

Wystarczy do kodu wpisac;

text-decoration: underline; -podkresla tekst,
font-style: italic; -pochyla tekst,
font-size: 30px; -powieksza lub zmniejsza czcionke,mozesz wstawic 15px,100px czy ile chcesz-musisz z wielkoscia poeksperymentowac...

Jezeli chcesz aby cien pozostal w Twoim nicku-musisz te same wartosci wpisac do obu czesci kodu...

Jezeli nie podoba Ci sie Nick z cieniem,mozesz sie go pozbyc wpisujac w kodzie:

div.profil-info h2 a{
color: red;
font-family: gothic;
}

w COLOR zamiast RED po prostu TRANSPARENT

Bedzie to wygladalo tak:

div.profil-info h2 a{
color: transparent;
font-family: gothic;
}

Teraz podam Wam gotowe kody do wklejenia,wystarczy zrobic w nich wlasne przerobki...

1.Podstawowy kod z cieniem:

div.profil-info h2 span{
color: red;
font-family: gothic;
left: 10px;
position: absolute;
top: 7px;
z-index: -1
}
div.profil-info h2 a{
color: #fff999;
font-family: gothic;
}

2.Podstawowy kod bez cienia:

div.profil-info h2 span{
color: red;
font-family: gothic;
left: 10px;
position: absolute;
top: 7px;
z-index: -1
}
div.profil-info h2 a{
color: transparent;
font-family: gothic;
}

3.Kod z dodatkami bez cienia:

div.profil-info h2 span{
color: red;
font-family: gothic;
font-size: 35px;
font-style: italic;
text-decoration: underline;
left: 10px;
position: absolute;
top: 7px;
z-index: -1
}
div.profil-info h2 a{
color: transparent;
font-family: gothic;
}

4.Kod z dodatkami i z cieniem:

div.profil-info h2 span{
color: red;
font-family: gothic;
font-size: 35px;
font-style: italic;
text-decoration: underline;
left: 10px;
position: absolute;
top: 7px;
z-index: -1
}
div.profil-info h2 a{
color: red;
font-family: gothic;
font-size: 35px;
font-style: italic;
text-decoration: underline;
}


...
Dodaj komentarz ›/ Pokaż wszystkie (17) ›
 

 
Gdzie wklejamy kod:

Aby dokonać zmian na blogu,klikamy kolejno: USTAWIENIA -> WYGLĄD MINIBLOGA i na dole poniżej WŁASNE STYLE wpisujemy kod...

Teraz przerobimy tło bloku u góry-czyli tam gdzie pokazuje się kto nas ostatnio odwiedził,ostatnie wpisy itp...

Tlo gornego bloku mozemy przerobic na 3 sposoby:

1.Zrobic tlo graficzne,
2.Zmienic kolor tla,
3.Zrobic tlo przezroczyste...

Za wygląd tego bloku odpowiada ten oto kod:

div.profil-info {
background:url("http://cs.pinger.pl/pinger/login_profil_bg.gif" repeat-x scroll 0 0 #D8F8F7;
}

BACKGROUND -czyli tło...

W tym przypadku jako tło mamy podany adres do obrazka,który tworzy tło graficzne...

1.Jeżeli chcemy wstawić własną grafikę zamiast tej,musimy mieć wybrany przez nas obrazek na komputerze i wrzucić go na jakiś darmowy serwer...

Nastepnie adres naszego obrazka podmieniamy z tym oryginalnym...Czyli zamiast adresu:

background:url("http://cs.pinger.pl/pinger/login_profil_bg.gif" repeat-x scroll 0 0 #D8F8F7;

Wpisujemy nasz,np:

background:url("http://jakisserwer.pl/naszetlo.gif" repeat-x scroll 0 0 #D8F8F7;

PAMIETAJ...!!!
Zaraz za url(" a przed jakisserwer.pl musisz wstawic http://

2.Jeżeli chcemy zmienić tylko kolor tła a nie wstawiać grafikę,zamiast:

background:url("http://cs.pinger.pl/pinger/login_profil_bg.gif" repeat-x scroll 0 0 #D8F8F7;

Wpisujemy,np:

background: black;

W tym przypadku nasze tło ma kolor czarny-BLACK...

Oczywiscie zamiast BLACK mozemy wstawic obojetnie jaki kolor...

3.Zeby zrobic przezroczyste tlo w BACKGROUND wpisujemy TRANSPARENT:

background: transparent;

Teraz podam Wam gotowe kody do wstawienia,wystarczy je skopiować i wprowadzić swoje zmiany...

Kod z grafiką:

div.profil-info {
background:url("http://jakisserwer.pl/naszetlo.gif" repeat-x scroll 0 0 #D8F8F7;
}

Kod z kolorem:

div.profil-info {
background: black;
}

Kod na tlo przezroczyste:

div.profil-info {
background: transparent;
}

Jeżeli ktoś z Was ma grafike którą chciałby jako tło ale nie wie gdzie wstawić,niech napisze do mnie na PW i wyśle je mailem który jest w moim profilu...Umieszczę na serwerze i podam Wam adres...


...
Dodaj komentarz ›/ Pokaż wszystkie (14) ›
 

 
Czesto w zmianie wygladu bloga uzywamy kolorow,dlatego postanowilem troszke o tym napisac...

Otoz w kodzie CSS uzywamy dwoch rodzajow okreslania kolorow:

1.Nazwy angielskie
2.Kod szesnastkowy

1.Nazwy angielskie-czyli w tym przypadku uzywamy angielskich nazw kolorow,np.

background: white; -tlo o bialym kolorze,
background: green; -tlo o kolorze zielonym...

2.Kod szesnastkowy:

Kod szesnastkowy sklada sie z siedmiu znakow...

Pierwszy jest zawsze # czyli chasz,hasz czy krzyzyk...
Zaraz za nim jest szesc cyfr,liter badz cyfr i liter razem,np.

#ffffff -jest to oznaczenie bialego koloru,
#000000 -jest to oznaczenie czarnego koloru(sa to cyfry zero,nie litery o)

Pod adresem ktory podaje nizej,znajduje sie paleta kolorow ktora mozecie uzywac...Jest to paleta kolorow w kodzie szesnastkowym:

- http://www.gurunet.pl/paletakolorow.html

Mozecie rowniez sami poeksperymentowac z kolorami,wystarczy zmienic ich wartosci,np.

#000000 -to jest kolor czarny a wy chcecie np jakis szary,w tej sytuacji zera zamieniacie na jedynki,trojki czy co chcecie,np.

#333333 -to juz jest kolor ciemno szary a nie czrny...

Ale dosc-nie bede juz mieszal...;-)
  • awatar Gość: Mi się wyświetla jakaś dziwna strona ;(
  • awatar Gość: The weblog You have compose is very nicely created and extremely insightful many thanks for wonderful posta?| chaussure foot salle http://maillot-de-gardien-de-foot.greatbyeight.net
  • awatar Gość: I am bookmarking your feeds also It was a very great topic! Just wanna say thank you for the data you have apportioned. Just keep on composing this variety of publish. I will be your correct reader. Many thanks again. bottes mamzelle dixi http://bottes-mamzelle-dixi.3xin0.com
Dodaj komentarz ›/ Pokaż wszystkie (11) ›
 

 
Na razie zakoncze temat zmiany prawego bloku,jeszcze oczywiscie do tego wrocimy...
Sadze ze i tak w sporej wiekszosci juz go przerobilismy...
Dzisiaj zajme sie gornym blokiem a jak czas pozwoli to i blokiem wpisow...
  • awatar KredkaNaBaterie: Super,czekam na górny blok :D
  • awatar Testowo*: Tego po lewej...? A mozesz jasniej...?;-)
  • awatar DalekaRealiom: aj to pokręcone teraz się zastanawiam jak można zrobić, żeby nie było tego białego po lewej stronie tylko taki sam kolor co i kolor tła do notki?
Dodaj komentarz ›/ Pokaż wszystkie (3) ›
 

 
Teraz pokaze jak wstawic obramowanie wokol prawego bloku...
Za to odpowiedzialny jest ten oto kod:

.sidebox{
border: 3px double #555555;
}

Zeby wstawic wlasne obramowanie w BORDER wpisujemy nasze wartosci,np.

border: 2px dotted green; -ten przyklad sprawia iz nasza ramka bedzie grubosci 2px,kropkowana o kolorze zielonym...

Jak juz pisalem w lekcji OBRAMOWANIA,mozemy zmieniac obramowanie na kropkowane,kreskowane,trojwymiarowe itp...

Oprocz tego mozemy wstawic obramowanie tylko lewego boku,badz dowolnych dwoch,trzech lub czterech...

Wiecej o obramowaniach znajdziecie pod tym adresem:

http://testowo.pinger.pl/m/3883816/obramowania
 

 
Zajmiemy sie teraz zmiana tla oraz czcionki komunikatorow GG,TLEN oraz SKYPE...
Za to odpowiedzialny jest ten kod:

p.gg_right {
height: 16px;
font-size: 13px;
text-align: left;
background: #666666 url("http://cs.pinger.pl/pinger/gg.gif" 5px 1px no-repeat
}
p.tlen_right {
height: 16px;
font-size: 13px;
text-align: left;
background: #666666 url("http://cs.pinger.pl/pinger/tlen.gif" 5px 1px no-repeat
}
p.skype_right {
height: 16px;
text-align: left;
font-size: 13px;
background: #666 url("http://cs.pinger.pl/pinger/skype.gif" 5px 1px no-repeat
}

1.Zmieniamy wysokosc okienka...

Aby zmienic wysokosc okienka w HEIGHT wpisujemy nasza wielkosc,np.

height: 12px; lub height: 20px; lub jaka wielkosc chcemy...

2.Zmieniamy wielkosc czcionki...

W tym celu w FONT-SIZE wpisujemy nasz wielkosc,np.

font-size: 10px; lub font-size: 20px; lub jaka wielkosc sobie wybierzemy...

3.Przestawiamy tekst...

Mozemy przestwic tekst na prawo badz na srodek w TEXT-ALIGN wpisujemy:

text-align: center; -nasz tekst przesunie sie na srodek,
text-align: right; -nasz tekst przesunie sie na prawo,
text-align: left; -nasz tekst pozostanie po lewej stronie...

4.Zmieniamy tlo...

Zeby zmienic kolor tla w BACKGROUND zamiast #666666 wpisujemy wlasny kolor,np.

background: red; lub background: #ffffff; lub inny...

Zeby tlo bylo przezroczyste w BACKGROUND wpisujemy TRANSPARENT

background: transparent;

Jak widzicie ten kod tak naprawde sklada sie z trzech kodow-dla GADU GADU,drugi dla TLENU a trzeci dla SKYPE...

Zmieniamy wszystko oczywiscie we wszystkich kodach...
Dodaj komentarz ›/ Pokaż wszystkie (10) ›
 

 
Zmienimy teraz tlo,obramowanie oraz czcionke wyszukiwarek SZUKAJ BLOGOW,SZUKAJ WPISOW PO TAGU,SZUKAJ W TRESCI-ktore znajduja sie na dole prawego bloku...
Za to odpowiedzialny jest ten kod:

input#search-username, input#search-msg, input#search-msg-by-tag {
background: #888888;
border: #222222 solid 1px;
font: 10px gothic;
height: 19px;
margin: 0 0 0 6px;
padding: 2px 0 0 2px;
width: 173px
}

1.Zmieniamy tlo...

-Aby zmienic kolor tla w BACKGROUND wpisujemy wybrany przez nas kolor,np.

background: red; lub background: white; lub background: #fff999;

-Aby zmienic tlo na graficzne w BACKGROUND wstawiamy adres do naszego obrazka,np.

background: url("http://jakisserwer.pl/naszplik.jpg";

PAMIETAJ- zeby za url(" a przed jakisserwer.pl wpisac http://

-Aby zmienic tlo na przezroczyste w BACKGROUND wpisujemy TRANSPARENT:

background: transparent;

2.Zmieniamy obramowanie...

-Aby zmienic obramowanie w BORDER wpisujemy nasz kolor,grubosc oraz rodzaj obramowania...np.

border: red dotted 1px; -jest to obramowanie kropkowane w kolorze czerwonym o grubosci 1px...

O rodzajach obramowan pisalem w poprzedniej lekcji...

3.Zmieniamy czcionke...

-Aby zmienic czcionke,mozemy wpisac kod na dwa sposoby...

Przyklad 1.

color: red; -kolor czcionki,
font-weight: bold; -czcionka pogrubiona,
font-family: arial; -rodzaj czcionki,
font-size: 15px; -wielkosc czcionki,
font-style: italic; -czcionka pochylona,
text-decoration: underline; -podkreslenie tekstu...

Przyklad 2.

font: red bold arial italic 15px;
text-decoration: underline;

W obu przypadkach kody wprowadzaja te same wartosci...

Podstawowy kod gotowy do wklejenia:

input#search-username, input#search-msg, input#search-msg-by-tag {
background: black;
border: red dotted 1px;
font: 10px gothic;
height: 19px;
margin: 0 0 0 6px;
padding: 2px 0 0 2px;
width: 173px
}

Mozemy rowniez zmienic szerokosc i wysokosc pol wpisu...

height:19px; -odpowiada za wysokosc pola wpisu...

width: 173px; -odpowiada za szerokosc pola wpisu...

Wystarczy ze wstawimy nasze wielkosci tych pol i po problemie...
  • awatar aniapol: po zapisaniu próbuję pisać w którejś z wyszukiwarek i litery są czarne a nie białe,bo chcę żeby były białe na czarnym tle
  • awatar Gość: Super !! Bardzo pomagasz !! 812 dni na blogu.. o.O Gratki ! A ile ty masz odwiedzin.. Zazdroszczę Ci :* :* Powodzenia w dalszym pomaganiu.. Mi baaaaardzo pomogłeś/aś <3
  • awatar Sajonara, bejbe.: Albo ja coś źle robię, albo po prostu nie działa .. Byłabym wdzięczna, jeśli byś mi pomógł w inny sposób, jeśli zdecydujesz się, aby mi pomóc napisz wiadomość : P
Dodaj komentarz ›/ Pokaż wszystkie (8) ›
 

 
Zanim przejdziemy do dalszej czesci minikursu,postaram sie Wam objasnic-jak i jakie rodzaje obramowan mozemy wstawic...
Obramowania w pewien sposob moga upiekszyc bloga,dlatego postanowilem sie na tym skupic...

A wiec za obramowanie odpowiada BORDER:

border-top oznacza gorne obramowanie,
border-bottom oznacza dolne obramowanie,
border-right oznacza prawe obramowanie,
border-left oznacza lewe obramowanie...

Oprocz tego rozrozniamy rodzaje obramowan:

none -oznacza brak obramowania,
dashed -oznacza obramowanie kreskowane,
dotted -oznacza obramowanie kropkowane,
solid -oznacza grube obramowanie,
double -oznacza podwojne obramowanie,
groove -oznacza obramowanie trojwymiarowe...

Oczywiscie w nastepnych lekcjach pokaze na przykladach jak zrobic obramowanie,jednak mam nadzieje ze to Wam tylko ulatwi prace z nimi...

Teraz zrobimy przykladowe obramowanie,np na prawym bloku...

Mamy za zadanie zrobic kropkowane obramowanie koloru czerwonego-tylko prawej strony i dolu o grubosci 2px:

.sidebox {
border-right: red 2px dotted;
border-bottom: red 2px dotted;
border-top: none;
border-left: none;
}

Jak widzicie gorne i lewe obramowanie ma wartosc NONE-oznacza to ze tych obramowan nie bedzie widac,jedynie prawe i dolne w kolorze czerwonym i kropkowane...

Wybaczcie jezeli pisze niezbyt zrozumiale ale to u mnie norma...;-)

Napisze Wam jeszcze jeden przyklad a dokladnie-jezeli chcemy zeby obramowanie bylo na okolo bloku,czyli z 4 stron-mozemy to zrobic na dwa sposoby...

Przyklad 1.

.sidebox {
border-top: green 2px dotted;
border-right: green 2px dotted;
border-left: green 2px dotted;
border-bottom: green 2px dotted;
}

Przyklad 2.

.sidebox {
border: green 2px dotted;
}

Jak widzicie drugi przyklad jest o wiele szybszy do wpisania-a daje nam takie same obramowanie jak pierwszy...

W dalszej czesci mini kursu czesto bedziemy do tego powracali...
Dodaj komentarz ›/ Pokaż wszystkie (12) ›
 

 
Teraz zmienimy tlo w prawym bloku...
Tlo mozemy zmienic na trzy sposoby:

1.Zmienic jego kolor...
2.Zamiast koloru wstawic tlo graficzne...
3.Zmienic na tlo przezroczyste...

Do zmiany tla potrzebny jest ten podwojny kod:

#right_content .sidebox-odd {background: black;}
#right, .sidebox, #right-example-
profile, .recomended {background: black;}

Jak widzimy na tym przykladzie,tlo jest czarne:

background: black; -BACKGROUND-czyli TLO...

1.Zmieniamy kolor tla:

Aby zmienic kolor tla,wystarczy w BACKGROUND wpisac nazwe naszego koloru,np.

background: red; lub background: white; lub background: #000fff czy jaki tam chcemy...

2.Aby zmienic tlo na graficzne,musimy najpierw przygotowac jakis obrazek i wrzucic go na jakis darmowy serwer...
Nastepnie musimy skopiowac adres do tego obrazka i wkleic go do kodu tuz za background...Czyli np.

background: url("http://jakisserwer.pl/naszobrazek.jpg"

3.Zrobienie przezroczystego tla,tak naprawde jest bardzo proste...Po prostu za BACKGROUND wpisujemy TRANSPARENT i gotowe...
Wyglada to tak:

background: transparent;

Gotowe kody do wklejenia:

1.Kod na zmiane koloru tla:

#right_content .sidebox-odd {background: black;}
#right, .sidebox, #right-example-
profile, .recomended {background: black;}

2.Kod na tlo przezroczyste:

#right_content .sidebox-odd {background: transparent;}
#right, .sidebox, #right-example-
profile, .recomended {background: transparent;}

3.Kod na tlo graficzne:

#right_content .sidebox-odd {background: url("http://klikaj.wen.ru/waz.jpg";}
#right, .sidebox, #right-example-
profile, .recomended {background: url("http://klikaj.wen.ru/waz.jpg";}

UWAGA...!!!

1.Pamietajcie aby w kodzie na zmiane tla graficznego,wpisac do adresu obrazka http:// czyli tuz za url(" a przed klikaj.wen.ru
Ja mam wpisane http:// ale niestety Pinger tego w przykladach nie wyswietla...
Bez http:// tlo graficzne sie nie wyswietli...

2.Na poczatku pisalem ze jest to podwojny kod,majacy dwa BACKGROUND...
Jezeli chcemy aby nasz prawy blok mial dwa rozne tla,wystarczy np. W jednym kodzie wstawic jeden kolor a w drugim inny,np.

#right_content .sidebox-odd {background: red;}
#right, .sidebox, #right-example-
profile, .recomended {background: green;}

To samo tyczy sie tla graficzego...
Zachecam do eksperymentowania...

 

 
Zmieniamy cyferki ktore widnieja obok osob ktore obserwujemy,przyjaciol itp...

Gotowy kod:

.valid2 {
color: red;
font-weight: bold
}

Wystarczy w COLOR wpisac kolor wpisany przez nas i po problemie np.

color: red; lub color: white; lub color: #fff999; lub tysiace innych kolorow...:-)


...
Dodaj komentarz ›/ Pokaż wszystkie (8) ›
 

 
Teraz zmienimy kolor czcionki O MNIE,MOTTO,STRONY WWW...

Za to jest odpowiedzialny ten oto kod:

h2, .r-about-header {
color: orange;
font-size: 12px;
padding: 0;
font-weight: bold;}

Wystarczy w COLOR wpisac kolor wybrany przez nas np.

color: black; lub color: blue; itp...

Tak jak w poprzednich lekcjach,mozemy rowniez zmienic wielkosc i rodzaj czcionki,podkreslic ja badz pochylic...
Wystarczy postepowac tak jak w ostatnim przykladzie...


...
 

 
Tym razem zmienimy czcionke OSTATNIE WIADOMOSCI,WPISY,MOJE TAGI,OBSERWUJE,SZUKAJ WPISOW itp...

Za to jest odpowiedzialny ten oto kod:

h2.user_info_header {color: green;
margin: 9px 0 2px 6px;
font-weight: bold;
font-size:19px}

Postepujemy tu podobnie jak wczesniej:

1.Aby zmienic kolor czcionki w COLOR wpisujemy wybrany przez nas kolor np.

color: red; lub color: white lub jaki chcemy...

2.Jezeli nie chcemy pogrubionego tekstu w FONT-WEIGHT wpisujemy NORMAL:

font-weight: normal;

3.Aby zmienic wielkosc czcionki w FONT-SIZE zamiast 19px wpisujemy np.

font-size: 15px; lub font-size: 30px

4.Rowniez do kodu mozemy dopisac:

font-family: arial; -jezeli chcemy zmienic rodzaj czcionki,wtedy zamiast ARIAL wpisujemy nazwe naszej czcionki...

text-decoration: underline; -jezeli chcemy aby tekst byl podkreslony...

font-style: italic; -jezeli chcemy aby nasz tekst byl pochylony...

Podstawowy kod gotowy do wklejenia:

h2.user_info_header {
color: green;
margin: 9px 0 2px 6px;
font-weight: bold;
font-size:19px}

Kod z dodatkami gotowy do wklejenia:

h2.user_info_header {
color: green;
margin: 9px 0 2px 6px;
font-weight: bold;
font-family: arial;
font-style: italic;
text-align: underline;
font-size:19px}


...
Dodaj komentarz ›/ Pokaż wszystkie (34) ›
 

 
Aby wkleic gotowy kod css,wchodzimy kolejno klikajac u gory:

USTAWIENIA nastepnie WYGLAD MINIBLOGA i na samym dole mamy okienko-do niego wlasnie wklejamy kod...





Niestety to okienko jest zbyt male aby komfortowo pracowac z kodem,dlatego polecam na poczatek wkleic ten kod:

.user-style-set .textarea-bg {
margin: 0;
padding: 1px;
width: 500px
}
.user-style-set .textarea-bg {
height: 500px
}
textarea#user-style-content {
height: 498px
}
textarea#user-style-content {
width: 498px
}
.user-style-set .textarea-bg {
background: none no-repeat scroll 0 0 transparent;
border: 1px solid #478BD3
}

Dzieki temu nasze okienko bedzie o wiele wieksze...


...
  • awatar Gość: @†Misifis†: Jezu, po prostu usunąć kod -.-
  • awatar minikurs: @Violetta & Wolfblood: ale w ktorym miejscu ma byc ta czcionka-we wpisach,komentarzach...?
  • awatar †Misifis†: Jak usunąć ten kod ?
Dodaj komentarz ›/ Pokaż wszystkie (9) ›
 

 
Teraz zajmiemy sie zmiana czcionki w Info,O mnie,Motto,opisie linkow i Komentarz od...

Za to odpowiedzialny jest ten kod:

.sidebox {
color: red;
font-family:Arial, sans-serif;}

1.Aby zmienic kolor czcionki w COLOR wybieramy nasz kolor np.

color: red; lub color: green; lub color: #ffffff; lub jakikolwiek ktory sami wybierzemy...

2.Aby zmienic rodzaj czcionki w FONT-FAMILY wpisujemy nasza nazwee czcionki np.

font-family: arial; lub font-family: gothic; lub jakakolwiek inna...

3.Mozemy tez zmniejszyc lub powiekszyc nasza czcionke,w takiej sytuacji dopisujemy kod:

font-size: 15px;

Oczywiscie 15px mozemy zastapic np. 20px badz 10px-wszystko zalezy od tego jaka wielkosc czcionki chcemy miec...

Gotowy kod do wklejenia:


.sidebox {
color: red;
font-family:Arial, sans-serif;
font-size: 15px}

UWAGA...!!!

Pamietaj aby czcionka ktora chcesz wstawic,byla zainstalowana w Twoim i osob ktore Cie odwiedzaja komputerze...W innym przypadku czcionka bedzie wyswietlana jako standardowa...


...

 

 
Nasz kursik zaczniemy od zmiany wyglądu Prawego bloku...

Za to odpowiedzialny jest ten oto kod:

h2.login_icon {
background: white;
color: #fff999;
font-size: 24px;
font-weight: bold;
margin-bottom: 3px;
padding: 1px 0 0 20px
}

Teraz dokonujemy zmian...

1.Aby zmienić kolor czcionki w COLOR wstawiamy wybrany przez Nas kolor...

Czyli zamiast:
color: #fff999;

Możemy wstawic np.
color: #334433; lub color: red; lub jaki kolor tylko chcemy...

2.Aby zmienic wielkosc czcionki w FONT-SIZE wstawiamy nasza wielkosc...

Czyli zamiast:
font-size: 24px;

Mozemy wstawic np.

font-size: 15px; lub font-size: 30px; wszystko zalezy od tego jaka wielkosc czcionki chcemy miec...

3.Aby zmienic wyglad czcionki w FONT-WEIGHT mozemy wstawic np.

font-weight: normal; jest to normalna czcionka,
font-weight: bold; jest to pogrubiona czcionka...

4.Jezeli jeszcze chcielibysmy aby nasza czcionka byla pochylona,wpisujemy dodatkowo kod:

font-style: italic;

5.Rowniez mozemy sprawic aby tekst byl podkreslony,wtedy dodatkowo wpisujemy kod:

text-decoration: underline;

Na koniec tło-które również możemy zmienić w tym kodzie,aby to zrobić- w BACKGROUND wystarczy wpisać kolor który sobie wybierzemy,np:

background: red; lub
background: green;

Podstawowy kod gotowy do wklejenia wyglada tak:

h2.login_icon {
background: white;
color: #fff999;
font-size: 24px;
font-weight: bold;
margin-bottom: 3px;
padding: 1px 0 0 20px
}

Kod z zamieszczonymi tu dodatkami-gotowy do wklejenia,wyglada tak:

h2.login_icon {
background: white;
color: #fff999;
font-size: 24px;
font-weight: bold;
font-style: italic;
text-decoration: underline;
margin-bottom: 3px;
padding: 1px 0 0 20px
}


...
Dodaj komentarz ›/ Pokaż wszystkie (60) ›