Story Time: Chapter-Based Reader



Hey guys! I've still got some layouts to post for the month, but for the last code of the month we've fot a fun HTML page! This page is great for thread logs, fanfics, original stories, or even game info if you reword things a little!

You can easily add images to any part of this code if you want them added to your table of contents, above chapter titles, or if you have art to accompany your writing.

This page is very easy to edit and has just enough in all the right places to personalize this to your story's content. I've also added super easy instructions for deleting the splash title header and the menu, just in case you want to use this code but don't really need one or either of those elements. Enjoy, and I hope you're all having a wonderful holiday season! ♥

The Coding

Installation Guide

Paste into a custom style (or off-site equivalent if you don't have a paid account) and fill in the following!

Title Here - Page title
ICOURL - Page icon
Title/Header Content Here - Header title (can also be an image, multiple titles, or a combination of)
Chapter 1 through Chapter 5 - Menu chapter links
Chapter One through Chapter Five - Page chapter titles
Content here (x5) - Each chapter's body text

*Make sure to keep track of your anchor links. Each menu link has a #number for the a href and each chapter header has the same number for its id. For example the link for chapter one is a href="1" and the id for the corresponding chapter header is h2 id="1".

This enables the links to skip through the page to the correct sections. You can retitle these to anything you like as long as the link and the corresponding header have the same href and name to link them together.

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

Jetamie - Title font
Open Sans,helvetica,arial,sans-serif - Page text

https://i.imgur.com/mD4wsu8.png - Page background; add background-size:cover; to the body specs for a fullsize image

<header id="title">
	<div id="title-inner">
		Title/Header Content Here

<aside id="contents">
	<h3>Table of Contents</h3>
		<a href="#1">Chapter 1</a>
		<a href="#2">Chapter 2</a>
		<a href="#3">Chapter 3</a>
		<a href="#4">Chapter 4</a>
		<a href="#5">Chapter 5</a>

#fff - Menu and credit background
#fbfbfb - Main content background
#eee - Page background
#ccc - Selection/highlight background
#111 - Overall text
#000 - Links and headers (change this for a bolder accent color)
0,0,0 - All borders and box shadows (semi-transparent rgba value)

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!


( )Anonymous- this user has disabled anonymous posting.
( )OpenID
Don't have an account? Create one now.
No HTML allowed in subject
Notice! This user has turned on the option that logs your IP address when posting.