CODE TOON

Starlight

preview + code

A remake of my old Sunset FAQ page from 2017. Same color palette, but actually readable.

This page's navigation is done with only CSS! You don't need to go through the approval process for scripts.

Maestro

Make a playlist out of your audio posts

This is a project I've been writing and rewriting on and off for a while now. After starting over completely from scratch last weekend, I think I've gotten far enough to share it.

It's still early, but so far it supports:

NPF and Legacy audio posts

Spotify posts

Keyboard navigation

Accessible theme revamp

preview + install

The original theme garden theme is several years old and was in need of a refresh. While the design is very similar, there are several changes to the theme options. I didn't want anyone to lose their settings, so this is a completely new version and not an update to the original.

This is much simpler to customize overall, so let me know if I should add some more of the older features into this one!

What's new to this version:

Day/night mode

Better NPF post support

You can host a website on Neocities for free as long as it's under 1GB (which is a LOT more than it sounds like let me tell you) but if that's not enough you can get 50GB of space (and a variety of other perks) for only $5 a month.

And if you can't/don't want to pay for the extra space, sites like File Garden and Catbox let you host files for free that you can easily link into NeoCities pages (I do this to host videos on mine!) (It also lets you share files NeoCities wouldn't let you upload for free anyways, this is how I upload the .zip files for my 3DS themes on my site.)

Don't know how to write HTML/CSS? No problem. W3schools is an invaluable resource with free lessons on HTML, CSS, JavaScript, PHP, and a whole slew of other programming languages, both for web development and otherwise.

Want a more traditional social media experience? SpaceHey is a platform that mimics the experience of 2000s MySpace

Struggling to find independent web pages that cater to your interests via major search engines? I've got you covered. Marginalia and Wiby are search engines that specifically prioritize non-commercial content. Marginalia also has filters that let you search for more specific categories of website, like wikis, blogs, academia, forums, and vintage sites.

Maybe you wanna log off the modern internet landscape altogether and step back into the pre-social media web altogether, well, Protoweb lets you do just that. It's a proxy service for older browsers (or really just any browser that supports HTTP, but that's mostly old browsers now anyways) that lets you visit restored snapshots of vintage websites.

Protoweb has a lot of Geocities content archived, but if you're interested in that you can find even more old Geocities sites over on the Geocities Gallery

Going to put all this in its own post too by popular request: here's how you make your own website with no understanding of HTML code at all, no software, no backend, absolutely nothing but a text file and image files! First get website server space of your own, like at NEOCITIES. The free version has enough room to host a whole fan page, your art, a simple comic series, whatever! The link I've provided goes to a silly comic that will tell you how to save the page as an html file and make it into a page for your own site. The bare minimum of all you need to do with it is JUST THIS:

Change the titles, text, and image url's to whatever you want them to be, upload your image files and the html file together to your free website (or the same subfolder in that website), and now you have a webpage with those pictures on it. That's it!!!!! .....But if you want to change some more super basic things about it, here's additional tips from the same terrible little guy:

Going to put all this in its own post too by popular request: here's how you make your own website with no understanding of HTML code at all, no software, no backend, absolutely nothing but a text file and image files!

First get website server space of your own, like at NEOCITIES. The free version has enough room to host a whole fan page, your art, a simple comic series, whatever!

The link I've provided goes to a silly comic that will tell you how to save the page as an html file and make it into a page for your own site. The bare minimum of all you need to do with it is JUST THIS: /end ID]

[image ID: a creature explaining what to change after you save the html to make it your own website: “Guess what? The circled bits are all you ever need to change to make it your OWN PAGE” The sections circled in red are:

the text of the page's tab, between "head" and "title" tags. it says “YOUR WEBSITE'S TITLE HERE”; the full line is: <head><title>YOUR WEBSITE'S TITLE HERE</title><head>

a header for the page, between "h1" and "p" tags. it says “BIG, CENTERED TEXT”; the full line is: <h1><p style="font-sixe:40px">BIG, CENTERED TEXT</p><h1>

a link to the image files of the comic, between an "h1" tag and inside an "img." tag. it says “thisisntyourcomic.png”; the full line is: <h1><img src="thisisntyourcomic.png"></h1>

the three navigation links, each inside an "a" tag. the first link applies to the word “Previous”, the second applies to the word “Home”, and the third to the word “Next”; the first line is: <a href="001.html"><b>Previous</b></a>   . the second line is: <a href="YOURWEBSITE.WHATEVER"><b>Home</b></a>&nps;&nps; . the third line is: <a href="001.html"><b>Next</b></a>

/end ID]

[post text: Change the titles, text, and image url's to whatever you want them to be, upload your image files and the html file together to your free website (or the same subfolder in that website), and now you have a webpage with those pictures on it. That's it!!!!!

.....But if you want to change some more super basic things about it, here's additional tips from the same terrible little guy: /end PT]

[image ID: the creature from before, explaining how to change the background colors: “AAH! It's extra stuff! Here's where you can change colors!” a few spots for hexcodes and code segments are circled and labelled. The lines of code are:

color: "#000000;" labelled “Font”

background: "#FFFFFF;" labelled “Background 1”

a { color: "#0000EE;" } labelled “Links”

a:visited { "color: #551A8B;" } labelled “Visited Links”

#main { "background: #FFFFFF;" width: 900…} labelled “Background 2”

The creature continues: “There's two different ones for "background" because the sample file has this nice middle column for your content!”

/end ID]

[image ID: a demonstration of the different background colors. Background 1 applies to the background of the webpage, and Background 2 applies to the background of the content column. The creature instructs: “Look up color hex codes and and try any vile combos you want!” /end ID]

[image ID: the creature explaining how to change the navigation at the bottom: “Links can be images instead of text! Just put an image code where the link text was.” The code segment from the first image for navigation links except with the "Previous", "Home", and "Next" texts replaced with <img src="backbutton.png">, <img src="homebutton.png"> and <img src="nextbutton.png"> /end ID]

[image ID: a screenshot of the html code inside the computer's files, with the creature explaining: “If an html file is just called "Index," it automatically acts as your main page! It will be what people see when they go to yourwebsitename.com or whatever!” /end ID]

[image ID: a singular line of code: <meta HTTP-EQUIV="REFRESH" content="0; url=yourwebsite.com"> The creature says: “If you make a page with only this one line of code, anyone who goes to the page will be taken to whatever URL you put there!” /end ID]

[image ID: the creature further explains: "You can use that to make a custom link with that always goes to your newest update! Whenever you update, just change this link again!Your index.html can be this, too!" There's an arrow pointing towards the "url=yourwebsite.com" in the code segment from the previous image. /end ID]

[post text: That last code by itself is:

<meta HTTP-EQUIV="REFRESH" content="0; url=001.html">

Change "001.html" to wherever you want that link to take people. THIS IS THE REASON WHY when you go to bogleech.com/pokemon/ you are taken instantly to the newest Pokemon review, because the /pokemon/ directory of my website has an "index.html" page with this single line of code. Every pokemon review has its own permanent link, but I change that single line in the index file so it points to the newest page whenever I need it to!

While I catered these instructions to updating a webcomic, you can use the same template to make blog type posts, articles or just image galleries. Anything you want! You can delete the navigational links entirely, you can make your site's index.html into a simple list of text links OR fun little image links to your different content, whatever! Your website can be nothing but a big ugly deep fried JPEG of goku with a recipe for potato salad on it, no other content ever, who cares! We did that kind of nonsense all the time in the 1990's and thought it was the pinnacle of comedy!! Maybe it still can be?!?! Or maybe you just want a place to put some artwork and thoughts of yours that doesn't come with the same baggage as big social media?

Make a webpage this way and it will look the same in any browser, any operating system for years and years to come, because it's the same kind of basic raw code most of the internet depends upon!

/end PT]

小い.> very useful guide~ thank you for making it!♡

게터.> neocities time〜 have fun everyone :]

ゆの.> web liberation W

additional useful things people added in the notes:

alternatives for making a link to the newest update, because the method privided by the guide above will break the back button

website for learning more html and css

Hey guys! Hope everyone's doing good.

I'm posting this today as an official "goodbye" from Tumblr.

As much as I've loved creating themes, fonts and other goodies for you guys here, it's finally time to leave that for new creators.

All of my work will remain available, and you can get it all together in Suiomi's Everything Bundle, which includes all of my themes and the full Cappuccicons downloadable font:

Cappucicons PNG

Cappucicons SVG

Rihanna

Karina

Julissa

Nayeli

Nathalia

Kenya

Peyton

Clara

Mia

Get Suiomi's Everything Bundle [here].

I'd like to thank every single one of you who have supported me. It's been at least 10 years of creativity fueled by your love and support. I hope you guys have enjoyed my work throughout all these years.

Thank you so much again, and I hope my work will still make your projects and hobbies shine in years to come.

Ocular — Version 3

Preview // User Guide // More Info & Install

your favorite sidebar theme just got an upgrade, babeyyy

I went to update Ocular to make it NPF post-compliant and then my hand slipped and I redesigned the whole thing lmao. here's a brief update about Ocular 3; if you're looking for a full list of changes between versions 2 and 3, click the "Read More" below)

Ocular comes with the following features:

Colors: easily change the color scheme of your sidebar and posts using any colors you want

Post sizes: 400px, 500px, 540px, 600px, 700px

Sidebar: can be on the left, right, or above the posts. pick from a list of sidebar sizes, header image heights, and avatar shapes

Fonts: 20 different fonts, sizes 13px to 18px

Background: solid, gradient, full-size image or repeating image

Links: choose either regular navigation or drop-down navigation. unlimited custom links (visit the help desk FAQ for a tutorial) and ability to rename home, ask, submit, and archive links

Endless scroll, custom ask box text, Tumblr's full-width controls and search bar, optional header, avatar, and favicon images

if you already have Ocular installed, version 3 should be coming at you as soon as the update passes the theme garden. if you installed this theme with GitHub, you'll have to re-install manually.

now let's get to the fun stuff. what's new in version 3?

the "old web" space is extremely hostile to disabled people. there is a show of patting themselves on the back for linking accessibility resources they've never read, while at the same time flat out promoting inaccessible practices. the thing is, they don't make the page slightly more difficult to read, they make it impossible to.

if you're photosensitive, using an inaccessible page can flat out give you seizures in the case of epilepsy, or otherwise cause massive disabling migraines and other painful effects. if you're a screen reader user, be it because of blindness, dyslexia, or other print disabilities, depending on exactly what nonsense you've done to your website, it can read things in a nonsensical order, refuse to read at all, or flat out CRASH.

Automated accessibility checker: https://www.accessibilitychecker.org/guides/wcag/

How to meet WCAG (web content accessibility guidelines): https://www.w3.org/WAI/WCAG21/quickref/

with most things around web content, WCAG is your first and best point of call. the W3 site has a very comprehensive breakdown of what each item means and how to meet it. (WCAG 2 Overview, W3.org)

what WCAG does really well is discuss many facets of accessibility, from content to user pathways to technical specifics. this is often left out of discussions on accessibility -- often web accessibility conversations begin and end with "is this screen-reader friendly". (which isn't to say that everyone is really great about making things screen-reader friendly, because they're not.)

i'll link the rest of my resources under the cut. they're australia-centric because most of them i sourced for work and i am australian. but many are relevant regardless of where you are from.

i've also tried not to link a whole bunch of resources that all say the same thing. i have read all these documents and they've all been very helpful to me in increasing the accessibility of what i produce.

i've organised this list in order of what i feel is probably most relevant to people on tumblr reading this list. i'll cover:

General content guidance (readability, etc.)

Colour

Websites

Images and diagrams

Audio and video

Digital documents

PDFs (get their own special spot because they fucking SUCK irt accessibility)

Forms and surveys

You're doing great! Really love what you've done with the place so far. Now here's something important moving forward. If you are making a neocities - especially if you are doing so with the motivation to fight back against Web 3.0 and reclaim the web as a space for individual users instead of for companies - please, keep the following in mind:

An inaccessible web is not a free web.

Repeat after me: An inaccessible web is not a free web.

Resources for Beginners to Learn About Web Accessibility and Web Design:

W3C's Introduction to Web Accessibility | W3C is the organization that decides on the standards of Accessibility on the web. They are an invaluable direct resource.

A Beginner's Guide to Understanding Web Accessibility

Mozilla's Accessibility Overview

WebAIM's Introduction to Web Accessibility

What is Web Accesibility in 60 Seconds! [YouTube Video]

Accessibility: What's the difference between WCAG Levels A and AA? [YouTube Video]

FreeCodeCamp | FCC provides an extremely beginner friendly Responsive Web Design course. The lessons for this course integrate accessibility standards naturally, and also have individual lessons specifically for teaching accessibility.

FreeCodeCamp's Accessibility Tag on their News Page

HTML Dog's Tutorial's for HTML, CSS, and Javascript

MarkSheet's Free HTML and CSS Tutorial

W3C's Easy Checks

W3C's QuickRef on How to Meet WCAG | I have filtered the QuickRef link to only show Level A requirements. This is the easiest level to meet and is considered the "bare minimum."

Alt text on images: Use alt="" as an attribute on img tags. Describe what a sighted person would see and understand when they look at the image. Describe the image and its context.

Transcripts and captions: Videos and audio should have both hand-written captions and a full-text transcript. For videos without talking, describe what's going on.

Keyboard navigation: Navigate your site using just your keyboard. Tab should move through your links in order, and there should be a way to see that you're on a given link. Have a skip to content link first that brings you to your main content. This can be done with a fragment link if you add an id to your element.

Avoid color-only interactions: Add text styling or size changes as well as color to show that you're interacting with an element.

Color contrast: Check your color scheme in something like Adobe Color to see if it meets the requirements.

Theme 14: They/Them by enbythemes preview | code | credits

This isn't Friday the 13th. It's April Fool's Day. Same formula, but with a killer twist ending.

When I found out there was a Tuesday the 17th in October, I immediately knew I had to recode and post it for today. The design/layout is still pretty similar to the original, now with added NPF support as well as light/dark mode. And a lot more cleaner of code.

features and options:

100px icon, with customizable two colored gradient border.

Posts Sizes: 400px / 450px / 500px / 540px

Three custom links

Option to switch between halloween and regular icons

Responsive

Light/Dark toggle

NPF support

notes:

ask link will only appear if you have them enabled

the tumblr customization page is buggy. be sure to save and view on your blog before sending me any message about problems

Iconic Update

preview + install

Not really a revamp, just rewritten from scratch!

Given Iconic's reliance on legacy post types for styling, the rewrite modifies NPF posts to look like legacy posts for consistency. The theme's design hasn't changed, though I made some minor improvements for responsiveness.

Milk

A revamp/re-imagining of my (very outdated) theme Milky

preview + install

Aside from the obvious difference of a milk carton shaped sidebar vs a container, here are some more features in this theme:

Search bar

Custom colors

Drop down menu

Larger, more readable posts

Responsive

amethyst | theme by sage

get the code: static preview / version 2 this is a revamp of my theme amethyst!

features (more info below the cut):

uploadable sidebar image (250px x 225px), up to 3 extra sidebar links, scroll to top, day/night, & tumblr controls buttons

toggle: reblog via info, tags on click, explore menu with an image, bio, info stats, updates, blogs, & links

customizable: description, colors, body & title fonts, font size, & blog title

responsive design, 4 corner options, 3 post margin options, phosphor icons

nothing needs to be changed in the code, everything can be changed in the customize panel!

terms:

reblog if using

do not touch the credit

view all terms

credits listed in the code / credits page

please consider supporting me ♡

There's a real push to keeping the internet weird, open and less corporate-driven -- info on bypassing paywalls, protecting your data, archiving web media and basic coding/tech literacy.

(I found one tutorial on how to make a pop up that detects whether someone has an ad blocker and suggests they install one if they don't! Love that.)

There's also resources on finding the kind of internet that isn't the default experience anymore - alternate search engines I hadn't even heard of, human-made link lists and webrings. (Webrings! Turns out they never went away!)

If any of that sounds interesting to you, by the way - sadgrl.online has a lot of it and is possibly the best thing on the internet????

The "90's web" aesthetic is really fun and nostalgic, but I particularly loved seeing some people bring the better parts of the "modern internet" into it. What if we had weird, eye-searing personal sites BUT with plaintext alternatives for accessibility purposes? CW for flashing lights and unreality triggers?

(Again sadgrl comes in with a lot of resources for making your website accessible.)

Most of all, I'm honestly emotional about all the sites I found that were like, "hi! I'm 14 and this is my website where I talk about stuff I like haha."

It's so good that so many kids and teens who never experienced the "old internet" are still finding stuff like this and making their own weird stuff! Not just because weird websites are more fun, but because these skills are being passed down.

Rainbow Page 37

Wishing you all a happy pride month with this all-in-one page!

Live Preview | Code: here, here, or here

Key Features

Responsive layout.

Six content sections.

Custom features.

Resources

Tippy.js tooltips.

Remix Icons.

Noto Sans JP.

Roboto Mono.

Vertical tabs.

Smooth scroll.

Masonry.