I doubt anyone actually wants these, but since I have multiple color schemes for this now, I figured I might as well share anyways. Each color scheme comes with a zip file of the CSS, HTML, images, a palette guide, and two list guides. Fonts are up to you to choose and acquire, but are set to Alphabetized Cassette Tapes and Lofi Lifestyle by Brittney Murphy Design by default. These are not included, but you can acquire them pretty easily if you search for them. If you'd like to use something else, I have several font rec pages at this point. See the fonts section for more ideas. Color Schemes Desert Rose Deep Space Textbook Marker Coffee Map Tropical Fruits Hydrangea Green Drops Halloween Chat Astra Mocha Catppuccin Daydreaming Dark Daydreaming Light Click the images for a full size preview. Download link for each scheme below the preview images. In each download file, you should have eight files: the style sheet, the html code, the background image, the palette guide image, two list guides, the javascript code, and a preview image. Check that all of these are present before doing anything. Mocha adn Daydreaming will not have a background image, as it uses a solid color background instead. Schemes after Chat Astra assume you are familiar with this process and have not been fully stripped down, the lorem ipsum still present in the file. Because I'm lazy. 1. First, upload your palette guide, icon for the profile box (small icons only), and the background image. If you'd like to use a different image than the one provided, feel free, but make sure to update the "Terms" section of the html file with the source of your image. See next step. 2. Upload your fonts. None have been included. See the Fonts section below for ideas and links to free and paid fonts. This is coded for you to have a font for the titles of the lists and a font for the text of the lists. By default, Lofi Lifestyle is the title font and Alphabetized Cassette Tapes is the list text font. You can, of course, choose to only use one font for both if you'd like. If you're using the same fonts already written in, you don't need to do anything else here. If you've chosen other fonts, you will need to make some changes in the CSS file. For the title font, open the CSS file and CTRL+F "Lofi Lifestyle". Change this to whatever the name of your font is. Then, CTRL+F for "('Lofi Lifestyle.otf')" and change this to your font's file name+file type. Change "format" on the same line to your file's format if different. Do this same process for "Alphabetized Cassette Tapes", "('Alphabetized Cassette Tapes.ttf')", and format. Do this across all instances of these in the file. If you want to use a single font throughout, just change both to the one font you want to use. Save for now. If you want to use a different background image, change the url inside "background: url" to your file. 3. Open your HTML file. First, if you changed the background image, CTRL+F for "Terms" and change the Subtle Patterns credit in this section to the source of your image if is a color scheme with a background image, with the exception of the tartan patterned scheme Halloween that was made with a generator. Either way, edit that credit. Chat Astra does not need this edit. If you are editing from the Mocha theme, then you will need to edit the Catppuccin part in the terms. Add the credit for your fonts in this section as well. 4. Now, for the bio section. CTRL+F "YOUR NAME's". Add the name you wish to appear here. As obvious safety practices, always avoid using your legal name (even if it's just your first name) and opt for an alias or nickname instead. You can be as reckless as you want, however. It's your life to ruin. After adding your name, CTRL+F "YOURICON" and add the URL for the icon you want to use for your bio section. Find "BIO TEXT HERE" and change this to whatever you want to display in the top box. Next, CTRL+F "LINK URL 1". In your Bookmarks section, you can link 5 different sites. I encourage you to use this section for links OFF your website, perhaps favorite sites around the web, favorite Neocities, or favorite Listography accounts. If you want less links, just remove down to the number you want. Under the links is the "View all", which you can edit from CTRL+F "YOUR LINKS PAGE LINK". This section was intended for you to link directly to a links page on your own site of more links you'd like visitors to see. If you don't have a links page, you could always link to someone else's that you find very useful, or remove this part altogether if you don't want it there. The final part of the bio section is the bottom links and custom blinking text. You can have up to four of these. These are intended to link to specific pages on your own website. CTRL+F "SITE LINK URL 1" and change the text to the section of your site and add the URL. The fourth slot is set to text-only by default, so you will need to change that if you want four links. If you want three or less, change the code to match the fourth slot and add whatever text you want. Lastly, CTRL+F "CUSTOM BLINKING TEXT" and put in whatever text you want to show in the faux search bar. Of course, if you wanted to, I guess you could make this section function and redirect to a real search bar, but I just wanted the aesthetic of it since this space serves no real function like it does on the real Listography. 5. Now, to the lists themselves. There are three columns. If you want a list on the left side, they need to be under "BEGIN COLUMN ONE", in the middle under "BEGIN COLUMN TWO", and on the right under "BEGIN COLUMN THREE". Lists can have list icons or not, just like on Listography. You will need to upload any icons you want to use for your lists onto your site. I suggest 100x100 icons. There are plenty of these online. You could always make your own as well! The way this is designed, you should always include a title for your list, but subtitles are optional. In my preview images, I've made the subtitles in parenthesis to be like the real Listography, but you don't have to do that if you don't want to. At the bottom of each list is a section for two dates. The first date with the infinity symbol is for the date the list was created and the second date is for when the list was last updated, the same as it was on Listography. This makes it easy for someone to tell if your list has been updated. Lists will automatically be partially hidden behind a "read more" after a certain length. You don't need to do anything to make this happen. Below is a general overview of the lists code. You do not need to use p tags in the lists. Each list begins with LIST, followed by the div class palette color. Use the names in your scheme's color palette image to choose which color you want for each list. There should be six in total, but if you want more colors, you can always add more. If you'd like a list icon under the LISTICON, that is always inserted after LISTTEXT. The title goes within the TITLE and the subtitle, if you want one, goes within the SUBTITLE class within TITLE class. If you don't want a subtitle, you don't have to have one. See the second list on the image to see the difference. The date is edited at the end of the list, as seen in the image. The image above is pretty much the basic format for the lists. As you add lists, always make sure they're within the column you intend them to be and that all tags are closed. Inside your download folder is also a file called "List Guide" that has another general overview of how to use the lists, which includes the code that can be added to larger images to keep smaller and expand when clicked. This is to mimic a function of Listography. I would recommend to still not use images too large though. I've also included how to make regular bullet lists for each list, though I personally prefer a more customized list look myself. Before you upload anything, I would make some lists first. Once you've made some lists, saved your HTML file, and uploaded all your images and fonts, move on to the next step. 6. Now, upload the javascript file from the download folder. Copy the text of your CSS file into the your style sheet and then make your new page with the text of your HTML file in whatever method you typically do. As this does not have all the same functionality as the real Listography, if you want to use these for private notes, I'd suggest making a password protected version or using this offline on your computer. FONTSI have not included any fonts in these downloads, as I would rather, even if some are free, you download them from a place their creators have uploaded them at. There are many fonts available online. I recommend Font Squirrel and Google Fonts for free fonts. I've found plenty of cheap (and not so cheap) fonts on TheHungryJPEG, as well as some free fonts. You can check my links page for some more places to look. Though some popular font makers still post there, I'd advise against using fonts found on DaFont as a general rule. I'm pretty surprised to see the site in general recommended around these days, and I guess the youngins' need someone to give them the DaFont talk. Back in the day, a lot of font makers used DaFont. It was a pretty common resource, but people eventually realized something quite crucial. You can't remove your fonts from DaFont. Once they're uploaded, they are there forever. To this day, a font I've made and one my wife has made are still up there. You can't delete your account either. This pissed off a lot of people who wanted to have more control over their fonts and potential pricing/licensing of fonts. Fonts on DaFont are also regularly scraped by other "free" font sites that then upload those fonts once again without the consent of the creators. I know places that have thousands of free fonts are very tempting, and if it's for something you're not using to make money and isn't going online, it's not really a big deal if you use them. However, if you are making a site or making any kind of graphics with fonts that other people will be seeing/purchasing, please get your fonts from more legitimate places than these. Many font creators these days have their own websites were you can buy directly from them, Behance accounts, or are on resource sites with built in licensing abilities and price change abilities (along with deletion options). Please avoid DaFont. I've linked above some better resources. Many font creators have free/discounted licenses for personal use and then higher prices for commercial use, so check the terms. But, that said, some creators are still okay with using DaFont. Do your research first to see how the creator handles their licenses currently. NOTESWhat's the point of this? Well, mostly I just wanted to see if I could. This will never have all the same functionality as the real Listography, and for most people, the real version is the better option. You can easily move notes around, you can archive and have private notes, etc. The real Listography is great. I just wanted to see if I could make something like that on my site and customize it to a degree Listography doesn't allow. Listography is very limited in its list color options and the bio section is similarly not something you can change the look of much. It also doesn't really work well on mobile, has no Android app, and the iPhone app doesn't work very well. But overall, the real thing is definitely superior. This was just a fun little project I wanted to do. Feel free to edit these as much as you want, though I doubt anyone is as entertained by this as I am. I thought I'd share anyway, just in case like one person wanted to use this. And if I somehow lost my files on my computer, this will be here as another back-up. TBH, I mostly made the alternate color schemes for if I wanted to change my current set up to something else or make a private one.