Tessisamess

Previous | Next

Story Time: Chapter-Based Reader



LIVE PREVIEW

Information

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!

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

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

TO DELETE SPLASH HEADER
<header id="title">
	<div id="title-inner">
		Title/Header Content Here
	</div>
</header>

TO DELETE MENU
<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>
</aside>

COLORS
#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!

Comments

Dec. 19th, 2017 10:36 pm (UTC)
Oh wow, I LOVE this.
Dec. 19th, 2017 10:54 pm (UTC)
Thank you so much! ♥ (Gonna be real, I can't wait to start using it for some of my Docs PSLs haha.)
Dec. 20th, 2017 03:43 am (UTC)
HOLY CRAP THIS IS AMAAAAAAAZING!
Dec. 22nd, 2017 08:55 pm (UTC)
AHHH TY! I llllove this one and I've been meaning to make something like it for a while now LOL.
Dec. 20th, 2017 03:06 pm (UTC)
You have out did yourself!
Dec. 22nd, 2017 08:55 pm (UTC)
Heee, tysm!! ♥
Dec. 21st, 2017 06:06 pm (UTC)
I am so in love with this.
Dec. 22nd, 2017 08:55 pm (UTC)
Yassss same, ty!
Dec. 23rd, 2017 07:16 pm (UTC)
I think I just died of happiness for this... Holy fuck I will find use for this, like... omg... this will be used!!

Dec. 30th, 2017 10:44 pm (UTC)
EEEEEEEEEEEEE psh boo ty! ♥ (We need to catch each other online sometime lmao.)
(Anonymous)
Feb. 15th, 2018 06:29 pm (UTC)

Some complications

Hi! So I love using your codes on other websites and making it my own. They're really fantastic! I really really love this code that you did, but when putting it on the normal website I make codes for, it hit a snag. It starts overspacing and glitching to where it only shows the main title. and I have no idea have to fix it. Any ideas?
Feb. 16th, 2018 07:42 pm (UTC)

Re: Some complications

Hi and thank you! If you need help with off-site support you'll need to show me the page, otherwise I'm really not going to have any idea what's going wrong.