Hi. Przemyślałem że taki poradnik się przyda każdemu, nie będzie to taki obszerny ale takie pomniejsze rzeczy które myślę że zostaną wykorzystane by samemu sobie z edytować kod HTML. Wiele ludzi chce e-gotówkę za "zrobienie" kodu, czyli edycje kolorów czy dodanie kilku obrazków, teraz sam będziesz mógł to zrobić!
Temat z kodami HTML
https://net4game.com...-kodów-html-v2/
Zmiany general_box
W kodzie musi znaleźć frazę general_box h3, odpowiada ona za nagłówek nad: statystyki, narzędzia użytkownika , znajomy czy ostatnio tutaj byli. Podstawowy wygląda tak:
.general_box h3 {background-color: rgba(255,255,255,0.2);
Mała historia, w tych nawiasach rgba to kolor jaki ma mieć ta ramka, tutaj jest na przykład biały. Co oznacza to 0.2? Jest to jak przeźroczyste to jest, przykładowo damy kolor szary czyli 132, 132, 130 i 0.2
Widzimy że jest strasznie przeźroczyste, teraz zmieńmy to 0.2 na 0.9
Widać różnice? Widać.
-moz-border-radius-topright: 10px;-moz-border-radius-topleft: 10px;border-top-right-radius: 10px;border-top-left-radius: 10px;
Zastanawiacie się co to jest? Jest to wygląd, chodzi głównie o te boki, mamy takie pół kole jakby, zmieńmy to na 3px
Tym można się pobawić, śmiało.
Jak dodać zamiast koloru to obrazek? Prostsze niż wszystko, komenda tak wygląda:
.general_box h3 {background: url("LINK DO OBRAZKU");
Chcecie mieć te wszystkie napisy na środku? Chodzi o statystyki? Dodajcie na końcu general_box h3 to:
text-align:center;
Co z kolorem napisu? Prosta sprawa. Dodajemy go razu po dodaniu koloru lub obrazku ramki.
color: #ffffff;
Jak to wygląda? Tak.
Jeżeli chcemy jakieś jakieś świecące obramowanie wokół naszej ramki, to musimy dodać zaraz po nadaniu koloru to:
box-shadow: 0 0 2px 1px #000000;
Już objaśniam. Mamy tutaj 2px oraz 1px, są to jak mocno ma to "świecić", nie polecam tego zmieniać bo tak jest ładnie ale według uznania. To #000000 to nasz kolor rgba, tutaj dajemy jaki chcemy.
Dałem kolor fioletowy by wam pokazać jak to wygląda między innymi.
Tutaj wam ten cały kod dla zobrazowania
.general_box h3 {background: url("http://i.imgur.com/k6Ij9wn.png");color: #ffffff;box-shadow: 0 0 2px 1px #6B58A8;-moz-border-radius-topright: 10px;-moz-border-radius-topleft: 10px;border-top-right-radius: 10px;border-top-left-radius: 10px;text-align:center;}
Tło
Kilka osób pisało że chce wiedzieć jak się dodaję tło, więc proszę, oto komenda.
body {background: url('OBRAZEK') fixed no-repeat; background-size: 100% auto
Tłumaczę. Przód chyba nie trzeba, po prostu tam dajemy link obrazku, blah, blah. Skupmy się jednak na background-size: 100% auto. Jest to w ilu procentach ma wyglądać nasz obrazek, tutaj macie przykład 100%:
To zmieńmy to na 80%, co się stanie?
A co, jeśli chcemy mieć pośrodku obrazek? Przy fixed no-repeat dodajemy center center
body {background: url('OBRAZEK') fixed no-repeat center center; background-size: 80% auto
Powtarzające się? Czemu nie! Usuwamy no przy fixed no-repeat
body {background: url('OBRAZEK') fixed repeat center center; background-size: 80% auto
Przy fixed repeat możemy dopisać:
center center - wyśrodkowanie
right top - przesunięcie na prawą stronę
left top - przesunięcie na lewą stronę
Czcionka
Chcemy zmienić czcionkę? Bez problemy, kod dodajemy przy body, tam gdzie tło.
;color: #DDD; font-family: Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; text-shadow: 0.1em 0.1em 0.2em black, 0.1em 0.1em 0.2em black;}
Krótkie objaśnienie:
font-family to wiadomo że nazwa czcionki, możemy zmienić czcionkę na jaką chcemy.
font-weight: 300 tutaj zmienimy pogrubienie tekstu w profilu, zmieniając wartość na 700 przykładowo, mamy grubsze.
text-shadow tym podświetlimy napisy, możecie się tym pobawić.
Cały kod wraz już z tłem oraz czcionką
body {background: url('http://i.imgur.com/g63vA3P.jpg') fixed repeat center center; background-size: 100% auto;color: #DDD; font-family: Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; text-shadow: 0.1em 0.1em 0.2em black, 0.1em 0.1em 0.2em black;}
Avatar
Zapewne wielu zastanawia się jak zmienić kształt avataru, na przykład na kółko? Patrz niżej!
Ogólny kod to;
.ipsUserPhoto {border-top-left-radius:45px;border-bottom-right-radius:45px;border-top-right-radius:45px;border-bottom-left-radius:45px;box-shadow: 0px 0px 1px 1px #000000;}
Małe objaśnienie;
border-top-left-radius:45px;border-bottom-right-radius:45px;border-top-right-radius:45px;border-bottom-left-radius:45px
Jak ktoś zna mniej więcej trochę angielskiego, to wie że każda linijka odpowiada każdemu boku, tak wygląda to przy 45px
Tutaj możemy się dobrowolnie bawić i ustawiać różne wartości.
box-shadow: 0px 0px 1px 1px #000000
Jest to ta obramówka, z czego pierwsze dwie zawsze zostawcie na 0.
Trzecia liczba odpowiada natomiast za średnica cenia, w tym przypadku koloru czarnego. Ustawiając ją na 20, uzyskamy taki efekt;
Tutaj według uznania, jednak trzeba uważać bo rubryki znajomi oraz ostatnio byli też się zmieniają;
(to przy 20px)
Czwarta i ostatnia liczba, odpowiada za grubość naszego cienia. Ustawmy go na przykład na 10px
Uzyskamy owy efekt, więc trzeba uważnie by nie wyszło to, no strasznie.
#000000 - jest to kolor naszego cienia, tutaj można się pobawić i jaki Ci się podoba ustawić.
Wartości;
80px, 80px, 80px, 80px - avatar w kształcie kółka.
Małe porady!
Wiele osób dziwi się dlaczego nie działa im obrazek zamiast skinu postaci, mimo wszystko często to jest wasz błąd. Jeżeli chcecie wkładać obrazek, musicie skopiować adres obrazku, pokaże to na imgur.com.
Klikamy prawym i kopiuj adres obrazku, ten oto adres dopiero wklejamy w kod!
Strona do kolorów rgba polecam http://www.color-hex.com/
Temat będzie z czasem aktualizowany, piszcie błędy czy co byście chcieli wiedzieć.
Użytkownik Vernon edytował ten post 12/01/2018 - 10:50
. Zielony poleciał.
