O ramce
Smocza ramka to małe okienko, w którym znajdują się podstawowe informacje o chowańcu. Można ją umieścić na swojej stronie internetowej lub blogu poprzez wklejenie odpowiedniego kodu, podanego w dziale Szczegóły - Kod Ramki.W grze można zobaczyć ramki swoich wszystkich smoków w zakładce Przeglądaj lub w swoim profilu - wystarczy kliknąć imię danego chowańca, a ramka otworzy się w nowym oknie.
Wymiary ramki
Wymiary ramki to około 370x470px.Jednak aby tło nie było ucięte w komentarzach, zaleca się wymiary około 550x550px.
Edycja ramki
Poradnik dla bardziej zaawansowanych użytkowników autorstwa vangoga: http://acoto.bb4u.pl/temat-vt21.html.Aby zmienić wygląd ramki chowańca, należy przejść w szczegóły danego smoka (kliknąć w imię smoka pod informacją o ilości smoków oraz miejsc na nie, jaką się posiada lub przez zakładkę Przeglądaj), a następnie wejść w Ustawienia ramki.
Prosta edycja
Dla osób, które nie znają się na kodach CSS lub nie chce im się z nimi męczyć, stworzono prostą edycję ramki. Aby z niej skorzystać, należy kliknąć przycisk "*", który znajduje się obok napisu "Ustawienia ramki" w zakładce "Przeglądaj" lub wejść w Ustawienia ramki, a następnie przejść do trybu prostej edycji.
Możliwości w prostej edycji ramki:
- 1. Zmiana koloru oraz rodzaju czcionki w całej ramce.
- 2. Zmiana koloru imienia smoka.
- 3. Ustawienie jednolitego koloru tła lub wstawienie w tło obrazka.
- 4. Zmiana koloru linków oraz linków aktywnych.
- 5. Ustawienie efektów specjalnych:
- - cienia do tekstu w całej ramce,
- - odwrócenie smoka.
Zaawansowana edycja
| |
| Kod | Efekt/Uwagi |
|---|---|
| color: #6F82C7; | Zmienia kolor nawiasów w Menu ramki. |
| font-size: 10px; | Zmienia rozmiar czcionki w Menu ramki. |
| font-family: Verdana; | Zmienia czcionkę w Menu ramki. Aby dana czcionka działała w ramce, trzeba ją mieć zainstalowaną w komputerze! |
| background-color: #000000; | Zmienia kolor tła w ramce. |
| background-image:url('link do obrazka'); | Ustawia obrazek jako tło w ramce. Wpisujemy zamiast "background-color:"! |
| background-attachment: fixed; | Sprawia, aby tło w ramce było nieruchome. |
| background-position: 0% top; | Pozwala na zmianę kadru obrazka w poziomie (w zależności od podanej liczby procent). |
| cursor: url('link do obrazka - kursora'), default; | Zmienia kursor w ramce. Aby kursor działał w całej ramce, należy go też ustawić w okienku "a:hover"! |
| |
| Kod | Efekt/Uwagi |
|---|---|
| color: #6F82C7; | Zmienia kolor czcionki w całej ramce. |
| font-size: 10px; | Zmienia rozmiar czcionki w całej ramce. |
| font-family: Verdana; | Zmienia czcionkę w całej ramce. Aby dana czcionka działała w ramce, trzeba ją mieć zainstalowaną w komputerze! |
| text-shadow: 0px -1px 2px #000000; | Dodaje cień do liter w całej ramce. Gdy dwie pierwsze cyfry będą ujemne, cień przesunie się w lewo i górę, zamiast prawo i dół. |
| |
| Kod | Efekt/Uwagi |
|---|---|
| color: #8FA2E7; | Zmienia kolor linków w ramce (Nicki, Menu). |
| text-decoration : none; | Ozdabia linki w ramce (underline - podkreślenie; overline - linia nad linkiem; blink - miganie). |
| }img{filter: FlipH Glow (Color=mediumblue) | Ustawia "Aurę Smoka", "Świecącego Smoka" Opcja działa [nie zawsze] tylko w przeglądarce Internet Explorer! |
| |
| Kod | Efekt/Uwagi |
|---|---|
| color : #4F62A7; | Zmienia kolor linka po najechaniu na niego kursorem. |
| text-decoration : none; | Ozdabia link po najechaniu na niego kursorem (underline - podkreślenie; overline - linia nad linkiem; blink - miganie). |
| background:url('link do obrazka') no-repeat left top; padding-left: 20px; | Po najechaniu kursorem na link, ozdabia jego tło obrazkiem. |
| cursor: url('link do obrazka - kursora'), default; | Zmienia kursor w całej ramce. Kod musi być też ustawiony w okienku "BODY"! |
| |
| Kod | Efekt/Uwagi |
|---|---|
| border-style: solid; | Zmienia wygląd ramek przycisków oraz formularzy (wpisywanie komentarza, uzupełnianie opisu smoka, wpisywanie hasła karmienia; hidden - schowanie ramki, dotted - kropki, dashed - przerywana linia, double - podwójna linia, inset - linia wklęsła, outset - linia wypukła groove - linia wklęsła przestrzenna, ridge - linia wypukła przestrzenna). |
| border-width: 1px 1px 1px 1px; | Zmienia rozmiar poszczególnych krawędzi ramek przycisków oraz formularzy (w kolejności: górna, prawa, dolna, lewa). |
| background-color: #282E45; | Zmienia kolor przycisków oraz tła formularzy. Aby tło było przezroczyste, zamiast kodu koloru (#282E45) należy wpisać transparent. |
| background-image:url('link do obrazka'); | Ustawia obrazek jako tło przycisków oraz formularzy. Wpisujemy zamiast "background-color:"! |
| color: #6F82C7; | Zmienia kolor czcionki w przyciskach oraz formularzach. |
| border-color: #000000; | Zmienia kolor ramek przycisków oraz formularzy. |
| font-family: Verdana; | Zmienia czcionkę w przyciskach oraz formularzach. Aby dana czcionka działała w ramce, trzeba ją mieć zainstalowaną w komputerze! |
| font-size: 10px; | Zmienia rozmiar czcionki w przyciskach oraz formularzach. |
Strony z tabelami kolorów:
- http://www.w3schools.com/tags/ref_colorpicker.asp
- http://html-color-codes.com/
- http://www.statom.pl/HTML/kolory.html
Obrazek w ramce
Należy pamiętać, że:- Trzeba użyć bezpośredniego linka do obrazka, tj. zakończonego na .png, .gif, .jpg, itp. Linki do stron, na których znajdują się obrazki nie zadziałają.
- Obrazek musi znajdować się w sieci, a nie we własnym (lub rodziców, brata bądź kogokolwiek innego) komputerze.
Skąd wziąć obrazek?
Obrazek może być znaleziony w sieci, można go też wykonać samemu i samodzielnie go umieścić w sieci dzięki darmowym stronom służącym do hostingu (czyli udostępnianiu serwera wirtualnego) grafik, np.:Skąd wziąć link do obrazka znalezionego w Internecie?
W przeglądarce Internet Explorer należy kliknąć na obrazku prawym przyciskiem myszy i wybrać Właściwości - w oknie, które się otworzy będzie podany adres URL.W innych programach jest to znacznie prostsze - w Mozilli Firefox oraz Operze wystarczy bezpośrednio wybrać Kopiuj adres obrazka, zaś w Google Chrome Kopiuj adres URL grafiki.
Brak komentarzy:
Prześlij komentarz