Killing Heart♡Darling!

a beginner's guide to customising your neocities site ♡

♡ table of contents ♡

What files does this site have & what do they do?
Free Neocities - what can you upload?
How to edit files on Neocities
Changing text across the site
Adding & changing images
Editing the home page (index.html)
Updating the Art Gallery
Updating the Media / Diary page
Hosting videos - Streamable & file format guide
Changing the colour palette
Adding a new page
Troubleshooting

1 What files does this site have & what do they do?

Your site is made up of several HTML files and a folder of images. Here's what each one is:

File	What it is
`index.html`	Your home page - the first thing people see. Always the most important file.
`gallery.html`	Your Art Gallery page - shows a grid of your artworks loaded from the `images/artgallery/` folder.
`diary.html`	Your Media / Diary page - shows a grid of photos, videos, or audio from the `images/media/` folder.
`not_found.html`	Your 404 error page - shown if someone follows a broken link on your site.
`images/`	A folder containing all the decorative images, gifs, fonts, cursors, and your art/media uploads.

♡ good to know All four HTML files share the same visual style. Most decorative elements - lace borders, heart background, cursor - are image files in the images/ folder, so replacing one image updates it everywhere it's used.

2 Free Neocities - what can you upload?

Neocities has a free tier and a paid Supporter tier. Here's exactly what you can and can't do on a free account:

File type	Free account?
HTML files (`.html`)	✓ Yes
CSS files (`.css`)	✓ Yes
JavaScript files (`.js`)	✓ Yes
Images - PNG, JPG, GIF, WEBP, SVG	✓ Yes
Font files (`.ttf`, `.woff`)	✓ Yes
Text files (`.txt`, `.md`)	✓ Yes
Total storage	1 GB on free accounts
MP3 / audio files	✗ Supporter only - see Section 7b for workarounds
MP4 / video files	✗ Supporter only - see Section 7b for workarounds
Custom domain name	✗ Supporter only
Private / unlisted site	✗ Supporter only

♡ tip - media page on a free account You can absolutely still use the media/diary page on a free account - just fill it with images (PNG, JPG, GIF, WEBP). For videos you'll need to embed them via Streamable instead. See Section 7b for a full step-by-step explanation.

3 How to edit files on Neocities

The easiest way is using Neocities' built-in browser editor — no downloads or installs needed.

Using the Neocities built-in editor

Click the edit option on the file you want to edit - e.g. index.html. This opens the built-in code editor.

Make your changes. Use Ctrl+F (Cmd+F on Mac) to search for specific text - this is the fastest way to find what you're looking for.

Press Ctrl+S or click Save. Changes go live immediately.

Click View in your Dashboard to check the live site. Do a hard refresh (Ctrl+Shift+R) if it looks unchanged.

♡ tip - uploading images Go to your Dashboard, click Upload, and select your image file. To put it inside the images/ folder, either drag it there in the Dashboard after uploading, or name it images/myimage.png (including the folder path) when you upload.

⚠ always make a backup before editing Before touching any file, copy all of its content and paste it into a plain text file on your computer and save it. If something breaks you can paste it straight back. The Neocities editor keeps no version history.

4 Changing text across the site

All the personalised text lives inside the HTML files. Here's exactly where to find each piece.

The site title in the header

The big glowing title at the top of every page. Open each HTML file and search for:

        find this
        <h1>Killing Heart&#9825;Darling!</h1>
      

Replace the text with your own site name. The ♡ is the hollow heart ♡ - keep it, remove it, or add more. This line appears in every HTML file, so update it in index.html, gallery.html, diary.html, and not_found.html separately.

The browser tab scrolling quote

Each page has a short quote that tickers across the browser tab. Search near the bottom of each file inside a <script> tag:

        in diary.html
        var q = "Life, although it may only be an accumulation of anguish...  ♥  ";
      

        in gallery.html
        var original = '\'Whatever our souls are made of, yours and mine are the same.\'  ♥  ';
      

Replace the text inside the quotes with whatever you want. Leave a couple of spaces at the end so it loops cleanly.

The sidebar welcome box text

Each page has a small description box in the left sidebar. Search for welcome-body to find it:

        in gallery.html
        <div class="welcome-body">
  welcome to my little gallery! here i keep all my drawings.
  <br><br>
  click any piece to view it in full...
  <div style="...">
    art is the blood of the soul   <!-- small italic quote -->
  </div>
</div>
      

Change any text between the tags. The <br><br> makes a blank line - keep those. Also update the pink title above it by searching for welcome-title:

        find this
        <div class="welcome-title">&#9825; art gallery</div>
      

Navigation menu links

Search for class="np" to find the sidebar nav links:

        menu links
        <a href="index.html"   class="np"><img src="images/kuromi-1.gif" class="nav-kuromi"> Home</a>
<a href="gallery.html" class="np"><img src="images/kuromi-2.gif" class="nav-kuromi"> Art Gallery</a>
<a href="diary.html"   class="np"><img src="images/kuromi-3.gif" class="nav-kuromi"> Diary</a>
      

Change the label text ("Home", "Art Gallery", "Diary") to suit your pages. To add a new page, copy one line and update the href filename and label. To change the small gif, replace images/kuromi-1.gif with the path to any gif you've uploaded.

The footer

The dark bar at the bottom of each page. Search for class="pgfoot":

        footer
        <footer class="pgfoot">
  Killing Heart&#9825;Darling!
  <span class="fdot">|</span>
  <a href="index.html">home</a>
  ...
</footer>
      

Change the site name at the start and update the link labels to match your pages. The <span class="fdot">|</span> bits are the separator dots - leave those alone.

Your Neocities site URL

Several places across the site contain the placeholder address https://yoursite.neocities.org. You need to replace every occurrence of this with your real Neocities URL before sharing your site. Here's exactly where each one appears:

        in index.html — site button embed code
        <!-- search for: yoursite.neocities.org -->
<textarea ...>&lt;a href="https://yoursite.neocities.org"&gt;
  &lt;img src="https://yoursite.neocities.org/images/button.png"...&gt;
&lt;/a&gt;</textarea>
      

This is the code visitors copy to put your button on their site. Both URLs must point to your real address — the first is your homepage, the second is your button image.

        in every HTML file — footer Neocities profile link
        <a href="https://neocities.org" target="_blank" rel="noopener">neocities profile</a>
      

The footer on every page links to the Neocities homepage by default. Replace https://neocities.org with your own profile URL, which looks like https://neocities.org/site/yoursite.

♡ finding your Neocities URL Your site address is yourusername.neocities.org. You can find it on your Neocities Dashboard — it's shown at the top of the page next to "Your Site". Use Ctrl+F in your code editor to search for yoursite and replace every instance with your actual username.

The right-click popup message

When someone right-clicks a small popup appears. Search for nocopy-popup:

        right-click popup
        <div class="nocopy-popup-title">please don't steal</div>
<div class="nocopy-popup-body">all art here belongs to me, please ask before reposting &#9825;</div>
      

Change both lines to whatever you like. Keep it short - this popup is tiny!

5 Adding & changing images

All decorative images live in the images/ folder. The easiest swap: upload your new image with the exact same filename and the site uses it automatically.

The hanging charm gif

A small gif hanging off the top-right corner of the main card. Search for hanging-charm:

        in diary.html
        <img class="hanging-charm" src="images/hanging-charm.gif">
      

The gallery uses images/black-charm.gif instead. Upload a new gif with the same name to replace it, or upload it with any name and update the src to match.

♡ where to find cute gifs Good free sources: gifcities.org (the old Geocities archive), rentry.co/quain (where most of this site's assets came from), and searching "pixel resources" or "neocities resources" on Tumblr. Make sure anything you use is free or from a public archive.

Sidebar divider gifs

Small decorative gifs between sidebar sections. Search for class="divider":

        sidebar dividers
        <div class="divider"><img src="images/coffin.gif"></div>
<div class="divider"><img src="images/bat-divider.gif"></div>
      

Replace the src values with paths to any gifs you've uploaded - roses, stars, sparkles, hearts, anything.

The custom cursor

Two images (images/cursor-1.png and images/cursor-2.png) are swapped every 400ms to make the cursor look animated. To change it, upload your own images with those exact names. Tips:

Best size: around 32×32 pixels or smaller.
Use a PNG with a transparent background so there's no white box around it.
The click hotspot is the very top-left corner of the image by default.
For a static cursor, just upload two identical images.

The animated favicon (tab icon)

The site cycles through icon-1.png, icon-2.png, icon-3.png, and icon-4.png every 500ms. Upload your own square images with those names - 32×32 or 64×64 pixels. For a static icon upload four identical images.

♡ changing animation speed Find this line near the bottom of each HTML file and change the number (smaller = faster):

setInterval(function(){ fi=(fi+1)%icons.length; setFavicon(fi); }, 500);

5b Editing the home page (index.html)

The home page has more unique sections than any other page. Here's every editable part and exactly where to find it.

Profile picture & info

The card in the left column with your photo and personal details. Search for profile-box to find it.

To change the profile picture, upload your image to the images/ folder and update the src:

        profile picture
        <img src="images/pfp.png" alt="pfp.png">
      

To change the info fields, find the profile-about div and replace the text here values after each label. Don't delete the <span> tags — just change the text that follows them:

        profile info fields
        <div><span style="color:var(--pk3);">name:</span> text here</div>
<div><span style="color:var(--pk3);">age:</span>  text here</div>
<div><span style="color:var(--pk3);">from:</span> text here</div>
<div><span style="color:var(--pk3);">likes:</span> text here</div>
      

You can rename the labels (name, age, from, likes) to anything — just change the text inside the <span> tag.

Welcome box

The main about/intro box in the centre column. Search for welcome-box. There are three things to edit inside it.

The italic subtitle at the top:

        welcome subtitle
        <div class="welcome-title">* welcome to Killing Heart Darling!</div>
      

The welcome image that floats to the right — replace welcome.png with your own image filename:

        welcome image
        <img src="images/welcome.png" style="float:right;width:130px;height:130px;...">
      

The main body text — replace the long block of text here with your actual about/intro:

        welcome body text
        <!-- replace this with your own text -->
text here text here text here ...
      

Update log

The scrollable log in the centre column. Search for Update Log. New entries go at the top — copy the date label and description for each new update:

        update log entry
        <div style="color:var(--pk2);font-family:'Playfair Display'...">18 APR 2026</div>
finished the art gallery
      

Paste a new date div and description above the existing entries each time you update the site. The box scrolls automatically when it gets long.

Image box

The box to the right of the update log — currently empty. Search for image-box-img. To add an image, put an <img> tag inside it:

        image box
        <!-- before (empty) -->
<div class="image-box-img"></div>

<!-- after (with image) -->
<div class="image-box-img">
  <img src="images/myimage.png" alt="description">
</div>
      

Stamp strip

The scrolling row of stamps in the centre column. Search for stamp-inner. Each stamp is one <img> line pointing to a file in images/stamps/:

        stamp strip
        <img src="images/stamps/stamp1.gif" alt="stamp 1">
<img src="images/stamps/stamp2.gif" alt="stamp 2">
... and so on
      

To add a stamp upload your gif to images/stamps/ and copy one line with the new filename. To remove one delete the whole <img> line. Stamps should be around 99×56 pixels.

Tiled text box

The general-purpose content box in the lower centre column. Search for Box Title to find it:

        tiled text box
        <div class="sh-plain">Box Title</div>
<div class="sbody">text here text here...</div>
      

This box can hold anything — a "currently" section, favourite quotes, interests, a to-do list. Just replace the heading and body text.

Music player

The player in the right column. Search for music-box. Three things to update — the song title, artist name, and audio file source:

        music player
        <div class="mp-title">Song Title Here</div>
<div class="mp-artist">Artist Name</div>
...
<source src="images/song.mp3" type="audio/mpeg">
      

On a free Neocities account you can't upload MP3s directly, so upload your song to Catbox.moe and paste the direct link into the src attribute. See Section 7b for details.

Site button box

The black box at the top of the right column where visitors can grab your 88×31 button. Search for site-btn-box. Update the button image and the embed code in the textarea:

        site button
        <!-- your button image -->
<img src="images/button.png" width="88" height="31">

<!-- the code visitors copy to link back to you -->
<textarea ...>&lt;a href="https://yoursite.neocities.org"&gt;
  &lt;img src="https://yoursite.neocities.org/images/button.png"...&gt;
&lt;/a&gt;</textarea>
      

Upload your button image as images/button.png (88×31 pixels). Then update both the image src and the two URLs in the textarea with your actual Neocities site address.

Credits box

The lace-bordered box in the right column for crediting resources and code help. Search for Credits. Each credit is a category label followed by one or more links:

        credits box
        <!-- category label -->
<div style="...">code</div>
<a href="https://lacepicnic.neocities.org" target="_blank">lacepicnic</a>

<div style="...">sozai</div>
<a href="https://nyaa.neocities.org" target="_blank">nyaa.neocities</a>
      

To add a credit copy a label div and link pair and paste it inside the sbody div. "Sozai" is Japanese for resources/assets — a common Neocities convention for crediting graphics sources.

Comment box

The box at the bottom of the right column. Search for cmt-box:

        comment box
        <span class="cmt-user">your name</span>
<span class="cmt-time">1 day ago</span>
<div class="cmt-body">text here text here...</div>
      

Change the name, timestamp, and body text to whatever you want — a quote, a note to visitors, a fun fact.

Links box

The list of external links in the right column. Search for links-box. Each link is one <a> line — replace the # with your real URL and update the label text:

        links box
        <a href="#"><img src="images/kuromi-4.gif"> Instagram</a>
<a href="#"><img src="images/kuromi-5.gif"> Spotify</a>
      

To add a link copy any <a> line and paste it below. To remove one delete the whole line.

Buttons box (88×31)

The grid of friend/affiliate buttons at the bottom of the right column. Search for btns-scroll. Replace each placeholder <div class="btn-slot"> with a real button image, optionally wrapped in a link:

        buttons box
        <!-- placeholder -->
<div class="btn-slot">88x31</div>

<!-- real button with link -->
<a href="https://friendsite.neocities.org" target="_blank">
  <img src="images/friend-button.gif" alt="friend site">
</a>
      

♡ tip - getting button images Most Neocities sites display their own 88×31 button somewhere on their page. Right-click it and save the image, upload it to your images/ folder, and use that. Downloading and re-uploading is safer than hotlinking, since the original host could remove the file at any time.

6 Updating the Art Gallery

The gallery (gallery.html) auto-builds a grid from the images/artgallery/ folder. You don't write any HTML per image - just upload files and update one number.

How it works

Images must be numbered: 1.png, 2.jpg, 3.gif, etc. The page tries each number up to the count you've set. Supported formats: .png, .gif, .webp, .jpg.

Step-by-step: adding new art

Upload your image into images/artgallery/ on Neocities, named as the next number - if you have 1–9, name the new one 10.png.

Open gallery.html and search for GALLERY_COUNT:

var GALLERY_COUNT = 9;

Update the number to match how many images you now have.

Save the file. Reload the gallery page and your new image appears automatically.

⚠ do not use catbox.moe for gallery images Catbox.moe (and most free image hosts like Imgur) block their images from being embedded on external websites - your images will show as broken icons on your gallery page. Art gallery images must be uploaded directly to your Neocities images/artgallery/ folder to display correctly. There is no workaround for this; it's a restriction enforced by those hosts.

⚠ don't skip numbers If you have 1.png, 2.png, and 4.png but no 3.png, entry 3 will show as an empty placeholder. Keep numbering continuous.

♡ file format tip PNG is best for drawings and illustrations. JPG is better for photos. GIF supports animation. Using a mix is fine - each entry just needs a unique number.

7 Updating the Media / Diary page

The media page (diary.html) works the same as the gallery - images go in images/media/, numbered from 1 upwards. The extra feature is you can attach a title, caption, and date to each entry.

Step-by-step: adding a new image entry

Upload your image into images/media/ on Neocities, named as the next number (e.g. 10.jpg).

Open diary.html and find MEDIA_COUNT:

var MEDIA_COUNT = 9;

Update the number to match your new total.

To add a title, caption, and date, find the MEDIA_INFO block just below and add a new line:

            MEDIA_INFO[10] = { title: 'your title', caption: 'a little caption', date: '23 apr 2026' };
          

You don't have to fill in all three - any you leave out just won't appear.

Save and reload to check it.

⚠ do not use catbox.moe for media page images Same as the art gallery - Catbox blocks external image embedding. Images will show as broken on your media page unless they're uploaded directly to your Neocities images/media/ folder. The only exception is audio files (covered in Section 7b).

7b Hosting videos - Streamable & file format guide

Neocities free accounts cannot host video or audio files. Here's how to handle each type.

Videos - use Streamable

Streamable (streamable.com) is a free video hosting site. You upload a video, get a link, and use that on your site. This is the recommended solution for your media page.

Convert your video to MP4 first if needed. Browsers cannot play .mov files - they will never work regardless of where they're hosted. Use the free tool Handbrake (handbrake.fr) or the online converter at cloudconvert.com to convert .mov → .mp4 before uploading anywhere.

Create a free account at streamable.com and upload your .mp4 file.

Once uploaded, copy the video's page URL (e.g. https://streamable.com/n93n8h).

Create a .txt file named after the entry number (e.g. 3.txt) and paste just the Streamable URL inside it. Upload this file to images/media/ on Neocities. The media page will detect it automatically and embed the video.

              /* contents of 3.txt */
https://streamable.com/n93n8h
            

⚠ .mov files will not play in any browser .mov is Apple's proprietary format and browsers do not support it. Even on a Supporter account where you could technically upload it, it still won't play. Always convert to .mp4 first. Handbrake and CloudConvert are both free.

⚠ do not use catbox.moe for videos Catbox blocks video files from being embedded on external sites - they will not play on your Neocities page. Streamable is the correct solution for videos.

Audio - use Catbox (this one is fine!)

Unlike images and video, audio files can be hosted on Catbox.moe and embedded on your site. Catbox's blocking only affects image and video content, not audio. This makes Catbox the right choice for the "now playing" / song title box if your site has one.

Go to catbox.moe, upload your .mp3 or .wav file, and copy the direct link it gives you.

In whichever HTML file has your song/audio box, find the <audio> tag (search for <audio) and update its src:

            <audio autoplay loop>
  <source src="https://files.catbox.moe/xxxxxx.mp3" type="audio/mpeg">
</audio>
          

♡ quick reference - what goes where

Art gallery images → upload directly to images/artgallery/ on Neocities
Media page images → upload directly to images/media/ on Neocities
Videos → convert to MP4, upload to Streamable, put the URL in a .txt file
Audio / song box → upload to Catbox.moe, use the direct link
Audio on media page → requires a Supporter account to upload MP3 directly to Neocities; no free workaround currently

8 Changing the colour palette

All four pages share the same colour scheme, defined with CSS variables at the top of each file's <style> section. Search for :root in any HTML file:

        colour palette
        :root {
  --pk1: #D1D1D1;  /* light grey - borders and dashes */
  --pk2: #b898a8;  /* dusty mauve - links, headings, accents */
  --pk3: #7a4a5a;  /* deep rose - main text colour */
  --pk4: #FDF5FE;  /* very pale pink - light backgrounds */
  --pk5: #F9F4F6;  /* near-white pink - sidebar background */
  --bg:  #FDF8F5;  /* overall page background */
  --white: #ffffff; /* pure white */
  --txt: #7a4a5a;  /* body text */
}
      

Replace the hex values (#xxxxxx) with your chosen colours. Tips:

Use coolors.co or htmlcolorcodes.com to find hex codes for any colour.
--pk2 and --pk3 are the most visible - changing just these two transforms the whole feel.
You need to update the :root block in each HTML file separately since the CSS is embedded in each page.
Keep --white as #ffffff unless you specifically want tinted card backgrounds.

The header stripe pattern is separate. To change it, search for repeating-linear-gradient inside the .hdr CSS rule and update the colours there.

9 Adding a new page

To add a new page (like an "About Me"), the easiest approach is to duplicate an existing page.

Download gallery.html or diary.html from your Dashboard - these are the simplest templates to start from.

Rename it on your computer, e.g. about.html.

Change the <title> tag at the top:

<title>About Me ♡ Killing Heart Darling!</title>

Find the main content column (search for class="col-mid") and replace everything inside it with your own content. Write text in <p> tags, add images with <img src="...">.

Upload about.html to your Neocities Dashboard.

Add a link to it in the menu of every other page. Find the nav (search class="np") and add:

            <a href="about.html" class="np"><img src="images/kuromi-4.gif" class="nav-kuromi"> About Me</a>
          

♡ adding text to your new page Wrap paragraphs in <p>Your text here.</p>. For a heading, use <h3 class="sub-title">Heading</h3> - the sub-title class styles it to match the rest of the site automatically.

10 Troubleshooting

Problem	What to check
An image isn't showing up	Check the filename in `src="..."` matches exactly - including uppercase/lowercase letters. Neocities is case-sensitive. Also check the image is actually in the right folder.
Gallery or media grid is empty	Images must be numbered from 1 and inside the correct folder (`images/artgallery/` or `images/media/`). Also check `GALLERY_COUNT` or `MEDIA_COUNT` is at least 1.
Images show as broken icons (small X)	You're almost certainly linking to an image on Catbox or another external host. These block external embedding. Images must be uploaded directly to your Neocities `images/` folder.
Video won't play	Check it's an `.mp4` - `.mov` files will never play in a browser, full stop. Convert to MP4. Also make sure you're using a Streamable link in a `.txt` file, not a Catbox link.
A gif works on my computer but not the live site	The file exists on your computer but hasn't been uploaded to Neocities yet. Go to your Dashboard and upload it.
Page layout looks broken	You probably deleted part of a tag. Paste your code into validator.w3.org (free, online) and it will highlight exactly where the error is.
Cursor is invisible	The cursor script hides the default cursor and replaces it with `cursor-1.png`/`cursor-2.png`. If those files are missing, there's no cursor at all. Upload them to fix it.
Can't undo a mistake	Ctrl+Z works in the editor if you haven't saved yet. If you already saved, you need your local backup - which is exactly why making one before editing is so important.
Changes aren't showing on the live site	Hard refresh: Ctrl+Shift+R (Cmd+Shift+R on Mac). Browsers cache old versions aggressively. Also double-check you actually clicked Save.
Lace borders / decorations are missing	These use files like `images/vertical-lace2.png`, `images/rhinestone.png`, `images/header-lace.png`, `images/lace-box.png`. If any are missing from your `images/` folder on Neocities, that decoration won't show.