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.
Co można ustawić w każdym okienku?
Screen: "Aura Smoka", "Świecący Smok" - efekt w IE oraz poprawnie uzupełnione okienko.
BODY
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"!
th, td,p
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ół.
a:link,a:active,a:visited
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!
a:hover
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"!
.form (styl formularzy)
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.