The complete guide to Peachy the Fawn (profile pet)

Peachy is a little CSS-only virtual pet built to be customized for any profile. There's no JavaScript, and the setup is simple, promise!
Her's a step by step guide to customizing Peachy into any character you want!

🦌 Step 1: how peachy works

Peachy has four different states:
• sleeping - default state
• awake - after being pet
• eating - after being fed
• playing - running animation

Every state is its own '' with an ID. When someone clicks a button, the page's URL fragment changes, and CSS decides which state becomes visible.

For example, this takes the visitor to the element with 'id="deer-eating"':


Feed


The CSS then makes that state visible:

.deer-state:target {
display:block;
}

🦌 Step 2: Replace the pet images

Find every occurrence of:



Replace 'IMAGE_URL' with a direct image or GIF link for the new pet!

It's important you use transparent PNGs and GIFs so that the pet can sit inside any background or decorative frame.

🦌 Step 3: Change the name and dialogue

Find this and change the text to whatever name you'd like:


peachy the fawn


You can also customize the messages for each state:

munch munch crunch crunch

Change that to whatever suits your character!

🦌Step 4: Customize the appearance

A little list of what changes what:

.deer-pet - Outer background, frame, and overall width
.deer-title - name size and color
.deer-divider - decorative horizontal dividers
.deer-nest - size of the pet's display area
.deer-nest::before - background behind the pet
.deer-nest::after - decorative overlay around the pet
.deer-image -pet image dimensions
.deer-button - button appearance
.deer-status - dialogue appearance
.deer-running-image - running GIF size and animation

For example, to make the widget pink instead of brown, change:

background-color:#432818;

to:

background-color:#F5B5C8;

You can also replace the background images with your own designs. If you remove a decorative overlay, set its `background-image` to `none`.

🦌 Step 5: Change the pet's size

The pet's image is currently 155 × 155 pixels.

.deer-image {
width:155px;
height:155px;
}

You can change both numbers to 180px for a larger pet or 120px for a smaller one!

The surrounding nest is 240 × 240 pixels. Increase that too if your pet needs more room!

For the running state, the image size is controlled separately under .deer-running-image.

🦌Final Thoughts 🦌

If you're just starting out, this might be a bit overwhelming, or maybe even intimidating. It's really a beginner friendly project, but I want to remind you to take breaks and do planty of tests.

Start by changing just the four pet images and the name. Once that works, customize the frame, buttons, colors, and dialogue one at a time. That makes troubleshooting much easier, especially with Kwenk's automatic CSS formatting.

Good luck, happy customizing!!
- Elad 🐢