• Wpisów:347
  • Średnio co: 7 dni
  • Ostatni wpis:1 rok temu, 13:44
  • Licznik odwiedzin:456 798 / 2500 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...

W lekcji pod tym linkiem:

http://testowo.pinger.pl/m/3894774/1-blok-wpisow-zmiana-tla-bloku-wpisow

Pokazałem Wam jak zmienić tło bloku wpisów na graficzne bądz w żądanym kolorze...

Teraz pokaże jak zmienić tło na przezroczyste-za to odpowiada ten podwójny kod:

div#news_editor, div#news_edit_editor {
-moz-border-radius: 4px 4px 4px 4px;
background: red;
border: 1px solid #E4C7D5;
margin: 0 8px 0 0;
width: 521px;
}
div#news_editor textarea, div#news_edit_editor textarea {
background: red;
border: medium none;
font-size: 16px;
height: 160px;
line-height: 1.2em;
overflow-y: scroll;
top: 0;
width: 520px;
}

Żeby zrobić tło przezroczyste,należy w obu kodach w BACKGROUND-zamiast RED wpisać TRANSPARENT:

background: transparent;

Teraz tło powinno być przezroczyste-niestety nie jest,zamiast tego jest białe...

To dlatego iż pod tym tłem jest jeszcze tło całego bloku wokół bloku wpisów-czyli nie tego okienka do którego wpisujemy Nasz tekst,lecz wszystko wokół(na obrazku jest to dokładnie pokazane)...

Jednak i temu zaradzimy jednocześnie zmieniając cały blok na przezroczysty...

Za to odpowiada ten kod:

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

Tak jak poprzednio w BACKGROUND tym razem zamiast WHITE musimy wpisać TRANSPARENT:

background: transparent;

W ten sposób Nasz kod stał się kodem potrójnym...

Gotowy kod do wklejenia:

div#news_editor, div#news_edit_editor {
-moz-border-radius: 4px 4px 4px 4px;
background: transparent;
border: 1px solid #E4C7D5;
margin: 0 8px 0 0;
width: 521px;
}
div#news_editor textarea, div#news_edit_editor textarea {
background: transparent;
border: medium none;
font-size: 16px;
height: 160px;
line-height: 1.2em;
overflow-y: scroll;
top: 0;
width: 520px;
}
div#news, div#news_edit {
background: transparent;
display: block;
margin: 0;
overflow: hidden;
padding: 0 0 0 10px;
width: 529px;
}


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

 
Interesuje Was zamieszczanie w kursie ciekawych teł na bloga...?
  • awatar Gość: No ba!!!!!!!:D:D:D:D:D:D, i to takich które nie będą się powielać, tylko wystąpią jako jeden obraz:) ale wiem że to zależy od wielkości obrazu:)
  • awatar Streenesse †: YES! :P
  • awatar Sensuelle.: Ja chce z laskami :D
Dodaj komentarz ›/ Pokaż wszystkie (6) ›
 

 
Proszę pisać w komentarzach-co byście chciały/chcieli zobaczyć w kolejnych lekcjach...
  • awatar Koniara.pl: Tam gdzie jest "szukaj blogów","Szukaj wpisów po tagu" i "Szukaj w treści" To tam potem jest przycisk "szukaj". Czy da się zmienić go na przezroczysty ? Nie wiem czy już takiej lekcji nie dodałeś ale ja jestem "ślepota" i nic nie potrafię znaleść :D
  • awatar Zakątek Przyjaciół :): chciałąbym się dowiedzieć jak zmienić czcionke nagłówka/loga, tam gdzie piszę imie i nazwisko lub coś innego. pomocy! bardzo mi na tym zalezy :(
  • awatar Lady in Twilight: a dało by się jakoś to tło usunąć...może juz jest w lekcjach,a ja znaleźć nie mogę ri.pinger.pl/pgr35/f52b88da0000a3344d2cac1d/Bez%C2%A0tytu%C5%82u.jpg :)
Dodaj komentarz ›/ Pokaż wszystkie (6) ›
 

 
Chwilowo zawieszam dalszy kurs-muszę zrobić obiecany blog znajomej osobie...
Może to potrwać 1-7dni w zależności od wolnego czasu...
Pózniej wracam do dalszych lekcji...
  • awatar LOSTHIGHWAY: @Testowo*: Kto tak powiedział, bo na pewno to nie byłam ja...:) z resztą podkreślam, ze jestem początkująca...
  • awatar Testowo*: @LostHighway: a podobno wszystko wiesz o css...;-)
  • awatar LOSTHIGHWAY: A ja mam pytanko jak można zrobić tło tak jak zaznaczyłam na zdjęciu: http://img545.imageshack.us/img545/5768/beztytuubst.jpg u ciebie z resztą to jest zrobione... Nie wiem może to gdzieś jest w jakiejś lekcji ale nie mogłam się dopatrzeć...
Dodaj komentarz ›/ Pokaż wszystkie (5) ›
 

 
Czyli kurs w pigułce...


I.Prawy blok...

1.Zmiana koloru i czcionki nazwy bloga:
- http://testowo.pinger.pl/m/3876864/1-prawy-blok-zmiana-koloru-i-czcionki-nazwy-bloga
2.Zmiana koloru części czcionki:
- http://testowo.pinger.pl/m/3877373/2-prawy-blok-zmiana-koloru-czesci-czcionki
3.Zmiana wyglądu czcionki:
- http://testowo.pinger.pl/m/3877897/3-prawy-blok-zmiana-wygladu-czcionki
4.Zmiana koloru czcionki:
- http://testowo.pinger.pl/m/3877990/4-prawy-blok-zmiana-koloru-czcionki
5.Zmiana koloru cyfr:
- http://testowo.pinger.pl/m/3878109/5-prawy-blok-zmiana-koloru-cyfr
6.Zmiana tła:
- http://testowo.pinger.pl/m/3878448/6-prawy-blok-zmiana-tla
7.Tło wyszukiwarek:
- http://testowo.pinger.pl/m/3884239/7-prawy-blok-tlo-wyszukiwarek
8.Zmiana tła i czcionki komunikatorów:
- http://testowo.pinger.pl/m/3885599/8-prawy-blok-zmiana-tla-i-czcionki-komunikatorow
9.Obramowanie bloku:
- http://testowo.pinger.pl/m/3887904/9-prawy-blok-obramowanie-bloku
10.Zmiana wyglądu i koloru czcionki Tagów:
- http://testowo.pinger.pl/m/4609912/10-prawy-blok-zmiana-wygladu-i-koloru-czcionki-tagow
11.Zmiana koloru i wyglądu czcionki daty dodania komentarza:
- http://testowo.pinger.pl/m/4674049/11-prawy-blok-zmiana-koloru-i-wygladu-czcionki-daty-dodania-komentarza:
12.Przestawiamy blok na lewą stronę:
- http://testowo.pinger.pl/m/4676719/12-prawy-blok-przestawiamy-blok-na-lewa-strone

II.Górny blok...

1.Zmieniamy tło:
- http://testowo.pinger.pl/m/3890127/1-gorny-blok-zmieniamy-tlo
2.Zmieniamy czcionkę nicka:
- http://testowo.pinger.pl/m/3890670/2-gorny-blok-zmieniamy-czcionke-nicka
3.Przesuwamy nicka:
- http://testowo.pinger.pl/m/3891000/3-gorny-blok-przesuwamy-nicka

III.Blok wpisów...

1.Zmiana tła bloku wpisów:
- http://testowo.pinger.pl/m/3894774/1-blok-wpisow-zmiana-tla-bloku-wpisow
2.Zmiana czcionki:
- http://testowo.pinger.pl/m/3894784/2-blok-wpisow-zmiana-czcionki
3.Zmiana tła wokół bloku wpisów:
- http://testowo.pinger.pl/m/3897121/3-blok-wpisow-zmiana-tla-wokol-bloku-wpisow
4.Zmiana koloru radiusów:
- http://testowo.pinger.pl/m/3930782/4-blok-wpisow-zmiana-koloru-radiusow
5.Zmiana listy wyboru:
- http://testowo.pinger.pl/m/4034972/4-blok-wpisow-lista-wyboru

IV.Wpisy...

1.Zmiana tła wpisów:
- http://testowo.pinger.pl/m/3897315/1-wpisy-zmiana-tla-wpisow
2.Zmiana czcionki:
- http://testowo.pinger.pl/m/3897488/2-wpisy-zmiana-czcionki
3.Zmieniamy kolor radiusów:
- http://testowo.pinger.pl/m/3898237/3-wpisy-zmieniamy-kolor-radiusow
4.Zmiana wielkości czcionki:
- http://testowo.pinger.pl/m/3904825/4-wpisy-zmiana-wielkosci-czcionki
5.Zmiana tła wokół wpisów:
- http://testowo.pinger.pl/m/3927773/5-wpisy-zmiana-tla-wokol-wpisow
6.Zmiana czcionki i tła Tytułów:
- http://testowo.pinger.pl/m/4035358/6-wpisy-zmiana-czcionki-tytulow
7.Usuwamy dymek:
- http://testowo.pinger.pl/m/4321345/7-wpisy-usuwamy-dymek
8.Zmieniamy kolor i wielkość czcionki LUBIĘ TO:
- http://testowo.pinger.pl/m/4607894/8-wpisy-zmieniamy-kolor-i-wielkosc-czcionki-lubie-to
9.Usuwamy rączkę w LUBIĘ TO:
- http://testowo.pinger.pl/m/4608143/9-wpisy-usuwamy-raczke-w-lubie-to
10.Zmieniamy kolor ukośników:
- http://testowo.pinger.pl/m/4608304/10-wpisy-zmieniamy-kolor-ukosnikow

V.Komentarze...

1.Zmiana tła wokół bloku wpisów komentarzy:
- http://testowo.pinger.pl/m/3929581/1-komentarze-zmiana-tla-wokol-bloku-wpisow-komentarzy
2.Zmiana tła bloku wpisów komentarzy:
- http://testowo.pinger.pl/m/3929603/2-komentarze-zmiana-tla-bloku-wpisow-komentarzy
3.Zmiana tła komentarzy:
- http://testowo.pinger.pl/m/3929632/3-komentarze-zmiana-tla-komentarzy
4.Zmiana czcionki:
- http://testowo.pinger.pl/m/3930007/4-komentarze-zmiana-czcionki
5.Zmieniamy i usuwamy Radiusy:
- http://testowo.pinger.pl/m/4321381/5-komentarze-zmieniamy-i-usuwamy-radiusy
6.Usuwamy dymek:
- http://testowo.pinger.pl/m/4321414/6-komentarze-usuwamy-dymek

VI.Liczniki...

1.Zmiana tła liczników:
- http://testowo.pinger.pl/m/3937446/1-liczniki-zmiana-tla-licznikow
2.Zmieniamy wygląd pionowych kresek:
- http://testowo.pinger.pl/m/3941487/2-liczniki-zmieniamy-wyglad-pionowych-kresek
3.Zmiana koloru tekstu:
- http://testowo.pinger.pl/m/3941499/3-liczniki-zmiana-koloru-tekstu
4.Zmiana koloru cyfr:
- http://testowo.pinger.pl/m/3941541/4-liczniki-zmiana-koloru-cyfr
5.Zmiana koloru cyfr powstania bloga:
- http://testowo.pinger.pl/m/3941563/5-liczniki-zmiana-koloru-cyfr-powstania-bloga

VII.Górne menu:

1.Zmiana tła belek:
- http://testowo.pinger.pl/m/3951741/1-gorne-menu-zmiana-tla-belek
2.Zmiana tła nakładek:
- http://testowo.pinger.pl/m/3951760/2-gorne-menu-zmiana-tla-nakladek
3.Zmiana koloru czcionki:
- http://testowo.pinger.pl/m/3951770/3-gorne-menu-zmiana-koloru-czcionki
4.Zmiana tła Wyloguj się:
- http://testowo.pinger.pl/m/4016413/4-gorne-menu-zmiana-tla-wyloguj-sie
5.Zmiana tła Wpisy znajomych:
- http://testowo.pinger.pl/m/4016449/5-gorne-menu-zmiana-tla-wpisy-znajomych
6.Zmiana nakładek we wpisach znajomych:
- http://testowo.pinger.pl/m/4016481/6-gorne-menu-zmiana-nakladek-we-wpisach-znajomych

VIII.Prywatne wpisy:

1.Usuwamy dymek:
- http://testowo.pinger.pl/m/4321414/6-komentarze-usuwamy-dymek
2.Usuwamy strzałkę:
- http://testowo.pinger.pl/m/4321806/2-prywatne-wpisy-usuwamy-strzalke
3.Usuwamy Radiusy w komentarzach:
- http://testowo.pinger.pl/m/4321823/3-prywatne-wpisy-usuwamy-radiusy-w-komentarzach

IX.Obramowania awatarów:

1.Wstęp:
- http://testowo.pinger.pl/m/4367187/1-obramowania-avatarow-wstep
2.Awatary w prawym bloku:
- http://testowo.pinger.pl/m/4367627/2-obramowania-avatarow-prawy-blok
3.Awatary w komentarzach:
- http://testowo.pinger.pl/m/4368170/3-obramowania-avatarow-komentarze
4.Awatary we wpisach:
- http://testowo.pinger.pl/m/4368533/4-obramowania-avatarow-wpisy
5.Górny Awatar:
- http://testowo.pinger.pl/m/4368565/5-obramowania-avatarow-gorny-avatar

X.Inne...

1.Zmiana loga:
- http://testowo.pinger.pl/m/4016603/1-inne-zmiana-loga

XI.Czcionki...

1.Zmiana koloru czcionki-1:
- http://testowo.pinger.pl/m/4030870/1-czcionki-zmiana-koloru-w-wielu-miejscach
2.Zmiana koloru czcionki-2:
- http://testowo.pinger.pl/m/4031219/2-czcionki-zmiana-koloru
3.Zmiana koloru czcionki-3:
testowo.pinger.pl/m/4031432/3-czcionki-zmiana-koloru
4.Zmiana tła i czcionki klikniętego menu:
- http://testowo.pinger.pl/m/4036408/3-srodkowe-menu-zmiana-tla-i-czcionki-kliknietego-menu

XII.Środkowe menu...

1.Zmiana tła:
- http://testowo.pinger.pl/m/4036347/1-srodkowe-menu-zmiana-tla
2.Zmiana wyglądu i koloru czcionki:
- http://testowo.pinger.pl/m/4036365/2-srodkowe-menu-zmiana-wygladu-i-koloru-czcionki

XIII.Tagi...

1.Kolor czcionki Tagów we wpisach:
- http://testowo.pinger.pl/m/4606316/1-tagi-kolor-czcionki-tagow-we-wpisach
2.Zmiana wyglądu czcionki:
- http://testowo.pinger.pl/m/4606347/2-tagi-zmiana-wygladu-czcionki
3.Zmiana koloru tła Tagów we wpisach:
- http://testowo.pinger.pl/m/4606387/3-tagi-zmiana-koloru-tla-tagow-we-wpisach
4.Zmiana koloru tła pod Tagami:
- http://testowo.pinger.pl/m/4606424/4-tagi-zmiana-koloru-tla-pod-tagami

XIV.Dolne menu stron...

1.Zmiana tła:
- http://testowo.pinger.pl/m/4619482/1-dolne-menu-stron-zmiana-tla
2.Zmiana czcionki cyfr:
- http://testowo.pinger.pl/m/4619814/2-dolne-menu-stron-zmiana-czcionki-cyfr
3.Zmiana koloru cyfr,po najechaniu kursorem...
- http://testowo.pinger.pl/m/4620022/3-dolne-menu-stron-zmiana-koloru-cyfr-po-najechaniu-kursorem
4.Zmiana koloru czcionki STARSZE:
- http://testowo.pinger.pl/m/4672495/4-dolne-menu-stron-zmiana-koloru-czcionki-starsze
5.Zmiana koloru czcionki OGLĄDASZ
- http://testowo.pinger.pl/m/4672540/5-dolne-menu-stron-zmiana-koloru-czcionki-ogladasz
6.Kolor i tło cyfry odwiedzanej strony:
- http://testowo.pinger.pl/m/4672603/6-dolne-menu-stron-kolor-i-tlo-cyfry-odwiedzanej-strony
7.Zmiana ramki wokół cyfr:
- http://testowo.pinger.pl/m/4672662/7-dolne-menu-stron-zmiana-ramki-wokol-cyfr
8.Zmiana koloru trzykropka
- http://testowo.pinger.pl/m/4672841/8-dolne-menu-stron-zmiana-koloru-trzykropka

XV.Lewy blok...

1.Zmieniamy kolor tła:
- http://testowo.pinger.pl/m/4687314/1-lewy-blok-zmieniamy-kolor-tla
2.Zmieniamy kolor dolnego paska:
- http://testowo.pinger.pl/m/4687444/2-lewy-blok-zmieniamy-kolor-dolnego-paska
3.Zmieniamy tło górnego paska:
- http://testowo.pinger.pl/m/4687650/3-lewy-blok-zmieniamy-tlo-gornego-paska
4.Zmieniamy kolor obramowania:
- http://testowo.pinger.pl/m/4688427/4-lewy-blok-zmieniamy-kolor-obramowania
5.Zmieniamy czcionkę NAJNOWSZE ZDJĘCIA:
- http://testowo.pinger.pl/m/4692196/5-lewy-blok-zmieniamy-czcionke-najnowsze-zdjecia
6.Zmieniamy czcionkę WSZYSTKIE:
- http://testowo.pinger.pl/m/4696061/6-lewy-blok-zmieniamy-czcionke-wszystkie
7.Przestawiamy blok na prawą stronę:
- http://testowo.pinger.pl/m/4697773/7-lewy-blok-przestawiamy-blok-na-prawa-strone
8.Ramki wokół zdjęć:
- http://testowo.pinger.pl/m/4698695/8-lewy-blok-ramki-wokol-zdjec

Pomoce:

1.Gdzie wstawiamy kod css:
- http://http://testowo.pinger.pl/m/3877692/1-pomoce-gdzie-wstawiamy-kod-css
2.Obramowania:
- http://testowo.pinger.pl/m/3883816/2-pomoce-obramowania
3.Kolory:
-http://testowo.pinger.pl/m/3889876/3-pomoce-kolory
4.Objaśnienia:
- http://testowo.pinger.pl/m/4319591/objasnienia
5.Zrób sobie Logo:
- http://testowo.pinger.pl/m/4380024/pomoce

*.Skrypty:

1.Padający śnieg:
- http://testowo.pinger.pl/m/4495453/1-skrypty-padajacy-snieg
2.Wstawiamy odtwarzacz na bloga:
- http://testowo.pinger.pl/m/4610610/2-skrypty-wstawiamy-odtwarzacz-na-bloga
3.Odtwarzacz na blogu-ustawienia:
- http://testowo.pinger.pl/m/4613929/3-skrypty-odtwarzacz-na-blogu-ustawienie

...
  • awatar Gość: Dzięki Tobie to jest nawet proste, bo piszesz łatwo zrozumianym i przystępnym jezykiem a ni to co na stronach z takimi kursami... Mam nadzieję, że jakoś dam radę z zrobić sobie fajnego bloga :D
  • awatar Testowo*: @Ciuchożerka: Jak widać udało się...:-)
  • awatar Ciuchozerka: A już myślałam, że w życiu tego nie zrobię :)
Dodaj komentarz ›/ Pokaż wszystkie (5) ›
 

 
Dzień dzisiejszy poświęcam na dodanie screenów do pozostałych lekcji...
Gdybyście mieli jakieś pytania-proszę pisać na PW...
Miłego dnia...
 

 
Gdzie wklejamy kod:

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

Zapomniałbym o ramkach wokół zdjęć-również i to możemy zmienić...

Za to odpowiada ten kod:

#user-last-images ul li, #main-gallery ul.images-list li {
border: 1px solid red;
float: left;
margin-bottom: 10px;
padding: 2px;
width: 87px;
}

O ramkach-obramowaniach pisałem w lekcji pod tym linkiem:

http://testowo.pinger.pl/m/3883816/2-pomoce-obramowania

Dlatego proszę o zapoznanie się z nią-gdyż jest tam wyjaśnione wszystko co dotyczy obramowania...

Krótko:
Za ramki odpowiada BORDER i to w nim ustalamy jak dana ramka ma wyglądać...

W Naszym kodzie ramka(border) ma grubość jednego piksela(1px),jest linią ciągłą(solid) i ma kolor czerwony(red)...

Oczywiście sami decydujemy jaką grubość ma mieć ramka,jaki kolor i jaki rodzaj-czy ma być kropkowana,kreskowana czy trójwymiarowa...

Jeżeli np. chcemy aby Nasza ramka miała 2piksele grubości,była kropkowana i miała kolor zielony,w BORDER wpisujemy:

border: 2px dotted green;

Jeżeli jednak w ogóle nie chcemy ramki w okół cyfr,w BORDER wpisujemy NONE:

border: none;

Gotowe kody do wklejenia:
1.Z tamką:

#user-last-images ul li, #main-gallery ul.images-list li {
border: 1px solid red;
float: left;
margin-bottom: 10px;
padding: 2px;
width: 87px;
}

2.Bez ramki:

#user-last-images ul li, #main-gallery ul.images-list li {
border: none;
float: left;
margin-bottom: 10px;
padding: 2px;
width: 87px;
}


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

 
Gdzie wklejamy kod:

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

Pozostała Nam jeszcze jedna rzecz do zrobienia-a mianowicie przestawienie lewego bloku na prawą stronę...

Kilka osób pytało jak to zrobić...

Za to odpowiedzialny jest ten kod:

#inner-wrapper, #left-column {
float: left;
}

Sprawa jest bardzo prosta-wystarczy w FLOAT zamiast LEFT wpisać RIGHT i mamy blok przestawiony:

float: right;

Gotowy kod do wklejenia:

#inner-wrapper, #left-column {
float: right;
}


...
Przed zmianą:

Po zmianie:
Dodaj komentarz ›/ Pokaż wszystkie (13) ›
 

 
Gdzie wklejamy kod:

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

Pozostało Nam zmienić kolor i wygląd dolnej czcionki,czyli WSZYSTKIE...

Za to odpowiada ten kod:

.last-files .more {
font-family: arial,sans-serif;
font-weight: bold;
}


Kod pozwala Nam zmienić rodzaj czcionki oraz jej pogrubienie...

Aby zmienić rodzaj czcionki-wystarczy w FONT-FAMILY wpisać jej nazwę,np.

font-family: Arial; lub
font-family: Monotype Corsiva; bądz jakąkolwiek czcionkę która Nam się spodoba...

Jeżeli nie chcemy aby czcionka była pogrubiona,w FONT-WEIGHT wpisujemy NORMAL zamiast BOLD:

font-weight: normal;

Jednak możemy wprowadzić nieco więcej zmian do jej wyglądu jak i koloru...

Przedstawie to na przykładach:

1.Jeżeli chcemy aby czcionka była mniejsza lub większa-do kodu dopisujemy linijke:

font-size: 12px; lub
font-size: 20px;

2.Jeżeli chcemy aby czionka była podkreślona-do kodu dopisujemy linijke:

text-decoratiom: underline;

3.Jeżeli chcemy zmienić kolor podkreślenia czcionki-do kodu dopisujemy linijke:

color: red; lub
color: green; lub jaki kolor chcemy...

4.Jeżeli nie chcemy aby czcionka była po lewej stronie-do kodu dopisujemy linijke:

text-align: center; - dzięki temu Nasz czcionka będzie pośrodku,
lub
text_align: right; - dzięki temu Nasza czcionka będzie po prawej stronie...

W pkt.3 podałem Wam jak zmienić kolor podkreślenia czionki a nie samą czcionkę-a to dlatego iż żeby zmienić kolor samej czcionki,musimy dopisać dodatkowy kod,czyli:

p.more a {
color: green;
}

I to w nim aby zmienić kolor czcionki,w COLOR wpisujemy wybrany przez Nas kolor,np.

color: red; lub
color: #eee333;



Gotowe kody do wklejenia...

1.Bez dodatków + kolor czcionki:

.last-files .more {
font-family: arial,sans-serif;
font-weight: bold;
}
p.more a {
color: green;
}



2.Z dodatkami + kolor czcionki:

.last-files .more {
font-family: arial;
font-weight: bold;
text-align: right;
font-size: 16px;
text-decoration: underline;
}
p.more a {
color: green;
}


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

 
Oby dzięki reklamie którą Pinger Nas uraczył-zakupili mniej awaryjne serwery...
Wtedy nie miałbym nic przeciwko...
  • awatar LOSTHIGHWAY: @Testowo*: No własnie:P
  • awatar Testowo*: @LostHighway: no baa...;-)
  • awatar LOSTHIGHWAY: @Testowo*: Najwidoczniej mam u siebie włączoną blokadę reklam w przeglądarce i reklamy u siebie na blogu nie widzę... a Ty widzisz bo nie masz blokady reklam...
Dodaj komentarz ›/ Pokaż wszystkie (6) ›
 

 
Wiemy już jak wstawić padający śnieg na bloga...
Stąd moje pytanie-czy jesteście zainteresowani spadającymi liśćmi,motylkami i kwiatkami...
Ostrzegam że będzie to prosta grafika-bez rewelacji...
Dodaj komentarz ›/ Pokaż wszystkie (9) ›
 

 
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 zmienimy kolor i wygląd górnej czcionki,czyli NAJNOWSZE ZDJĘCIA...

Za to odpowiada ten kod:

#user-last-videos h2, #user-last-images h2 {
font-family: arial,sans-serif;
margin: 0;
}

Kod pozwala Nam zmienić rodzaj czcionki-wystarczy w FONT-FAMILY wpisać jej nazwę,np.

font-family: Arial; lub
font-family: Monotype Corsiva; bądz jakąkolwiek czcionkę która Nam się spodoba...

Jednak możemy wprowadzić nieco więcej zmian do jej wyglądu jak i koloru...

Przedstawię to na przykładach:

1.Jeżeli chcemy aby czcionka była mniejsza lub większa-do kodu dopisujemy linijkę:

font-size: 12px; lub
font-size: 20px;

2.Jeżeli chcemy aby czcionka była podkreślona-do kodu dopisujemy linijkę:

text-decoratiom: underline;

3.Jeżeli chcemy zmienić kolor czcionki-do kodu dopisujemy linijkę:

color: red; lub
color: green; lub jaki kolor chcemy...

4.Jeżeli nie chcemy aby czcionka była po lewej stronie-do kodu dopisujemy linijkę:

text-align: center; - dzięki temu Nasza czcionka będzie pośrodku,
lub
text_align: right; - dzięki temu Nasza czcionka będzie po prawej stronie...

Gotowe kody do wklejenia...

1.Bez dodatków:

#user-last-videos h2, #user-last-images h2 {
font-family: arial,sans-serif;
margin: 0;
}

2.Z dodatkami:

#user-last-videos h2, #user-last-images h2 {
font-family: monotype corsiva;
margin: 0;
text-align: center;
font-size: 20px;
text-decoration: underline;
color: red;
}


...
  • awatar Gość: Testowo wroc, jestes tu bardzo potrzebny, dlaczego nie dzialaja linki. Cos by sie zmienic chcialo i z nikad pomocy. Prosze, wroc!
  • awatar minikurs: @★ Lady in Twilight★: Prosze...:-)
  • awatar Lady in Twilight: jeszcze raz dziekuję wszystko podziałało rewelacyjnie :)czekam na kolejne lekcje :)
Dodaj komentarz ›/ Pokaż wszystkie (18) ›
 

 
Napiszę jeszcze jak zmienić kolor i wygląd czcionki-jednak trochę pózniej...
Pytania proszę zadawać w komentarzach...
Dodaj komentarz ›/ Pokaż wszystkie (5) ›
 

 
Gdzie wklejamy kod:

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

Zmienimy teraz kolor obramowania lewego bloku,za to odpowiada ten kod:

#user-last-images, .last-files {
background-color: yellow;
margin: 0 2px;
overflow: hidden;
padding: 3px;
}


Żeby zmienić kolor obramowania lewego bloku,wystarczy w BACKGROUND-COLOR wpisać wybrany przez Nas kolor,np:

background-color: red; lub
background-color: #fff000; lub jakikolwiek inny...


Gotowy kod do wklejenia:


#user-last-images, .last-files {
background-color: yellow;
margin: 0 2px;
overflow: hidden;
padding: 3px;
}


...

  • awatar minikurs: @wykład z rapologi .: http://testowo.pinger.pl/m/3887904/9-prawy-blok-obramowanie-bloku
  • awatar wykład z rapologi .: jak zrobić to samo ale w blokach prawych ? tzn zmienić obramowanie .
  • awatar Arona: no właśnie tak próbowałam i dlatego napisałam :)
Dodaj komentarz ›/ Pokaż wszystkie (6) ›
 

 
Gdzie wklejamy kod:

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

Taraz zmienimy kolor tła górnego paska,za to odpowiada ten kod:

.user-localizations .loc .loc-inner .loc-top, #user-last-videos h2, #user-last-images h2 {
background-color: red;
background-image: none;
}


Żeby zmienić kolor tła górnego paska,wystarczy w BACKGROUND-COLOR wpisać wybrany przez Nas kolor,np:

background-color: red; lub
background-color: #fff000; lub jakikolwiek inny...


Gotowy kod do wklejenia:

.user-localizations .loc .loc-inner .loc-top, #user-last-videos h2, #user-last-images h2 {
background-color: red;
background-image: none;
}



...
  • awatar minikurs: @ciiii, mnie tu nie ma.: osz zaraz kolacja...A gdzie wieczorek zapoznawczy cy cuś...;-)
  • awatar Gość: @Testowo*: a poza tym podobno błogosławieni co nie widzieli, a uwierzyli .;)
  • awatar Gość: @Testowo*: zapraszam na kolację...
Dodaj komentarz ›/ Pokaż wszystkie (5) ›
 

 
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 zmienimy kolor tła dolnego paska,za to odpowiada ten kod:

.last-files .more {
background-color: black;
background-image: none;
margin: 0;
padding: 0 7px 7px;
}

Żeby zmienić kolor tła dolnego paska,wystarczy w BACKGROUND-COLOR wpisać wybrany przez Nas kolor,np:

background-color: red; lub
background-color: #fff000; lub jakikolwiek inny...


Gotowy kod do wklejenia:

.last-files .more {
background-color: black;
background-image: none;
margin: 0;
padding: 0 7px 7px;
}


...
 

 
Gdzie wklejamy kod:

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

Zmiany w Lewym Bloku zaczniemy od tła...

Za to odpowiada ten kod:

.last-files .last-files-outer {
background-image: none;
background-color: #222222
}

Żeby zmienić kolor tła Lewego Bloku,wystarczy w BACKGROUND-COLOR wpisać wybrany przez Nas kolor,np:

background-color: red; lub
background-color: #fff000; lub jakikolwiek inny...

Szybko,łatwo i przyjemnie...

Gotowy kod do wklejenia:

.last-files .last-files-outer {
background-image: none;
background-color: khaki
}


...
  • awatar Gość: a jak usunąć tą ramkę ?
  • awatar Gobiidae: No właśnie... Transparęt nie wchodzi... Ale sposób na sposób,tło mam niebieskie to i tam mam wpisany kolor blue,to jeszcze nie to ale zawsze już lepiej:)
  • awatar Bitter Coffee: właśnie, nie da się zrobić przezroczystego tła? próbowałam wpisywać "transparent" ale nie udało się. :(
Dodaj komentarz ›/ Pokaż wszystkie (6) ›
 

 
Dzisiaj wstawie lekcję jak zmienić tło i czcionkę lewego bloku...
Są chętni...?
  • awatar Gość: @LOSTHIGHWAY:
  • awatar Gość: jaaa :D
  • awatar LOSTHIGHWAY: A propos teraz Twój blog wygląda świetnie...
Dodaj komentarz ›/ Pokaż wszystkie (5) ›
 

 
Gdzie wklejamy kod:

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

Niektórzy z Was pytają,jak przenieść prawy blok na lewą stronę...
Otóż sposobów jest chyba kilka,ja Wam pokażę jeden z nich...

W sumie w tym przykładzie nie przesuniemy prawego bloku na lewą stronę,lecz środkowy blok na prawo-co da ten sam efekt...

Za to odpowiada ten kod:

#left_content {
float: left;
width: 539px;
}

Aby przenieść środkowy blok na prawą stronę,w FLOAT wpisujemy RIGHT:

float: right;

Jednak to nie wszystko,gdybyśmy wkleili tak zmieniony kod-oba bloki przylegały by do siebie,co nie wygląda zbyt estetycznie...
Dlatego do kodu dopiszemy jeszcze linijke:

margin-left: 10px;

Dzięki temu będziemy mieli małą przerwę między blokami...

Gotowy kod do wklejenia:

#left_content {
float: right;
margin-left: 10px;
width: 539px;
}


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

 
Gdzie wklejamy kod:

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

Zmienimy teraz kolor oraz rodzaj czcionki-daty dodania komentarza...

Zmieni on czcionkę w Prawym bloku oraz we Wpisach...

Za to odpowiada ten kod:

.time, div#main a.time, div#main a.comm {
color: green;
font-family: Arial,sans-serif;
text-decoration: none;
}

Sama zmiana koloru czcionki jest bardzo prosta,wystarczy w COLOR wpisać wybrany przez Nas kolor,np:

color: red; lub
color: #ffffff;

i gotowe...

Oprócz tego możemy zmienić rodzaj czcionki,wystarczy w FONT-FAMILY wpisać jej nazwę,np.

font-family: verdana; lub
font-family: Monotype Corsiva;

Dodatkowo usuwając NONE w TEXT-DECORATION i wpisując na to miejsce UNDERLINE czcionka będzie podkreślona:

text-decoration: underline;

Gotowy kod do wklejenia:

.time, div#main a.time, div#main a.comm {
color: green;
font-family: Arial,sans-serif;
text-decoration: none;
}


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

 
W razie pytań-proszę je zadawać w Komentarzach odpowiednich lekcji...
  • awatar Testowo*: @maslosmietankowe: podaj mi na PW ten kod...
  • awatar maslosmietankowe: ja mam pytanie odnosnie loga..:) no wiec wklejam kod, wstawiam link do loga, i wymiary tego loga, i pojawia się tylko dziura ale loga brak:/ i tak za kazdym razem. probuje wstawiac logo i w imageshack i w inne tego typu strony i za każdym razem to samo. co robie zle?
  • awatar Testowo*: @Tynka (biżuteria z modeliny): jak widzisz w tylu kodach łatwo o pomyłkę...:-)
Dodaj komentarz ›/ Pokaż wszystkie (9) ›
 

 
Gdzie wklejamy kod:

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

Na koniec zmienimy kolor Trzykropka...

Za to odpowiada ten kod:


ul#sites li {
color: red;
}

Sama zmiana koloru czcionki jest bardzo prosta,wystarczy w COLOR wpisać wybrany przez Nas kolor,np:

color: red; lub
color: #ffffff;

i gotowe...

Gotowy kod do wklejenia:

ul#sites li {
color: green;
}


...
  • awatar Gość: HRwTmo http://www.MHyzKpN7h4ERauvS72jUbdI0HeKxuZom.com
  • awatar Gość: HRwTmo http://www.MHyzKpN7h4ERauvS72jUbdI0HeKxuZom.com
  • awatar Gość: HRwTmo http://www.MHyzKpN7h4ERauvS72jUbdI0HeKxuZom.com
Dodaj komentarz ›/ Pokaż wszystkie (6) ›
 

 
Gdzie wklejamy kod:

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

Zmieniamy ramkę wokół cyfr,za to odpowiada ten kod:

ul#sites li a {
border: 1px solid red;
}

O ramkach-obramowaniach pisałem w lekcji pod tym linkiem:

http://testowo.pinger.pl/m/3883816/2-pomoce-obramowania

Dlatego proszę o zapoznanie się z nią-gdyż jest tam wyjaśnione wszystko co dotyczy obramowania...

Krótko:
Za ramki odpowiada BORDER i to w nim ustalamy jak dana ramka ma wyglądać...

W Naszym kodzie ramka(border) ma grubość jednego piksela(1px),jest linią ciągłą(solid) i ma kolor czerwony(red)...

Oczywiście sami decydujemy jaką grubość ma mieć ramka,jaki kolor i jaki rodzaj-czy ma być kropkowana,kreskowana czy trójwymiarowa...

Jeżeli np. chcemy aby Nasza ramka miała 2piksele grubości,była kropkowana i miała kolor zielony,w BORDER wpisujemy:

border: 2px dotted green;

Jeżeli jednak w ogóle nie chcemy ramki w okół cyfr,w BORDER wpisujemy NONE:

border: none;

Gotowe kody do wklejenia:

1.Cyfry z ramką:

ul#sites li a {
border: 1px solid red;
}

2.Cyfry bez ramki:

ul#sites li a {
border: none;
}


...
 

 
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 zmienić kolor i tło cyfry odwiedzanej strony-za to odpowiada ten kod:

ul#sites li a#current_page {
background: #F2E7B5;
color: red;
text-decoration: none;
}

Aby zmienić kolor tła,w BACKGROUND wpisujemy nasz kolor,np.

background: red; lub
background: yellow;

Aby zmienić kolor cyfry,w COLOR wpisujemy Nasz kolor,np.

color: brown; lub
color: #fff000;

Oczywiście kolor wybieramy sobie sami...

Gotowy kod do wklejenia:

ul#sites li a#current_page {
background: black;
color: red;
text-decoration: none;
}


...