Forum FTB.pl / Jak ubarwić profil - style CSS. Poradnik!

Wortal i Forum
klubowicz
At_Love 4 listopada 2008, godz. 13:16
Witam!

Od niedawna mamy możliwość dowolnej edycji swojego profilu dzięki wprowadzeniu edycji za pomocą języka CSS!
Jednak pomimo wielu tutoriali na różnych stronach i forach internetowych dla większości z nas jest to dość duży problem!
Dlatego pokrótce postanowiłem opisać poszczególne rzeczy, które należy zrobić aby uzyskać swój jedyny i niepowtarzalny wygląd profilu!

Dla przykładu posłóżę się wyglądem mojego profilu:

http://www.ftb.pl/klubowicze/116203

Na wygląd ogólny składają się 2 czynniki takie jak TŁO oraz wypełnienie środka strony!

Tło

http://img512.imageshack.us/img512/3337/d2jv3[...]

Nominalny i zalecany rozmiar to 1680 x 910 pikseli
Osoby z dużą rozdzielczością wyświetlania będą widzieć cały obraz a osobom z mniejszą rozdzielczością pojawi sie tyle ile przeglądarka jest w stanie wyświetlić!

Wzór tła składającego się z 2 części znajduje się na dole strony!

Wypełnienie

http://img389.imageshack.us/img389/4805/bezty[...]

Rozmiar mojego wypełnienia to 990 x 330 px, gdzie 990 to szerokość calego pola! Obraz może być mniejszy lub większy ale wtedy przy mniejszym będziemy musieli zastosować funkcję powielania ( poziome lub pionowe tak jak u mnie ) a przy większym obrazie musimy się liczyć z tym że obraz nie zosanie w całości wyświetlony!!!

Zalecam zmniejszenie przeźroczystości obrazu na ok 20-30% ponieważ gdy wrzucimy normalny obraz/zdjęcie wtedy czcionka z tekstem zawartym w profilu gdzieś zmyje się z całością co spowoduje że profil stanie się nieczytelny!!!
________________________________________


Zatem do dzieła!!!

Body:

body {margin-top: 150px;background-image: url('http://twój_serwer_z_obrazem.jpg'); background-repeat: no-repeat; background-position: center top; background-color:#013100; background-attachment: fixed;}


Opis:
Maggin-top - margines górny (odstęp od górnej części przeglądarki do początku srony (logo ftb))
Background-image - twoje tło
background-repeat - powtarzanie/powielanie się obrazka zarówno w pionie jak i w poziomie, bądz stałe! Przykłady:
-Background-repeat: repeat-x - obrazek powtarza się w poziomie
http://pl.html.net/tutorials/css/lesson3_ex4.[...]
-Background-repeat: repeat-y - obrazek powtarza się w pionie
http://pl.html.net/tutorials/css/lesson3_ex5.[...]
-Background-repeat: repeat - obrazek powtarza się w pionie i w poziomie
http://pl.html.net/tutorials/css/lesson3_ex6.[...]
-Background-repeat: no-repeat - obrazek nie powtarza się
http://pl.html.net/tutorials/css/lesson3_ex7.[...]

background-color - kolor pod tłem, zanim wczyta nam się obrazek wyświetli się nam dany kolor tła! Zmiany kolorów można wprowadzać kodem danego koloru bądz też nazwami angielskimi np:

background-color:#013100 - kolor ciemno zielony wyrażony kodem (każdy kolor ma swój 6 cyfrowo-liczbowy kod, sprawdzić można w np: adobe photoshop)
background-color:red - wartość koloru wyrażona słownie w anglojęzycznej postaci np: yellow, green, red, black, white itp.

Background-attachment - możliwość zatrzymania, bądz też przewijania obrazu wraz ze stroną!

Przyklad:
Background-attachment: scroll - obrazek przewija się razem ze stroną (zaleca się umieszczenie przejscia koloru dołem obrazka na taki jaki mamy zawarty w background color,da nam to efekt ładnego przejscia)
http://pl.html.net/tutorials/css/lesson3_ex8.[...]
Background-attachment: fixed - obrazek zablokowany, przewijamy tylko zawartość strony!
http://pl.html.net/tutorials/css/lesson3_ex9.[...]

__________________________________________________

Po krótce to tyle jeśli chodzi o tło pod zawartością strony! Przejdźmy teraz do zmiany tła wewnątrz strony:
http://www.ftb.pl/klubowicze/116203

Obraz: http://img389.imageshack.us/img389/4805/bezty[...]

kod:
#main-b {background-image: url('twój_obraz.jpg'); background-repeat: repeat; background-position: left bottom; }
zadada działania kodów taka sama! Zaleca się umieszczenie obrazu w dowolnej rozdzielczośći lecz mniejszej niż 990 pikseli ponieważ pozostała część obrazu zostanie ucięta! W przypadku zastosowania obrazu o mniejszej rozdzielczości np 100x100 px należy umiescic komende powtarzania obrazu w pionie i poziomie!
ZALECA SIĘ UMIESZCZENIE OBRAZU O PRZEŹROCZYSTOŚCI MNIEJSZEJ NIŻ 30% PONIEWAŻ ZAWARTOŚĆ SERWISU (TEKST) ZLEJE SIĘ Z OBRAZEM I STANIE SIĘ NIEWIDOCZNY!

Opis oparty na przykładowym wyglądzie mojego profilu!
Funkcji zastosowan css jest niezliczona ilość!
_____________________________________________


TŁO SKŁADAJĄCE SIĘ Z 2 CZĘŚCI

Przykład gotowego profilu: http://www.ftb.pl/klubowicze/1

#tloo { background-image:
url('twój_obraz_góra.jpg');
background-repeat: no-repeat; background-position: left top}

body {background-color:#51a4d0;background-image:
url('twój_obraz_dół.jpg');
background-repeat: no-repeat; background-position: left bottom}


obrazy Góra ( tło 1 )
http://img65.imageshack.us/img65/9399/graic2.[...]

Dół ( tło 2 )
http://img126.imageshack.us/img126/5311/70900[...]

Przykłady:

Maxymalna rozpiętość strony np. widok ogólny profilu:
http://img99.imageshack.us/img99/9600/zawarto[...]

Rozpiętość zmniejszona np. w księdze gości
http://img146.imageshack.us/img146/4853/zawar[...]

co do tła wewnątrz strony, kod pozostaje niezmieniony!

Obrazy bądź też kolory możemy podkładać pod dowolny element w naszych profilach np. szata graficzna oceny klubowicza itp.
Wieczorem ładnie rozpisze nazewnictwo kazdych elementów i na kilku przykładach pokażę jak można samemu to zrobić! Dla większośći jest taka sama zasada, ponieważ zmieniany pozostaje tylko obraz lub sam kolor!

_________________________________________
co do edytora graficznego to polecam PhotoFiltre, bardzo łatwy w obsłudze program dzięki któremu zmienimy chociażby rozdzielczość! Program jest darmowy w podstawowej wersji!Zalecam sciągnięcie i instalację spolszczenia!

http://www.programosy.pl/program,photofiltre.[...]

waga programu to ok 10mb ( nie pamiętam dokładnie ale przecież to niewiele)

_________________________________________

zmiana koloru i rodzaju czcionek w trakcie przygotowań ponieważ jak ktoś ustawi sobie bardzo ciemne tło to wiadomo że biała czcionka będzie jak znalazł;)

Dla bardziej ambitnych i chcących samodzielnie zrobić coś więcej:
http://pl.html.net/tutorials/css/

Osoby które mają już jakieś pojęcie o css zachęcam do umieszczania postów z informacjami co i jak!
Nie odpowiadam na wiadomości prywatne, pytania proszę kierować tylko i wyłącznie na forum!!!

Pozdrawiam!

Dla mniej zaawansowanych użytkowników wyżej podałem link do strony z darmowym programem w którym mozemy się pobawić w stworzenie własnej grafiki!

_____________________________________________________
ZMIANA KOLORU CZCIONKI W PROFILU
_____________________________________________________

Obiecałem już dawno rozpiskę danych elementów ale w związku z licznymi pytaniami robię to teraz!

Poniżej mamy rozpisane kolejne elementy telstowe naszego profilu których kolor możemy zmienić!
Kolory wpisujemy identycznie jak w przypadku tła czy też wypełnienia, czyli w postaci anglojęzycznej lub kodów, dla unikalnych kolorów.

red ; blue ; yellow ; black ; white ; pink ; green ; brown ; etc.

Myślę, że tłumaczyć nie muszę:)
Ok, zatem do rzeczy!

a:visited {color:xxx}
a:link {color:xxx}
a:visited.u {color:xxx}
a:link.u {color:xxx}

Są to: Kolor czcionki menu, linki zamieszczone w naszym profilu, nicki osób które wpisały się do księgi, nicki naszych znajomych

#top {color:xxx;}
#footer p.copy {color:xxx}
#footer p.designed {color:xxx}
#linkistopka a:link{color:xxx;text-decoration:none;}


top-napis nad logiem ftb.pl oraz wyszukiwarka
foorer p.copy - prawa autorskie ftb.pl na dole strony
footer p.designed - prawy dół strony, informacja o projektancie
linkistopka a:link - dół strony, linki dla informacji prasowych, polityki prywatności, regulaminu, etc.

(GDZIE xxx UMIESZCZAMY NAZWĘ KOLORU)

Poniżej link do screenu z prowizorycznym zaznaczeniem nazw!

http://img180.imageshack.us/img180/1424/ftb.j[...]

CDN, Pozdrawiam!


klubowicz
Pilot(TKD) 4 listopada 2008, godz. 14:11
dzieki ze to napisałes :) naprawde
Trance Is Me Life
webmaster
M@rkee 4 listopada 2008, godz. 14:22
Temat przeniesiony do wlasciwego dzialu i przyklejony.
Dzieki! Ktos zrobil to na co ja nie znalazlem czasu :)
Yo ma mana...
klubowicz
Czekoladka:) 4 listopada 2008, godz. 14:29
hehe:) fajnie że powstał:)
Trance:)Trance:)Trance
wspomnienia... do nich zawsze można powrócić:):)
klubowicz
Germann 4 listopada 2008, godz. 14:41
no to w końcu można sie pobawic i profilek odpicowac :)
,,Wspomnienia to najważniejsze co nam pozostaje :) :) :)
klubowicz
Igor Warzocha 4 listopada 2008, godz. 15:23
dzieki wielkie, na pewno sie przyda a moze i posłuży jako cwiczenie w cssie ;)
klubowicz
HOOBIE 4 listopada 2008, godz. 15:38
Świetny pomysł z tym tematem :)
klubowicz
andy.kolejorz 7 listopada 2008, godz. 20:15
No to może ja dorzucę swoje 5 groszy (na początku mały wstęp teoretyczny na koniec praktyczne zakończenie).

Napewno dla wielu z was problemem jest znalezieniem odpowiedniego selektora do css-a. Co to jest selektor http://www.htmlhelp.shl.pl/css/selektory/inde[...]

I teraz krótki kurs:
jeżeli w HTML-u mamy jakiś obiekt który ma ID np.
<div id="ocena_naglowek">Ocena klubowicza</div>

to w CSS-ie dajemy:
#ocena_naglowek{
background-color:#ccc; /*dla przykładu ustawiamy szare tło*/
}
-- i tak w przypadku każdego elementu który posiada ID

Jeżeli jakiś obiekt jest oznaczony przez klasę (class) np.
<ul class="menu">

to w CSS dajemy:

.menu{
}

Klasa różni się tym od ID, że w HTML-u może być tylko jeden element o danym ID a w przypadku klasy może być ich kilka. W CSS-ie ID oznaczamy poprzez dodanie przed jej nazwą znaki # a klasę poprzez dodanie . (kropki) przed nazwą.

Myślę, że klasy i ID są najbardziej wykorzystywane w tym aby zmienić wygląd profilu. Po resztę selektorów odsyłam do kursów.

I teraz najważniejsze!! Jak poszukać szybko i łatwo odpowiedni element HTML w długim kodzie HTML który ma nie mało bo 500lini w przypadku profili ?? Można iść na piechotę i kliknąć prawym przyciskiem myszy na stronie, wybrać z menu pokaż źródło i przeglądać tego HTML-a w poszukaniu jakiejś tekstu który widać na stronie. Ale jest coś takiego jak firebug czyli wtyczka do Firefoxa, która nam wiele pomoże.

Oto adres: http://getfirebug.com/

I teraz mając firebuga najeżdżamy myszka na jakiś element na stronie a na dole nam się pokazuje gdzie on się znajduje w kodzie HTML a po prawej widzimy jaki jest ustawiony styl CSS do tego elementu. I wystarczy z tej prawej strony skopiować tego CSS-a i zmienić go wg swojego uznania i wstawić na stronę ftb.pl.

<serce>..::Trance::..<serce><serce>..::Events::..<serce>
klubowicz
Bojas 1 lutego 2009, godz. 12:38
Witam... moze sie to wydawac banalne ale ja sobie nie moge z tym poradzic. jak ustawić ta tabelke z ocena klubowicza i gatunkami muzyki tak zeby byla przezroczysta?
Gdyby Chopin mial syntezator, grał by trance!
klubowicz
Vidmo 10 lutego 2009, godz. 20:05
Bardzo wielkie dzieki za ta pomoc :)
- Dance4Life
- Moscow never sleeps!
klubowicz
At_Love 19 czerwca 2009, godz. 13:52
walczyłem z przeźroczystością dłuuuugo ale bez rezultatów! możliwe że ktoś to rozpracował!
klubowicz
andy.kolejorz 19 czerwca 2009, godz. 14:56
O to chodzi z tym przezroczystym polem do ocen ??

#ocena_naglowek,
#ocena_punkty {
border-bottom:none;
}

#ocena_naglowek,
#ocena_punkty,
#ocena_ocen,
#klubowicz_ocena,
#prawa_kolumna{
background-color:transparent!important;
background-image:none!important;

}
<serce>..::Trance::..<serce><serce>..::Events::..<serce>
klubowicz
M.I.X.E.R. 19 czerwca 2009, godz. 15:14
chodzi o coś takiego jak u mnie, czy żeby w ogóle nie było widać białego tła a tylko same napisy na background-image?
klubowicz
At_Love 25 czerwca 2009, godz. 21:33
ty masz przeźroczystość całego okna w środku! mi konkretnie rozchodzi się o to żeby kolor np pod napisem ocena klubowicza był przeźroczysty! teraz mam zielony a nie chce mi się bawić w to żeby zastąpić kolor zielony osobnym obrazkiem takim samym jak mam pod spodem

edit
a te reklamy was nie denerwują w profilach?
Górną jakoś udało mi się wyłączyć ale tej pod menu już nie
klubowicz
M.I.X.E.R. 25 czerwca 2009, godz. 22:04
jak zrobić przezroczystość całego okna na 100% ale żeby cała zawartość tj napisy, znajomi wszystkie ikony itp nie były w ogóle przezroczyste?

24 wpisy

12następne