Wpisy oznaczone tagiem "CSS" (541)  

testowo
 
Na początek zmieńmy kolor tła w prawym bloku...

U mnie przed zmianami tło wygląda tak:

Kliknij żeby powiększyć:
przedzmianami.png


Żeby zmienić jego kolor potrzebujemy tego kodu:

.sidebox {
background: #FAF5E0;
}
#right_content .sidebox-odd {
background: #E3FAFA;
}

Aby zmienić kolor tła,wystarczy w BACKGROUND wpisać nazwę naszego koloru,np.

background: red; lub background: white; lub background: #000fff czy jaki tylko kolor sobie wybierzemy...

Kliknij żeby powiększyć:
podwojny kod.png


Po wstawieniu wybranego przezemnie koloru,tło wygląda tak:

Kliknij żeby powiększyć:
pozmianach.png


Gotowy kod to wklejenia:

.sidebox {
background: #C9BE62;
}
#right_content .sidebox-odd {
background: #C9BE62;
}

...
Pomoce:

1.Gdzie wklejamy kod css:
- testowo.pinger.pl/m/19949711

2.Więcej o kolorach przeczytacie pod tym adresem:
- testowo.pinger.pl/m/19946139
..........
pajacyk.pl -KLIK...
Pokaż wszystkie (5) ›
 

testowo
 
Często w zmianie wyglądu bloga używamy kolorów-do zmiany tła,czcionek,obramowań-dlatego postanowiłem troszeczkę o tym napisać...

Otóz w kodzie CSS używamy dwóch rodzajów określania kolorów:

1.Nazwy angielskie,
2.Kod szesnastkowy.

Kliknij żeby powiększyć:
Ashampoo_Snap_2013.09.12_18h17m30s_008_.png


1.Nazwy angielskie-czyli w tym przypadku używamy angielskich nazw kolorów,np.

WHITE - to kolor BIAŁY,
GREEN - to kolor ZIELONY,
RED - to kolor CZERWONY.

2.Kod szesnastkowy:

Kod szesnastkowy sklada sie z siedmiu znakow...

Pierwszy jest zawsze # czyli HASH...
Zaraz za nim jest sześć cyfr lub sześć liter - lub kombinacja cyfr i liter,np:

#ffffff - jest to oznaczenie białego koloru,
#000000 - jest to oznaczenie czarnego koloru(sa to cyfry zero,nie litery o),
#ff0000 - jest to oznaczenie koloru czerwonego.

W skrócie-w nazwach szestnastkowych kolorów mogą pojawić się cyfry od 0 do 9 i/lub litery od A do F...

Kliknij żeby powiększyć:
Ashampoo_Snap_2013.09.12_18h20m15s_009_.png


Przykładowy kod z kolorem tła:

Kliknij żeby powiększyć:
Ashampoo_Snap_2013.09.16_22h50m15s_001_.png


Osobiście radzę wpisywać kolory w kodzie szesnastkowym,ponieważ nie wszystkie nazwy kolorów są dobrze interpretowane przez przeglądarki.

Dla ułatwienia podam Wam dwa adresy które mogą okazać się przydatne przy wyborze kolorów...

1.Pod tym adresem możecie przeczytać więcej o kolorach.Znajduje tam się również bezpieczna paleta kolorów:

- pl.wikipedia.org/wiki/Kolory_w_Internecie

2.Pod tym adresem znajduje się rozszerzona paleta kolorów z większą ilością ich wyboru,poza tym
obok angielskich nazw kolorów macie również pokazane je w kodzie szesnastkowym:

- dioceseofboac.org/tonz/?p=325

..........
pajacyk.pl - KLIK...
 

empty-room
 
Wpis tylko dla właściciela minibloga
• carmen:

Wpis prywatny. Może go zobaczyć tylko właściciel minibloga.

 

aga16233
 
Wpis tylko dla właściciela minibloga

Wpis prywatny. Może go zobaczyć tylko właściciel minibloga.

 

agatka12345q
 
#pinger #kurs #css
Testowo*: 2.Wpisy-zmiana czcionki...
Gdzie wklejamy kod:

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



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;
}
Dodaj komentarz ›/ Pokaż wszystkie (3) ›
 

yourfashion
 
Dzisiaj pokażę Wam jak zmienić tło górnej belki, oraz kolor nazwy bloga.
2.jpg


*KROK PIERWSZY*
Wchodzimy w:USTAWIENIA -> Wygląd Minibloga -> CSS.
Tutaj będziemy tworzyć kod:
ede6a0ce002ad1b151d31fef.jpg

____________________________________________________
                      *ZMIANA KOLORU TŁA!*
____________________________________________________
div.profil-info {
background: #FFC0FF;
}

-background: oznacza tło. Wpisujecie tutaj kolor który wygenerujecie na stronie www.kurshtml.edu.pl/generatory/kolory.html
3.jpg

*GOTOWE!*
Bez tytułu.jpg

Jeśli będziecie chciały mieć na całym blogu jeden kolor tak jak, to będziecie musiały wszędzie wybierać np. biały itd :)
____________________________________________________
                    *ZMIANA NA TŁO GRAFICZNE!*
____________________________________________________
*Pusty szablon* Wykonujecie na nim swój projekt.
1.jpg

*Mój szablon*
1 - Kopia.jpg

Wchodzimy na vlep.pl i dodajemy swój szablon, następnie kopiujemy cały wygenerowany link.
aa.jpg

*Gotowy Kod!*
kod.jpg

background: url("____________")-w tym nawiasie dodajemy link który wygenerowaliśmy na vlep.pl

*GOTOWE!*
4.jpg

____________________________________________________
...w dalszej części pokażę Wam jak zmienić kolor oraz czcionkę nazwy bloga!

Buziaki YourFashion ♥
  • awatar mrskate: działa :) czekam na zmianę czcionki :)
  • awatar ^Gosiaczek^: Fajnie by było jakbyś pokazywała jak wykonujesz te szablony, w jakim programie:)
  • awatar Krytyczka: bardzo przydatne, w najblizszym czasie pobawie sie w zmiane bloga :)
Pokaż wszystkie (9) ›
 

yourfashion
 
Dzisiaj pokażę Wam jak dodać nagłówek na Bloga!
1.jpg

*KROK PIERWSZY*
Wykonujemy szablon.Najlepsze wymiary szablonu to około: Wysokość(400px), Szerokość(700px). Jeśli szablon będzie zbyt wysoki, lub szeroki to zostanie automatycznie ucięty.

Wszystkie testy będę wykonywała na YourFashionCSS.pinger.pl

*Mój szablon* wysokość(401px), szerokość(700px),
SZABLONk.jpg

*Pusty szablon* wysokość(401px), szerokość(700px),
Wykonujecie na nim swój projekt szablonu.
4.jpg

Jeśli macie już gotowy szablon, to przechodzimy dalej.

*KROK DRUGI*
Wchodzimy na vlep.pl i dodajemy swój szablon, następnie kopiujemy cały wygenerowany link.
Bez tytułu.jpg

*KROK TRZECI*
Wchodzimy w:USTAWIENIA -> Wygląd Minibloga -> CSS.
Tutaj będziemy tworzyć kod:
2.jpg

*KROK CZWARTY*
Tworzymy kod!
Bez tytułu.jpg

Jeśli skorzystacie z pustego szablonu który dodałam, to będzie wam łatwiej!

*OBJAŚNIENIA KODU!*
} - tym nawiasem kończymy każdy kod który dodamy.

background: url("____________")-w tym nawiasie dodajemy link który wygenerowaliśmy na vlep.pl

height: wpisujemy wysokość szablonu w px;

width: wpisujemy szerokość szablonu w px;
____________________________________________________
Jeśli skorzystacie z pustego szablonu który dodałam, to wystarczy że wkleicie link wygenerowany na vlep.pl. CAŁA RESZTA BEZ ZMIAN.

Jeśli skorzystacie z szablonu który ma inne wymiary, będzie trzeba wkleić link wygenerowany na vlep.pl, oraz zmienić wartości height, width.
____________________________________________________

Buziaki YourFashion ♥
Pokaż wszystkie (16) ›
 

csslab
 
Jeśli chcesz, aby Twoje wpisy jak i wpisy znajomych na Twoim blogu były tej samej szerokości, możesz zastosować poniższy kod CSS. W pierwszej części kod przemieszcza i zmniejsza wielkość obrazka właściciela blogu. Druga część kodu to zwiększenie szerokości wpisu znajomego w ten sposób, aby wpisy Twoje i znajomych miały ten sam wygląd. Ta część kodu powinna być zastosowana tylko wtedy, jeśli wpisy mają oryginalny wygląd i nie były przez Ciebie poprzednio zmodyfikowane. W drugiej części kodu w czterech fragmentach 'cs.pinger .pl' zostały wprowadzone spacje, które należy usunąć.

/* pierwsza część */

.authors-odd, .authors-even {
width: 70px;
height: 75px;
}

.authors-even > .pair-left, .authors-odd > .pair-left{
position: relative;
left: 35px;
top: -40px;
}

.authors-even > a.pair-left img, .authors-odd > a.pair-left img{
width: 46%;
padding: 0;
}

.authors-even > a.pair-left img:hover{
border-color: rgb(238, 232, 209);
}

.authors-odd > a.pair-left img:hover{
border-color: rgb(213, 240, 240);
}

.pair-arrow, .answer-to-enrty{
display: none;
}

/* druga część */

.message-wrap .foreign {
width: 429px;
margin-left: 6px;
}

.message-odd .foreign .radius-entry-top {
background: url( "http://cs.pinger .pl/pinger/radius-entry-top.gif" ) no-repeat scroll 0% 0% transparent;
}

.message-odd .foreign .radius-entry-bottom {
background: url( "http://cs.pinger .pl/pinger/radius-entry-bottom.gif" ) no-repeat scroll 0% 0% transparent;
}

.message-even .foreign .radius-entry-top {
background: url( "http://cs.pinger .pl/pinger/radius-entry-top-bright.gif" ) no-repeat scroll 0% 0% transparent;
}

.message-even .foreign .radius-entry-bottom {
background: url( "http://cs.pinger .pl/pinger/radius-entry-bottom-bright.gif" ) no-repeat scroll 0% 0% transparent;
}

.foreign .img-wrap img.full {
max-width: none;
}

A oto wygląd wpisu znajomego po zastosowaniu kodu

Zmiana wyglądu awatara wpisu znajomego.PNG
 

csslab
 
Zamieszczam kod CSS poszerzający wpisy, usuwający boczne obrazki autora wpisów oraz wyśrodkowujący obrazki we wpisach. Kod ten zamieszczam również w załączniku jako plik tekstowy.

.message-wrap{
margin: 3px 0 6px;
}

.message-wrap div.entry
{
padding: 6px 5px 4px;
margin: 0;
border-radius: 6px;
}

.message-wrap .native,
.message-wrap .foreign
{
background-image: none;
margin: 0;
float: none;
width: auto;
padding: 5px;
}

.message-wrap .clearer {
display: none;
}

.radius-entry-top,
.radius-entry-bottom,
.pair-radius-entry-top,
.pair-radius-entry-bottom
{
display: none;
}

.author-odd, .author-even, .authors-odd, .authors-even{
display: none;
}

.img-wrap, #main_news .image-thumbs{
text-align: center;
}

#main_news .image-thumbs a.imgs{
float: none;
}

#main_news .image-thumbs a.imgs img{
display: inline-block;
margin: 6px 2px;
}

.foreign .img-wrap img.full {
max-width: none;
}

Poszerzone wpisy bez obrazka autora.PNG
  • awatar Angel...♥: bardzo fajne :) Przydało się :D Dzięki :P
Pokaż wszystkie (1) ›
 

csslab
 
Poniżej przestawiam kod CSS, którego zadaniem jest powiększenie rozmiaru pola tekstowego, w sekcji 'Własne style' w zakładce 'Wygląd minibloga' na stronie ustawień. Zmiana ta może pomóc podczas przeglądu i edycji własnego kodu CSS. Wysokość tego pola tekstowego można zmieniać przeciągając prawy dolny narożnik.

Kod CSS:

.user-style-set .vertical{
text-align: left;
padding-left: 1em;
}

.user-style-set .textarea-bg{
background: none;
width: auto;
height: auto;
border: 1px solid #579CC3;
border-radius: 3px;
}

.user-style-set #user-style-content{
width: 488px;
height: 360px;
min-height: 90px;
resize: vertical;
}

Zmiana wielkości pola tekstowego własnych stylów w ustawieniach.PNG
 

csslab
 
Osoby, które zmieniają kolor tła środkowej kolumny wpisów, mogą zauważyć dodatkową białą ramkę wokół obrazków autora wpisów.

Usuwanie zbędnej ramki wokół obrazka autora wpisu 1.PNG


Jeśli komuś to przeszkadza, można tę ramkę usunąć za pomocą kodu CSS:

.author-odd, .author-even, .authors-odd, .authors-even{
border-color: transparent;
}

Usuwanie zbędnej ramki wokół obrazka autora wpisu 2.PNG


Jest jeszcze nieco inny kod na usunięcie ramki, lecz zmienia on położenie niektórych elementów w kolumnie wpisów o kilka pikseli:

.author-odd, .author-even, .authors-odd, .authors-even{
border: none;
}
  • awatar http://the-fat-loss-: The site is fascinating! thanks for sharing this helpful info..
  • awatar http://chemiseralphl: Many thanks a whole lot for sharing!
Pokaż wszystkie (2) ›
 

csslab
 
Przycisk 'Dodaj komentarz' składa się z obrazka tła o wymiarach 130 na 21 pikseli oraz z białego napisu 'Dodaj komentarz'. Pierwszy sposób na manipulację wyglądu sprowadza się do podmiany jednego lub dwóch obrazków tła przycisku. Poniżej mamy kod CSS z podmianą jednego obrazka, gdzie tekst 'adres.obrazka' to absolutny adres internetowy pliku obrazka, którym ten tekst należy zastąpić.

input.add-comment, input.add-comment:hover{
background-image: url(adres.obrazka);
}


Następny kod CSS jest odpowiedni dla zmiany wyglądu przycisku, kiedy najedziemy na niego wskaźnikiem myszy. W miejscu tekstu w kodzie 'adres.drugiego.obrazka' wstawiamy adres internetowy drugiego pliku obrazka, który będzie wyświetlony po najechaniu.

input.add-comment{
background-image: url(adres.obrazka);
}

input.add-comment:hover{
background-image: url(adres.drugiego.obrazka);
}


Dla dodatkowego efektu możemy również zmienić kolor tekstu:

input.add-comment{
background-image: url(adres.obrazka);
color: red;
}

input.add-comment:hover{
background-image: url(adres.drugiego.obrazka);
color: black;
}


Manipulacja wyglądu przycisku jest też możliwa bez posiadania obrazków tła – wykorzystujemy wtedy tylko kod CSS. Pod spodem mamy przykład takiego kodu. W komentarzach ( '/* ... */' ) opisuję co zostaje zmieniane. Można usunąć wiersze kodu z komentarzami, które nie są nam potrzebne. Można również tam dodać inne właściwości, jak np. 'box-shadow'.

input.add-comment{
background: #7CB2DE;  /* kolor tła */
color: white;  /* kolor tekstu */
border: 1px solid gray;  /* ramka */
border-radius: 5px;  /* narożniki */
margin-left: 50px;  /* korekcja położenia */
}

input.add-comment:hover{
background: white;  /* kolor tła */
color: #33BBEE;  /* kolor tekstu */
}

Manipulacja wyglądu przycisku Dodaj komentarz.PNG
  • awatar http://www.mmogm.com: As I website possessor I believe the content material here is rattling wonderful , appreciate it for your hard work. You should keep it up forever! Best of luck.
Pokaż wszystkie (1) ›
 

csslab
 
Przycisk 'Odpowiedz' pojawia się pod komentarzami do wpisów. Jego wygląd opiera się całkowicie na dwóch obrazkach o wymiarach 66 na 16 pikseli – jednego dla stanu w spoczynku i drugiego wyświetlanego wtedy, kiedy wskaźnik myszy znajduje się nad przyciskiem. Tekst etykiety przycisku ( 'Odpowiedz' ) jest częścią obrazków. Pierwsza opcja przy zmianie przycisku polega na podmianie jednego lub obu obrazków przedstawiających przycisk:

ul.comments-list .comment-meta .comment-reply{
background-image: url(adres.obrazka);
}

ul.comments-list .comment-meta .comment-reply:hover{
background-image: url(adres.drugiego.obrazka);
}

Fragmenty tekstu 'adres.obrazka' oraz 'adres.drugiego.obrazka' w powyższym kodzie należy zastąpić absolutnymi adresami plików obrazków przedstawiających przycisk w dwóch stanach.


Druga opcja zmiany wyglądu przycisku nie wymaga obecności obrazków i opiera się tylko na kodzie CSS. Oto przykład:

/* przycisk bez wskaźnika myszy */
ul.comments-list .comment-meta .comment-reply{
background: #7DB6F5;  /* kolor tła */
color: white;  /* kolor tekstu */
font-weight: bold;  /* pogrubienie tekstu */
padding: 2px 5px; /* wielkość przycisku */
border-radius: 3px; /* narożniki przycisku */
}

/* przycisk i wskaźnik myszy */
ul.comments-list .comment-meta .comment-reply:hover{
background: white;
color: #478DB3;
}

/* wyświetlenie etykiety */
ul.comments-list .comment-meta .comment-reply span {
visibility: visible;
}

Manipulacja wyglądu przycisku Odpowiedz.PNG
 

csslab
 
Font 'Lobster' można znaleźć na stronie 'Google Fonts' pod adresem 'www.google.com/fonts/', a jak uzyskać kod CSS dla tego i innych fontów, opisałem we wpisie tutaj: 'csslab.pinger.pl/m/14724890'.

Wykorzystajmy zatem font przy kilku elementach strony blogu. Ze względu na to, że poniższy kod CSS zawiera dwa adresy internetowe, wprowadziłem spację wewnątrz każdego z tych adresów ( 'googleusercontent .com' ). Osoby zainteresowane użyciem tego kodu, muszą po skopiowaniu go usunąć te spacje. Z kolei w komentarzach ( '/* ... */' ) określone są elementy, które wykorzystują font 'Lobster'. Jeśli np. ktoś nie chce, aby jakiś element został zmieniany, może skasować fragment kodu pod komentarzem. A oto kod CSS:

@font-face {
font-family: 'Lobster';
font-style: normal;
font-weight: 400;
src: url(http://themes.googleusercontent .com/static/fonts/lobster/v5/vCLp8V-w9blvRLUVAEogtA.eot?#iefix),
url(http://themes.googleusercontent .com/static/fonts/lobster/v5/79Dll_5Rjz0WK-TN_-xljw.ttf);
}

/* pseudonim na górze strony */
div.profil-info h2 {
font-family: "Lobster", cursive;
font-weight: normal;
}

/* tytuł wpisu */
a.msg-title{
font-family: "Lobster", cursive;
font-weight: normal;
font-size: 20px;
}

/* pseudonim w kolumnie po prawej stronie */
h2.login_icon{
font-family: "Lobster", cursive;
font-weight: normal;
font-size: 17px;
background-position: left center;
}

/* nagłówki w kolumnie po prawej stronie */
h2.user_info_header{
font-family: "Lobster", cursive;
font-weight: normal;
font-size: 16px;
}

/* ilość wpisów i licznik odwiedzin */
.profile-stats ul li .stats-count{
font-family: "Lobster", cursive;
font-weight: normal;
font-size: 16px;
}

Fragment strony po zastosowaniu kodu:

Przykład zastosowania fontu Lobster.PNG

Kod ten został zastosowany na stronie 'przytulmisia.pinger.pl/'.
 

csslab
 
Zastosowanie właściwości CSS 'box-shadow' na obrazkach może urozmaicić wygląd wpisu, zatem przedstawię kilka kodów CSS, które ozdobią wasze obrazki.

Na początku standardowy cień rzucany przez obrazek:

/* reguła 1 */
.message a.imgs img{
box-shadow: 3px 3px 3px #aaa;  /* efekt cienia */
}
/* reguła 2 */
.message a.imgs{
padding-bottom: 8px;
}

Powyższa druga reguła z deklaracją  'padding-bottom: 8px' dodaje trochę przestrzeni na dole, dzięki temu zapobiega ucinaniu cienia w pewnych przypadkach.
Efekt cienia dla obrazków we wpisach 1.png


Kolejny przykład przedstawia nieco zmodyfikowaną wersję cienia:

.message a.imgs img{
box-shadow: 0 13px 3px -8px #aaa;
}
.message a.imgs{
padding-bottom: 8px;
}
Efekt cienia dla obrazków we wpisach 2.png
 

csslab
 
Przycisk 'szukaj' składa się całkowicie z obrazka, a więc również tekst 'szukaj' jest częścią tego obrazka. Jest to zatem odmienne rozwiązanie, niż ma to miejsce w przypadku przycisku 'dodaj...', gdzie tło jest obrazkiem, a napis osobnym tekstem. Zatem, jeśli podmieniamy przycisk 'szukaj', na nowym obrazku o wymiarach 62 na 20 pikseli musimy sami umieścić nazwę przycisku.
Kod CSS podmiany obrazka może wyglądać tak:

input#search, input#search-msg-submit, input#search-msg-by-tag-submit{
background-image: url(obrazek.z.napisem);
}

Tekst 'obrazek.z.napisem' zastępujemy adresem absolutnym ( posiadającym na początku fragment 'http:' ) pliku obrazka przedstawiającego nasz przycisk z nazwą 'szukaj'.
Jeśli posiadamy również wersję obrazka, gdzie przycisk wygląda inaczej w momencie najechania na niego wskaźnikiem myszy, nasz kod CSS powinniśmy rozszerzyć do takiej postaci:

input#search, input#search-msg-submit, input#search-msg-by-tag-submit{
background-image: url(obrazek.z.napisem);
}
input#search:hover, input#search-msg-submit:hover, input#search-msg-by-tag-submit:hover{
background-image: url(drugi.obrazek.z.napisem);
}
 

csslab
 
W momencie, kiedy jesteśmy zalogowani na naszym koncie i wejdziemy na blog innej osoby, po prawej stronie pojawiają się przyciski, z których pierwszy to 'Dodaj do znajomych'. Aby zmienić wygląd tych przycisków, mamy możliwość podmiany ich obrazków tła lub ustalić ich wygląd całkowicie za pomocą kodu CSS.
Jeśli chcemy skorzystać z pierwszej opcji, musimy posiadać własny obrazek o wymiarach najlepiej 150 na 21 pikseli i zastosować kod CSS, w którym 'adres.obrazka' to absolutny adres naszego obrazka:

button.button-add{
background-image: url( "adres.obrazka" );
}

Aby przycisk zmieniał wygląd po najechaniu na niego myszką, musimy posiadać dwa obrazki i wprowadzić następujący kod:

button.button-add{
background-image: url( "adres.obrazka" );
}
button.button-add:hover{
background-image: url( "adres.drugiego.obrazka" );
}

Zmiany koloru tekstu na przyciskach możemy dokonać za pomocą właściwości 'color', np.:

button.button-add{
background-image: url( "adres.obrazka" );
color: #EE9;
}

Jak wspomniałem na początku, wygląd przycisków 'Dodaj...' możemy zdefiniować bez używania obrazków korzystając tylko z kodu CSS. Poniżej znajduje się przykład takiego kodu i widok w przeglądarce:

button.button-add{
background: white;  /* kolor tła */
color: #33BBEE;  /* kolor tekstu */
border: 1px solid gray;  /* ramka */
border-radius: 5px;  /* narożniki */
}
/* po najechaniu wskaźnikiem myszki */  
button.button-add:hover{
background: lightblue;  /* kolor tła */
color: white;  /* kolor tekstu */
}

Przyciski Dodaj Obserwuj Zablokuj.PNG
  • awatar gość: @Konstylencja: Te przyciski pojawiają się na Twoim blogu, kiedy ktoś inny zalogowany wchodzi na Twoją stronę.
Pokaż wszystkie (1) ›
 

csslab
 
Wpis ten poświęcony jest przyciskom, które oryginalnie znajdują się na górze strony blogu po prawej stronie. Modyfikacje tutaj opisane nie uwzględniają przeglądarki Internet Explorer 8, która jest przestarzała i coraz rzadziej używana.
Na początku przedstawię kody CSS, które pozwalają na likwidację elementów wizualnych, które mogą nam się nie podobać w tych przyciskach.

Usunięcie cienia pod przyciskami:

ul#navlist li
{
box-shadow: none;
}

Usunięcie gradientu z przycisków:

ul#navlist li
{
background-image: none;
}

Usunięcie strzałek przy etykietach przycisków:

ul#navlist li .arrow, ul#navlist li .arrow:hover {
background-image: none;
padding-right: 0;
}

Kiedy usuniemy gradient, możemy ustalić kolor tła przycisków:

ul#navlist li
{
background-image: none;
background-color: #FFF; /* ustalamy nowy kolor np. biały */
}

Możemy również zaokrąglić narożniki przyciskom:

ul#navlist li
{
border-radius: 6px;
}

Jeśli podoba nam gradient na przyciskach, lecz chcemy zastosować inny kolor, musimy usunąć oryginalny gradient, nadać własny kolor tła oraz zastosować specjalny zapis właściwości 'box-shadow':

ul#navlist li
{
background-image: none;
background-color: #FFF;
box-shadow: inset 0 -20px 12px -12px #CC9; /* nowy gradient */
}

Jeśli chcemy, aby przyciski rzucały cień i dodatkowo posiadały gradient, to przedstawiona powyżej właściwość 'box-shadow' musi być rozszerzona o wartości dla rzucanego cienia:

box-shadow: inset 0 -20px 12px -12px #CC9, 1px 1px 3px #888;

Wspomnę tylko, że wartość #CC9 to kolor dla gradientu, a wartość #888 to kolor dla cienia. Wartości te oczywiście można zmieniać, tak samo jak pozostałe.

A teraz przykład kodu CSS zmienionych przycisków w całości:

ul#navlist li
{
background-image: none;
background-color: #FFF;
border-radius: 4px;
box-shadow: inset 0 -20px 12px -12px #CC9, 1px 1px 3px #888;
}

ul#navlist li .arrow, ul#navlist li .arrow:hover {
background-image: none;
padding-right: 0;
}

Górne przyciski nawigacyjne – zmiana wyglądu.PNG
 

ginny2003
 
Wpis tylko dla właściciela minibloga

Wpis prywatny. Może go zobaczyć tylko właściciel minibloga.

 

testowo
 
Kochani sprawa  jest prosta-kody działają...
Jestem tego przykładem ja(chociaż jak widać czasowo mój blog wygląda normalnie) jak i wiele osób  na Pinger które zmieniły swoje blogi...
Co może być powodem że wklejacie kod a nie widać zmian:

1.Jak wiecie Nasz Pinger ma często humory i nie zawsze działa jak należy,dlatego też kiedy wklejacie i zapisujecie kod-sprawdźcie po zapisaniu czy ten kod na pewno jest w okienku do wklejania...
Często jest tak iż niby jest zapisany a tak naprawdę tam go nie ma...

2.Możecie mieć już wcześniej wklejony podobny kod-w takim przypadku ten pierwszy blokuje ostatnio dodany np. macie kod na zmianę tła na kolor czerwony:

body {
background: red;
}

Wkleiliście go i jest ok,lecz po pewnym czasie(bo idzie wiosna;-)) wkleiliście kod na tło zielone:

body {
background: green
}

I w tym przypadku popełniliście błąd-dlaczego?

Ponieważ zanim wstawicie kod na kolor zielony-trzeba usunąć ten stary na kolor czerwony...
Każdy kod który będzie pierwszy wklejony-będzie ważniejszy od tego drugiego i dlatego nie widać zmian...
Kody się po prostu blokują i pierwszy jest ważniejszy...

Żeby Wam nieco ułatwić pracę nad kodami,wklejcie poniższy kod-powiększy on Wam to malutkie okienko gdzie wklejacie kody  a co za tym idzie ułatwi całą pracę:

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

Pozdrawiam Jacek...
  • awatar Powerfulleyes: Mi jedyne co nie działa to skrypty. Ale jestem cierpliwa poczekam aż państwo admini go zaakceptują
  • awatar minikurs: @Powerfulleyes: no właśnie z tą administracją to jest tragedia...
  • awatar Powerfulleyes: @Testowo*: jedno dobre, że już bez problemu wpisy dodaje :D
Pokaż wszystkie (12) ›
 

testowo
 
Czyli kurs w pigułce...


I.Prawy blok...

1.Zmiana koloru i czcionki nazwy bloga:
- testowo.pinger.pl/(…)1-prawy-blok-zmiana-koloru-i-c…
2.Zmiana koloru części czcionki:
- testowo.pinger.pl/(…)2-prawy-blok-zmiana-koloru-cze…
3.Zmiana wyglądu czcionki:
- testowo.pinger.pl/(…)3-prawy-blok-zmiana-wygladu-cz…
4.Zmiana koloru czcionki:
- testowo.pinger.pl/(…)4-prawy-blok-zmiana-koloru-czc…
5.Zmiana koloru cyfr:
- testowo.pinger.pl/(…)5-prawy-blok-zmiana-koloru-cyf…
6.Zmiana tła:
- testowo.pinger.pl/m/3878448/6-prawy-blok-zmiana-tla
7.Tło wyszukiwarek:
- testowo.pinger.pl/(…)7-prawy-blok-tlo-wyszukiwarek…
8.Zmiana tła i czcionki komunikatorów:
- testowo.pinger.pl/(…)8-prawy-blok-zmiana-tla-i-czci…
9.Obramowanie bloku:
- testowo.pinger.pl/(…)9-prawy-blok-obramowanie-bloku…
10.Zmiana wyglądu i koloru czcionki Tagów:
- testowo.pinger.pl/(…)10-prawy-blok-zmiana-wygladu-i…
11.Zmiana koloru i wyglądu czcionki daty dodania komentarza:
- testowo.pinger.pl/(…)11-prawy-blok-zmiana-koloru-i-…:
12.Przestawiamy blok na lewą stronę:
- testowo.pinger.pl/(…)12-prawy-blok-przestawiamy-blo…
13.Zmiana tla i czcionki miejscowki:
- testowo.pinger.pl/(…)1-zmiana-tla-i-czcionki-miejsc…
14.Okragle awatary:
- testowo.pinger.pl/(…)prawy-blok-okragle-awatary…
15.Zmieniamy tlo na polprzezroczyste:
- testowo.pinger.pl/(…)zmieniamy-tlo-na-polprzezroczy…

II.Górny blok...

1.Zmieniamy tło:
- testowo.pinger.pl/(…)1-gorny-blok-zmieniamy-tlo…
2.Zmieniamy czcionkę nicka:
- testowo.pinger.pl/(…)2-gorny-blok-zmieniamy-czcionk…
3.Przesuwamy nicka:
- testowo.pinger.pl/(…)3-gorny-blok-przesuwamy-nicka…

III.Blok wpisów...

1.Zmiana tła bloku wpisów:
- testowo.pinger.pl/(…)1-blok-wpisow-zmiana-tla-bloku…
2.Zmiana czcionki:
- testowo.pinger.pl/(…)2-blok-wpisow-zmiana-czcionki…
3.Zmiana tła wokół bloku wpisów:
- testowo.pinger.pl/(…)3-blok-wpisow-zmiana-tla-wokol…
4.Zmiana koloru radiusów:
- testowo.pinger.pl/(…)4-blok-wpisow-zmiana-koloru-ra…
5.Zmiana listy wyboru:
- testowo.pinger.pl/(…)4-blok-wpisow-lista-wyboru…

IV.Wpisy...

1.Zmiana tła wpisów:
- testowo.pinger.pl/m/3897315/1-wpisy-zmiana-tla-wpisow
2.Zmiana czcionki:
- testowo.pinger.pl/m/3897488/2-wpisy-zmiana-czcionki
3.Zmieniamy kolor radiusuw:
- testowo.pinger.pl/(…)3-wpisy-zmieniamy-kolor-radius…
4.Zmiana wielkości czcionki:
- testowo.pinger.pl/(…)4-wpisy-zmiana-wielkosci-czcio…
5.Zmiana tła wokół wpisów:
- testowo.pinger.pl/(…)5-wpisy-zmiana-tla-wokol-wpiso…
6.Zmiana czcionki i tła Tytułów:
- testowo.pinger.pl/(…)6-wpisy-zmiana-czcionki-tytulo…
7.Usuwamy dymek:
- testowo.pinger.pl/m/4321345/7-wpisy-usuwamy-dymek
8.Zmieniamy kolor i wielkość czcionki LUBIĘ TO:
- testowo.pinger.pl/(…)8-wpisy-zmieniamy-kolor-i-wiel…
9.Usuwamy rączkę w LUBIĘ TO:
- testowo.pinger.pl/(…)9-wpisy-usuwamy-raczke-w-lubie…
10.Zmieniamy kolor ukośników:
- testowo.pinger.pl/(…)10-wpisy-zmieniamy-kolor-ukosn…
11.Wysrodkowanie zdjec oraz czcionki we Wpisach:
- testowo.pinger.pl/(…)11-wpisy-wysrodkowanie-czcionk…
12.Powiekszamy zdjecia we Wpisach:
- testowo.pinger.pl/(…)12-wpisy-powiekszamy-zdjecia-w…
13.Wyrownujemy same zdjecia we Wpisach:
- testowo.pinger.pl/(…)13-wpisy-wyrownujemy-same-zdje…
14.Wysrodkowanie filmikow z Youtube we Wpisach:
- testowo.pinger.pl/(…)14-wpisy-wysrodkowanie-filmiko…

V.Komentarze...

1.Zmiana tła wokół bloku wpisów komentarzy:
- testowo.pinger.pl/(…)1-komentarze-zmiana-tla-wokol-…
2.Zmiana tła bloku wpisów komentarzy:
- testowo.pinger.pl/(…)2-komentarze-zmiana-tla-bloku-…
3.Zmiana tła komentarzy:
- testowo.pinger.pl/(…)3-komentarze-zmiana-tla-koment…
4.Zmiana czcionki:
- testowo.pinger.pl/(…)4-komentarze-zmiana-czcionki…
5.Zmieniamy i usuwamy Radiusy:
- testowo.pinger.pl/(…)5-komentarze-zmieniamy-i-usuwa…
6.Usuwamy dymek:
- testowo.pinger.pl/(…)6-komentarze-usuwamy-dymek…

VI.Liczniki...

1.Zmiana tła liczników:
- testowo.pinger.pl/(…)1-liczniki-zmiana-tla-liczniko…
2.Zmieniamy wygląd pionowych kresek:
- testowo.pinger.pl/(…)2-liczniki-zmieniamy-wyglad-pi…
3.Zmiana koloru tekstu:
- testowo.pinger.pl/(…)3-liczniki-zmiana-koloru-tekst…
4.Zmiana koloru cyfr:
- testowo.pinger.pl/(…)4-liczniki-zmiana-koloru-cyfr…
5.Zmiana koloru cyfr powstania bloga:
- testowo.pinger.pl/(…)5-liczniki-zmiana-koloru-cyfr-…

VII.Górne menu:

1.Zmiana tła belek:
- testowo.pinger.pl/(…)1-gorne-menu-zmiana-tla-belek…
2.Zmiana tła nakładek:
- testowo.pinger.pl/(…)2-gorne-menu-zmiana-tla-naklad…
3.Zmiana koloru czcionki:
- testowo.pinger.pl/(…)3-gorne-menu-zmiana-koloru-czc…
4.Zmiana tła Wyloguj się:
- testowo.pinger.pl/(…)4-gorne-menu-zmiana-tla-wylogu…
5.Zmiana tła Wpisy znajomych:
- testowo.pinger.pl/(…)5-gorne-menu-zmiana-tla-wpisy-…
6.Zmiana nakładek we wpisach znajomych:
- testowo.pinger.pl/(…)6-gorne-menu-zmiana-nakladek-w…

VIII.Prywatne wpisy:

1.Usuwamy dymek:
- testowo.pinger.pl/(…)6-komentarze-usuwamy-dymek…
2.Usuwamy strzałkę:
- testowo.pinger.pl/(…)2-prywatne-wpisy-usuwamy-strza…
3.Usuwamy Radiusy w komentarzach:
- testowo.pinger.pl/(…)3-prywatne-wpisy-usuwamy-radiu…

IX.Obramowania awatarów:

1.Wstęp:
- testowo.pinger.pl/(…)1-obramowania-avatarow-wstep…
2.Awatary w prawym bloku:
- testowo.pinger.pl/(…)2-obramowania-avatarow-prawy-b…
3.Awatary w komentarzach:
- testowo.pinger.pl/(…)3-obramowania-avatarow-komenta…
4.Awatary we wpisach:
- testowo.pinger.pl/(…)4-obramowania-avatarow-wpisy…
5.Górny Awatar:
- testowo.pinger.pl/(…)5-obramowania-avatarow-gorny-a…

X.Inne...

1.Zmiana loga:
- testowo.pinger.pl/m/4016603/1-inne-zmiana-loga
2.Usuwamy Gorny Awatar:
- testowo.pinger.pl/m/8571217/5-usuwamy-gorny-awatar
3.Zmieniamy kursor:
- testowo.pinger.pl/m/7858610/zmieniamy-kursor

XI.Czcionki...

1.Zmiana koloru czcionki-1:
- testowo.pinger.pl/(…)1-czcionki-zmiana-koloru-w-wie…
2.Zmiana koloru czcionki-2:
- 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:
- testowo.pinger.pl/(…)3-srodkowe-menu-zmiana-tla-i-c…
5.Zmieniamy rodzaj czcionki na calym blogu:
- testowo.pinger.pl/(…)5-czcionki-zmieniamy-rodzaj-cz…

XII.Środkowe menu...

1.Zmiana tła:
- testowo.pinger.pl/(…)1-srodkowe-menu-zmiana-tla…
2.Zmiana wyglądu i koloru czcionki:
- testowo.pinger.pl/(…)2-srodkowe-menu-zmiana-wygladu…

XIII.Tagi...

1.Kolor czcionki Tagów we wpisach:
- testowo.pinger.pl/(…)1-tagi-kolor-czcionki-tagow-we…
2.Zmiana wyglądu czcionki:
- testowo.pinger.pl/(…)2-tagi-zmiana-wygladu-czcionki…
3.Zmiana koloru tła Tagów we wpisach:
- testowo.pinger.pl/(…)3-tagi-zmiana-koloru-tla-tagow…
4.Zmiana koloru tła pod Tagami:
- testowo.pinger.pl/(…)4-tagi-zmiana-koloru-tla-pod-t…

XIV.Dolne menu stron...

1.Zmiana tła:
- testowo.pinger.pl/(…)1-dolne-menu-stron-zmiana-tla…
2.Zmiana czcionki cyfr:
- testowo.pinger.pl/(…)2-dolne-menu-stron-zmiana-czci…
3.Zmiana koloru cyfr,po najechaniu kursorem...
- testowo.pinger.pl/(…)3-dolne-menu-stron-zmiana-kolo…
4.Zmiana koloru czcionki STARSZE:
- testowo.pinger.pl/(…)4-dolne-menu-stron-zmiana-kolo…
5.Zmiana koloru czcionki OGLĄDASZ
- testowo.pinger.pl/(…)5-dolne-menu-stron-zmiana-kolo…
6.Kolor i tło cyfry odwiedzanej strony:
- testowo.pinger.pl/(…)6-dolne-menu-stron-kolor-i-tlo…
7.Zmiana ramki wokół cyfr:
- testowo.pinger.pl/(…)7-dolne-menu-stron-zmiana-ramk…
8.Zmiana koloru trzykropka
- testowo.pinger.pl/(…)8-dolne-menu-stron-zmiana-kolo…

XV.Lewy blok...

1.Zmieniamy kolor tła:
- testowo.pinger.pl/(…)1-lewy-blok-zmieniamy-kolor-tl…
2.Zmieniamy kolor dolnego paska:
- testowo.pinger.pl/(…)2-lewy-blok-zmieniamy-kolor-do…
3.Zmieniamy tło górnego paska:
- testowo.pinger.pl/(…)3-lewy-blok-zmieniamy-tlo-gorn…
4.Zmieniamy kolor obramowania:
- testowo.pinger.pl/(…)4-lewy-blok-zmieniamy-kolor-ob…
5.Zmieniamy czcionkę NAJNOWSZE ZDJĘCIA:
- testowo.pinger.pl/(…)5-lewy-blok-zmieniamy-czcionke…
6.Zmieniamy czcionkę WSZYSTKIE:
- testowo.pinger.pl/(…)6-lewy-blok-zmieniamy-czcionke…
7.Przestawiamy blok na prawą stronę:
- testowo.pinger.pl/(…)7-lewy-blok-przestawiamy-blok-…
8.Ramki wokół zdjęć:
- testowo.pinger.pl/(…)8-lewy-blok-ramki-wokol-zdjec…

XVI.Poszerzamy Blog:

1.Poszerzamy Wpisy:
- testowo.pinger.pl/m/8569217/1-poszerzamy-wpisy
2.Poszerzamy Blok Wpisow:
- testowo.pinger.pl/m/8570055/2-poszerzamy-blok-wpisow
3.Poszerzamy Gorny Blok:
- testowo.pinger.pl/m/8570743/3-poszerzamy-gorny-blok
4.Poszerzamy Liczniki:
- testowo.pinger.pl/m/8570808/4-poszerzamy-liczniki

Pomoce:

1.Gdzie wstawiamy kod css:
- testowo.pinger.pl/(…)2-pomoc-gdzie-wklejamy-kod…
2.Obramowania:
- testowo.pinger.pl/m/3883816/2-pomoce-obramowania
3.Problemy z grafika:
- testowo.pinger.pl/(…)1-pomoc-problemy-z-grafika…
4.Kolory:
-testowo.pinger.pl/m/3889876/3-pomoce-kolory
5.Objaśnienia:
- testowo.pinger.pl/m/4319591/objasnienia
6.Zrób sobie Logo:
- testowo.pinger.pl/m/4380024/pomoce

*.Skrypty:

X.Gdzie wstawiamy Skrypty:
- testowo.pinger.pl/m/15393612/gdzie-wklejamy-skrypty
1.Padający śnieg:
- testowo.pinger.pl/m/4495453/1-skrypty-padajacy-snieg
2.Wstawiamy odtwarzacz na bloga:
- testowo.pinger.pl/(…)2-skrypty-wstawiamy-odtwarzacz…
3.Odtwarzacz na blogu-ustawienia:
- testowo.pinger.pl/(…)3-skrypty-odtwarzacz-na-blogu-…
4.Wstawiamy Sonde:
- testowo.pinger.pl/(…)4-skrypty-wstawiamy-sonde…

...
  • awatar minikurs: @AutreJa: Załóż darmowe konto na imageshack.us tam wrzuć swoje logo i skopiuj adres do niego oznaczony LINK BEZPOŚREDNI... Następnie ten link wklej do tego kodu: #logo, #adult_logo { background: url("klikaj.wen.ru/promeland2.jpg") no-repeat scroll 0 0 transparent; } a dokładnie usuń klikaj.wen.ru/promeland2.jpg i na jego miejsce wklej link do swojego loga...
  • awatar Marci+: ćoś mi nie działa ;(
  • awatar Marci+: @Testowo:nie chce mi działać a wpisałam wszystko dobrze pomurz proszę wejdź na mojego bloga i napisz czemu nie dziala ;(
Pokaż wszystkie (17) ›
 

 

Kategorie blogów