Heliosanctus's Testing Wiki
Advertisement

This page is currently being revamped. Please be patient.

Here are my formats! Feel free to mess around with these however you like; just make sure you keep my credit somewhere. If you don't see exactly what you want here, you can send me a code request here or check out other people's formats. If anything gets messed up and/or you need help, please contact me. I'll add notices for any harder codes.

If you leave a comment on this page, please tag me by adding @Moonwatcher908 so I can reply to it sooner!

Note: Please do not save the page after clicking edit. It could potentially mess up the codes. (I can go back and undo any edits if you accidentally click save, but I just want to put the disclaimer out there to prevent this from happening.)

Here are some sites I use to get my colors:
ColorHexa - This has a huge database of colors in hex and rgba format, which I use for my codes!
Image Color Picker - You can upload any photo here and get all the color codes. This is useful for image backgrounds!

If you want to learn how to code image backgrounds on your own, check out Himmalerin's Image Coding Guide!


Simple Color & Pattern Backgrounds[]

Here are some codes I most recommend if you're still new to coding. They utilize CSS Patterns, basic colors, and gradients. They can help you get a basic understanding of how color codes actually work. For example, white can be represented in code as:

  • white
  • #ffffff
    • or the abbreviated form #fff
  • rgba(255,255,255,1)

Let's try making a white background with black text.

<div style="background:white; color:black;">text here</div>

This will give us:

text here

All the colors that you can use keywords for include: white, black, gray, lightgray, darkgray, brown, red, darkred (or maroon), orange, darkorange, yellow, lightyellow, green, lightgreen, darkgreen, lime, cyan, teal, turquoise, blue, lightblue, darkblue (or navy), indigo, purple (or darkmagenta), magenta, violet, darkviolet, pink, hotpink, lavender, and beige. (I hope I didn't forget any!)

RGBA comp

The RGBA scale

In my codes, I typically represent colors in RGBA or HEX format. Hexes would be anything like #e75480 or #008000. They are called "hexes" because they always have 6 digits; this can be any number from 0 to 9 and any letter from A to F. To find hexes, I suggest using ColorHexa, which is listed in the introduction of this page.

RGBA stands for Red-Green-Blue-Alpha. The "alpha" is what determines the opacity of the color. Let's say you want to create a magenta background with cyan text. (Warning: It's bright!) Here's what the code would look like:

<div style="background:rgba(255,0,255,1); color:rgba(0,255,255,1);">text here</div>

This how it would turn out:

text here

But we can also make the background semi-transparent! This will be represented as a decimal in the fourth digit of the color code. For example, 0.5 = 50%, 0 = 0%, and 1 = 100%. We'll make the background 50% transparent.

<div style="background:rgba(255,0,255,0.5); color:rgba(0,255,255,1);">text here</div>
text here

For more coding advice, please check out the Wings of Fire Fanon Wiki Coding Guide!

-

Seafoam[]

Placeholder
NAME

Write a little intro for your character here. Try to keep it aligned with the photo. Filler text filler text filler texr filler text filler text.

Character created by Username. Coding by Moonwatcher908. Reference by Artist.
Name
Blanktransparent
Background
Creator Username
Attribute text
Element text
Animal text
Color text
Song
MBTI text
Character
Age text
Pronouns text
Gender text
Orientation text
Tribe text
Occupation text
Likes text
Dislikes text
Abilities text


APPEARANCE

text here


PERSONALITY

text here


ABILITIES & WEAKNESSES

text here


HISTORY

text here


RELATIONSHIPS

NAME - status/relation
text here


TRIVIA
  • fact


GALLERY

Forest[]

Placeholder
NAME

Write a little intro for your character here. Try to keep it aligned with the photo. Filler text filler text filler texr filler text filler text.

Character created by Username. Coding by Moonwatcher908. Reference by Artist.
Name
Blanktransparent
Background
Creator Username
Attribute text
Element text
Animal text
Color text
Song
MBTI text
Character
Age text
Pronouns text
Gender text
Orientation text
Tribe text
Occupation text
Likes text
Dislikes text
Abilities text


APPEARANCE

text here


PERSONALITY

text here


ABILITIES & WEAKNESSES

text here


HISTORY

text here


RELATIONSHIPS

NAME - status/relation
text here


TRIVIA
  • fact


GALLERY

Intermediate Stuff[]

Colorful Boxes[]

This code is very outdated so I don't suggest using it. I may fix it in the future, but for now it will remain (somewhat) broken. The reason I haven't just deleted it is because it took absolutely forever to make.

N A M E


Character belongs to Your Username. Do not steal them or any of the content from this page. Coding by Moonwatcher908.

write a little intro here ... filler text ... filler text ... WHO LIVES WHO DIES WHO TELLS YOUR STORY ... sorry i'm listening to hamilton

Blanktransparent

Name | pronouns;
Zodiac - MBTI - Occupation

A P P E A R A N C E


why hello there, this box's margins are a bit messed up, don't look at the code with the sidebar hidden :')

this box scrolls #slay

age scrolly infobox! add more rows if you like
gender text
orientation text
tribe text
hobbies text
likes text
dislikes text
family text

P E R S O N A L I T Y


another scroll box!

A B I L I T I E S


text hereeeeee

H I S T O R Y


text hereeeeee

R E L A T I O N S H I P S


| NAME.
relationship status.
write a little paragraph here

T R I V I A


  • this has two columns that scroll.
  • text

G A L L E R Y


Placeholder
for reference; by artist. click the image to see the gallery.

Pink Mania[]

Pinka
N A M E


timeline | pronouns | nickname | tribe | occupation
<insert reference here>
This character belongs to Username. Please do not use any content from this page without permission. Thank you. (Note that this code CAN be adapted for use with image backgrounds, though you will most likely have to set a STATIC WIDTH.)

Coding by Moonwatcher.

write a little introduction here

N A M E
Blanktransparent
creator Your Username
coder Moonwatcher908
song name - artist
mbti text
age text
gender & pronouns text
orientation text
sun sign text
tribe text
occupation text
hobbies text
family text

idea by my grandma! feel free to change the colors.

Pinka
A P P E A R A N C E

write about your character's appearance here

this is filler text

this is filler text

lyrics. please keep it one line!

Pinka
P E R S O N A L I T Y

write about your character's personality here

this is filler text

this is filler text

lyrics

Pinka
A B I L I T I E S

write about your character's powers and abilities here

this is filler text

this is filler text

lyrics

Pinka
H I S T O R Y

write your character's very tragic backstory here

this is filler text

this is filler text

lyrics

Pinka
R E L A T I O N S H I P S

N A M E
relationship status.
write about your character's relationship with this dragon here, keep it one paragraph if possible

lyrics

Pinka
T R I V I A
  • blah blah blah trivia stuff

thanks for using my format!

Pinka
G A L L E R Y

Image Backgrounds[]

Compact Card[]

Also originally from an OC! Mess around with the background photo and colors however you like. The margins are really easy to get messed up; I'll help if things go haywire!

Moondusk-Code-Background
creator Your Username
coder Moonwatcher908
playlist
aesthetic text
color text
tribe text
gender & pronouns text
orientation text
sun sign text
job text
hobbies text
family text

name

"Put a quote here if you like." -Alexander Hamilton

Character © Your Username, do not use without permission. Credit: Himmalerin's Image Coding Guide, Moonwatcher908's Free Formats.

please keep this
four lines
so the format
doesn't get messed up!

appearance

text here

lyrics
lyrics
lyrics
lyrics

personality

text here

lyrics
lyrics
lyrics
lyrics

abilities & weaknesses

text here

i wanna be the very best
like no one ever was
to catch pokemon is my real test
to train them is my cause

history

text here

ti would travel across the land
searching far and wide
it's pokemon to understand
the power that's inside

relationships

text here

lyrics
lyrics
lyrics
lyrics

trivia

  • text here
  • slay the day away

lyrics
lyrics
lyrics
lyrics

gallery

< ref here 300px, center aligned >
for reference! by artist

Tall & Elegant[]

Pink nyc bg
Blanktransparent
BACKGROUND
Creator Mistfire
Coder Moonwatcher
Artist text
Attribute text
Element text
Animal text
Color text
Song - Song - Artist
CHARACTER
Age #DYS / #HYS
Gender & Pronouns text
Orientation text
Occupation text
Tribe text
Goal text
Residence text
Likes text
Dislikes text
NAME
APPEARANCE

text here

PERSONALITY

text here

ABILITIES&
WEAKNESSES

text here

HISTORY

text here

RELATIONSHIPS

NAME - status
text here

TRIVIA

  • text here
GALLERY

User Profile[]

Since my profile codes have become super popular, I'm making it a format for anyone who wants to mess around with it themself! Note: You'll have to mess around with margins and stuff for the background photo to be aligned. I wouldn't recommend this to a beginner.

Twinkle-Background
SuperCoolUsername123

pro/nouns • fact • fact • fact • idk whatever people put on their profiles • wikiversary •

Hello, I'm [insert name here]! My occupation is stealing Mike Dirnt's guitar picks and I enjoy eating cheese. I live in the sewers under the Empire State Building with my rat friends. This is filler text. Coding by Moonwatcher908.

interests

books: I like to read books about pottery, crocheting, and exorcism. My parents are very concerned for me. Filler text.

movies & tv: Dinosaur Train is the GOAT. Filler text.

music: I listen to a nice mix of Christian country and death metal. Filler text.

hobbies: LifeAlert prank caller. Filler text.

other stuff

put whatever you want here!


Miscellaneous[]

Pride Flag Gradients[]

Here are some base gradients with the colors of various pride flags! These serve the same purpose as the free CSS Patterns. If you want me to add another flag, just ask!

LGBTQ+
Lesbian
Gay
Bisexual
Transgender
Pansexual
Nonbinary
Asexual
Aromantic
Aroace
Genderfluid
Intersex
Demiboy
Demigirl
Advertisement