Styled after AO3, this pack includes a theme and matching pages, and was designed for writers and readers alike.
🖋️ Theme 11: Archive Of Your Own
Live preview | Static previews: index page, permalink | Code
Full-width posts in an AO3 work index page format
Sidebars with optional sections such as featured tags, updates, rules, progress bars, and more
Unlimited custom links (display on sidebar or in top navbar), plus several social links in the footer
Add a custom logo beside/replacing your avatar
Inbuilt tag filtering plugin by glenthemes
All fields editable directly in the Customize menu, no HTML required. See below the cut for a full guide
🖋️ Page 3: Archive Records
Preview | Code
A WIP page designed to resemble an AO3 work page
Add tags for ratings, warnings, fandoms, characters, and more, as well as statistics like start dates, word counts etc.
Spaces for summary, start and end notes, and the 'work' itself
🖋️ Page 4: Archivist
Preview | Code
A combined about/navigation page based on the AO3 profile page
Include user statistics or any data you'd like, plus a longer bio
Sidebar navigation with link sections - unlimited links and link groups
The theme and pages all include options for multiple color palettes (initially set to Default and Reversi), text styling (choice of Tumblr/Google fonts and casing options), and more. -
Each page includes instructions on how to edit it, and color/image variables have been gathered together to make customization easier. While not necessary, basic knowledge of HTML is helpful.
For help, check my codes guide, or feel free to send me an ask. Theme 11 customization guide and credits are under the cut.
Theme 11 customization
Regarding the simpler fields:
"Secondary title" refers to the title just above the posts, under the header and navigation. This defaults to "[Total posts] Works in [Username]" when the field is left empty.
"Filtered tags" takes a comma-separated list of tags, entered exactly as they'd be written in the Tumblr post editor but without the hashtag. E.g. the tags #politics, #red and blue, and #green would be entered as "politics, red and blue, green" (make sure there's spaces, and no comma after the last item!). The filtering plugin will then put a warning message over any posts with those tags, along with a button letting you show the post.
"[Section] title" act as the headers for the corresponding section, if provided. "Custom links title" defaults to "Pages" if nothing is entered, and is used when the custom links are displayed on the navbar.
"Featured tags" takes a comma-separated list of tags, in the same format as Filtered tags. This field will display links to those tags, along with the number of posts in that tag on your blog, in the left sidebar.
The Recent posts section displays the 5 most recently posted/reblogged posts on your entire blog, displaying in the left sidebar. If you enter a tag under "Recent posts tag", it'll instead display the 5 most recent posts in that tag on your blog. Only 1 tag is allowed.
Rules and FAQ
Both these sections work the same way. Each new item, a rule or a question, consists either of one statement, or a statement and some more text, usually as an answer or additional note. E.g. the screenshot below shows three rules, where the last one has more text in the dropdown.
To create an item, prefix it with <li> . To add more text, create a <li> item and add a [more] label underneath, then write your extra text after that. To illustrate, here's the Customize page code for the above:
Updates
This section is similar to Rules/FAQ, though it flips the order around. After each <li>, first list the date, then add the [label] marker, then add your actual update. Again, here's an example:
And here's the Customize page code that created that:
Toggles
This section displays checked/crossed-out items, and uses a simpler version of the formatting for the above sections. Use <li> for each new item, then add [on] or [off] at the end, depending on whether you want it checked or crossed off. Here's an example:
And here's the corresponding Customize code:
Progress bars
This section also uses <li> items, where each item has two parts: the text label, and the number(s) for the progress percentages, put inside square brackets like with the other sections. Here's an example (note how the top two use fraction values while the bottom one uses a percentage):
And here's the code that made these. In short, the format is <li> Text here [##/##], or <li> Text here [##%], where ## refers to any number.
Social links in footer
The footer links, aside from the email and personal website fields, take usernames or user IDs for various websites. Be sure to check you're not entering a username in a user ID field!
The Email address field takes a standard email in the format [email protected] and adds a link to let people mail that address.
The Personal website fields will generate a link in the footer's Follow section. Personal website name is the human-readable text label for the generated link, and Personal website URL is the URL that will open when the generated link is clicked. Make sure to add https:// to the start of the personal website URL so the generated link doesn't just redirect you to a different part of your blog.
Credits
Layout and design by Archive of Our Own
Style My Tooltips by malihu
Phosphor Icons
Expanded Tumblr localization and NPF photosets plugin by codematurgy
Syncs with your mobile theme colors and mimics the new in-dashboard blog view for a consistent look across platforms.
Static previews: index page, permalink | Code
Features:
Appearance options (show/hide header image/avatar/title/description, title font options, and background/text/accent colors) synchronize with mobile settings
Optional: Featured posts section, updates section, and blog member list in sidebar (require some HTML editing; see under the cut for instructions)
Unlimited custom links, plus a highlighted link under the title
Optional second palette
Customizable post width and font size
Optional search bar, like/reblog buttons, date/timestamps, tags (plus a show tags on click option), and Archive/Random links
Responsive
Supports new post types/pinned posts
And more!
For help, check my theme guide, or feel free to send me an ask. Theme credits and an HTML editing guide for the special sections are under the cut.
NOTE THAT ALL SECTIONS ARE DISABLED BY DEFAULT, TO AVOID HAVING EMPTY/UNEDITED SECTIONS. If you want a particular section to display, make sure you enable it in the Customize menu before making any changes, so that you can see it as it's being edited.
All of the below instructions assume that you've gone to your Customize page, then opened the "Edit HTML" menu.
Again, if you have trouble making your edits work, feel free to send me an ask or a DM for help.
Note for HTML beginners
Every bit of text or code is wrapped inside "tags", which have arrow brackets on either side. For example, a paragraph is placed inside <p> tags.
Every element has an "opening" and "closing" tag; the closing tag looks just like the opening tag, with a / after the opening bracket. The content inside one section is bracketed by these; for example, a paragraph would look like this:
<p>Text here!</p>
In the above line, <p> is the opening tag, and </p> is the closing tag. Tags of this sort can be placed inside each other:
<p>Some <span>special</span> text.</p>
Note that the "span" tags, both opening and closing, are both inside the "p" tags. You don't want a misordered set, like "<p>Some <span>special text.</p></span>". The opening tag nearest to the start should also have its closing tag nearest to the end.
It is extremely important that while editing the HTML for your theme, you make sure all opening tags have a matching closing tag. If you have a <div> tag, but no matching </div> tag, this might break the theme.
Featured posts
This section fetches the 3 most recent posts from a chosen tag on your blog. To select the tag:
Ctrl+F to "EDIT YOUR TAG HERE".
On that line, there will be a link inside quotation marks, ending in "tagged=featured".
Change featured to the tag of your choice; for example, "tagged=photo". This tag can include spaces, such as "tagged=my writing".
Save and ensure your posts show up as intended.
By default, the tagged posts are fetched from your blog, but you can change this so that the featured posts are from a different blog:
Ctrl+F to "EDIT YOUR TAG HERE".
On that line, there will be a link inside quotation marks, starting with "https://{Name}.tumblr.com".
Change {Name} to the blog username of your choice; for example, "https://starlightthemes.tumblr.com".
Save and ensure your posts show up as intended.
Be careful not to change any other parts of that section. The code for fetching the posts from blogs is easy to break.
Updates section
The updates section has two editable parts: the title, and the actual updates.
To edit the title:
Ctrl+F to "EDIT HERE: UPDATES".
Scroll a few lines down, until you find the line reading "Latest updates".
Change "Latest updates" to say whatever you want. Make sure the text stays inside the ... tags. For example, if you want the heading to read "My activity", that line of code should read "My activity".
To edit updates:
Ctrl+F to "EDIT HERE: UPDATES".
A little under this line, you'll see a template, with the outermost tags reading <div class="update">...<;/div>. If you're adding a new update, copy this template.
Scroll a few lines down, until you find the line reading "".
Now, for each update, paste the template once over (two updates are present for you to start with), and edit three things:
-> "3-LETTER MONTH HERE": The first three letters of the update month, e.g. "Jan".
-> "2-DIGIT DATE HERE": The two-digit version of the update date, e.g. "01" or "31".
-> "UPDATE TEXT HERE": The actual text that'll show up as the update.
Make sure that all the updates are separate- the starting and the ending of two updates shouldn't overlap.
Make sure all your updates are above the line reading """.
Save and make sure things look how you want them to.
Members list
To change the title of the members section:
Ctrl+F to "EDIT HERE: MEMBERS LIST".
Scroll a few lines down, until you find the line reading "Blog members".
Change "Blog members" to say whatever you want. Make sure the text stays inside the ... tags. For example, if you want the heading to read "The gang", that line of code should read "The gang".
Scroll further down, until you find the line that reads "{lang:Group members}". Again, change this to your chosen title, such as "The gang".
The actual members list can be customized in two ways. One, for group blogs, you can have it automatically fetch the blog members' main blog names/titles/icons. To do this, turn on "Members list" and turn off "Custom members list" in the main theme settings.
The other option is to manually add any group members and their icons/links. This will also allow you to add customized names and descriptions for each member. To use this option, turn on BOTH "Members list" and "Custom members list". Then:
Ctrl+F to "EDIT HERE: MEMBERS LIST".
A little under that, you'll see a template with the outermost tags reading <a class="member" href="//BLOGNAME.tumblr.com">.... If you're adding members, copy this template.
Scroll a few lines down, until you find the line reading "".
Now, for each member, paste the template (two members are present for you to start with) and edit three things:
-> "BLOGNAME": Next to "href" in the tag, and next to "src" in the tag. Change this to your member's username, such as "starlightthemes".
-> "MEMBER NAME": Takes the place of the username. This will show up in bold at the top.
-> "MEMBER DESCRIPTION": Takes the place of the blog title. This will show up at the bottom.
Make sure that all the members are separate- the starting and the ending of two members shouldn't overlap.
Make sure all your members are above the line reading """.
Save and make sure things look how you want them to.
Theme credits: Layout/design/icons by Tumblr, Style My Tooltips by malihu, featured posts by Fukuo, NPF photosets plugin by codematurgy, dark/light mode toggle by eggdesign, custom audio posts by annasthms, scroll to top script by Fabian Lins
Preview header image from Only Vector Backgrounds.
Inspired by Sung Hyunjae and Seseong Guild from The S-Ranks That I Raised.
Static previews: index page, permalink | Code
Features:
Customizable icons, chosen from Cappuccicons: 1 blog-wide icon, and up to 8 individually customizable links (see under the cut for how to add custom links)
Text options: choose between upper/lowercase for special text, Google and Tumblr fonts, and font sizes
Appearance options: customizable post widths and sidebar width, and a variety of color options, including an (optional) light/dark mode toggle
Optional title/avatar/description, search bar, like/reblog buttons, date/timestamps, tags, and Archive/Random links
Responsive
Supports new post types/pinned posts
And more!
See more about how to customize this theme and theme credits under the cut. For additional help, feel free to send me an ask.
Image options
There are various options for avatar and background images. For avatars:
No avatar: Turn off "Show Avatar" and remove the LM Avatar image.
Single avatar on both light/dark modes: Turn on "Show Avatar" and upload a default avatar.
Different avatar on light and dark mode: Turn on "Show Avatar", upload a default avatar, and upload the LM Avatar image.
Avatar only on one color mode, but not both: Turn off "Show Avatar" and upload the LM Avatar image. (The avatar will only show on "light" mode.)
And similarly, for background images:
No background images: Remove the Background image and remove the LM Background image.
Single background image on both light/dark modes: Upload the Background image.
Different background image on light and dark mode: Upload the Background image and the LM Background image.
Background image only on one color mode, but not both: Remove the Background image and upload the LM Background image. (The background image will only show on "light" mode.)
Customization of icons in general
Icons are taken from Cappuccicons. To customize them, find an icon you like from the Cappuccicons page; then, insert the text name of that icon into an icon field, following the pattern of the pre-filled icons.
For example, the screenshots above use "flash-o" and "paw" for "Main Theme Icon". They're visible just under the navigation (and in place of the color mode toggle, if it's disabled).
Make sure NOT to include quotes around the name! Write flash-o and not "flash-o" in the relevant fields.
Customization of custom pages/navigation
For the navigation under the description box, you can choose to use either (1) the inbuilt Tumblr pages or (2) manually enter links using the fields provided in the theme options.
To use option 1, turn "Standard navigation icons" on., then add links using Tumblr's "add a page" option (see here for a guide).
This method technically allows for infinite links; however, I strongly recommend you have only 8 or fewer links, so that they don't overflow the sidebar.
All links will use the same icon, the one listed in the "Standard navigation icon" text field ("link" by default).
The text entered in "Show a link to this page" will appear as a tooltip on the link when it's hovered on.
To use option 2, turn "Standard navigation icons" off, and add links using the "Page # link/label/icon" fields in the Customize menu.
This method lets you add only up to 8 links, but you can give each one its own icon using the corresponding "Page # icon" field.
The text in "Page # label" will appear as a tooltip on the link when it's hovered on.
Navigation items only appear if the "Page # link" field is filled in.
Theme credits: Tippy tooltips by atomiks, Cappuccicons by Suiomi, custom like buttons by Demirev, NPF photosets plugin by codematurgy, dark/light mode toggle by eggdesign, custom audio posts by annasthms, scroll to top script by Fabian Lins
Inspired by a washi tape-decorated journal spread created by a friend.
Static previews: index page, permalink | Code
Features:
Decorate 4 tapes using solid colors or images! Choose where and how the images are displayed—tiled across the theme, or as singular accents
Appearance options: Customizable post width, multiple font display options, and a variety of color options, including an (optional) color palette toggle
Tag filtering plugin by glenthemes—edit directly from the Customize menu, no HTML required (see below the cut for usage notes)
Unlimited custom links
Responsive
Supports new post types/pinned posts
And more!
For help, check my theme guide, or feel free to send me an ask. Theme credits are under the cut.
Tag filtering
In the Customize menu, scroll down until you find the text input field labelled "Filtered tags". By default, this is set to "spoiler, spoilers" (without the quotation marks). In this list, you can enter whatever tags you want to filter exactly as you'd write them in the Tumblr post editor, without the hash. Separate each new tag with a comma and a space.
For example, if I wanted to filter the tag #politics, i would simply write "politics". If I also wanted to filter #red and #green, I would now write "politics, red, green". Note that the last tag does not have a comma after it, and that spaces must be included!
Credits
Layout inspired by stuffandsundry, with permission
Style My Tooltips by malihu
Phosphor Icons
Custom like buttons by Demirev
NPF photosets plugin by codematurgy
Palette toggle by eggdesign
Custom audio posts by annasthms
Tag filtering by glenthemes
Scroll to top script by Fabian Lins
Images used in the preview:
Tiles: Green (title tape), pink (tape 1), yellow (tape 2), blue (tape 3)
A theme replicating Discord's layout, using unnested captions for a server-like feel.
Static previews: home page, permalink | Code
Features:
Responsive
Unlimited custom links
Supports new post types/pinned posts
Pagination or infinite scroll (manual load/automatic)
Light/Dark modes: set your default color mode + optional toggle
Custom colors for special text/links/other accents
Custom fonts and text sizes
Optional header image, avatar, description, search bar, like/reblog buttons, tags, Archive/Random links, and date/timestamps
(Optional) Custom Discord tag#1234 - set it to whatever you'd like!
(Optional) FAQ/Submission Guidelines sections that appear above the form on Ask/Submit pages
(Optional) Use the default Discord fonts if the viewer has them downloaded!
And more!
Given the complexity of the light/dark modes, the gray/white backgrounds aren't customizable, but a good deal else is!
Theme credits: Original design by Discord, tooltips by atomiks, Tumblr controls by seyche, icons from Font Awesome, custom like buttons by Demirev, infinite scroll by Paul Irish+Metafizzy, NPF photosets fix by glenthemes, dark/light mode toggle by eggdesign
Designed with webcomic blogs in mind, this doubles as a standard blog theme.
Static previews: index page, permalink | Code
Features:
Comic focused options: Comic navigation (option for image or text links), home/"read chronologically" buttons
Option for header image and two background images
Option for tall/fixed-on-scroll header
Custom colors, fonts (Google/Tumblr fonts), font sizes, and post sizes
Optional title/avatar/description, search bar, like/reblog buttons, tags, Archive/Random links
Responsive
Four special tag links, plus unlimited custom links (see my theme installation guide for how to add these)
Supports new post types/pinned posts
And more!
My first ever comic theme, and an entry for the Opposites Attract challenge! Features some special scripting to ensure chronological page navigation works smoothly regardless of your pagination choices.
See more about how to customize this theme (especially for comic usage) and theme credits under the cut.
Customization in general:
Use either all images or no images for page navigation (first/previous/next/last), as the styles for text navigation are only activated when no images are present.
If you'd like, you can change the four custom tag links to redirect to other non-tag pages. To do this, search for "TAG LINKS" in the theme code, and remove "/tagged/" from the href attributes (href="/tagged/{text:Tag 1 name}" -> href="{text:Tag 1 name}"). You will now be able to add any link in the "Tag 1 name" field; this can be repeated for Tag 2, Tag 3, and Tag 4.
Customization for webcomic blogs specifically:
For the page navigation (first/previous/next/last) to lead to the appropriate pages, set your blog to display only one post per page. Do this by going to Advanced options on the Customize page, then setting Posts per page to 1.
For the "First" navigation link, add the link to your first comic page under the "First comic page URL" field. To accommodate for future blog URL changes, you might want to write the link simply in the format "/post/1234567890", deleting all other parts of the URL.
Theme credits: Layout and design concept by kernelbastard, Tippy tooltips by atomiks, icons from Font Awesome, custom like buttons by Demirev, NPF photosets plugin by codematurgy, dark/light mode toggle by eggdesign, custom audio posts by annasthms, scroll to top script by Fabian Lins
A simplistic, text-oriented theme inspired by newspapers.
Static previews: index page, permalink | Code
Features:
(Optional) Vintage newspaper-like styling: sepia filtering on images, a fancy description, and the current date displayed at the top
Custom colors for text and background, with optional light/dark modes (plus a special version of the theme offering glenthemes' post filtering plugin, that synchronizes with your selected colors)
Custom post sizes and sidebar positioning
Custom font sizes, with a choice between Tumblr and Google fonts for the main body and title, along with a default newspaper title font (see note 2)
Optional avatar/description, search bar, like/reblog buttons, tags, Archive/Random links, and timestamps
Responsive
Unlimited custom links
Supports new post types/pinned posts
And more!
Notes:
For how to add custom links/enable the theme for mobile, see my theme installation guide.
To use the default newspaper title font in the header, disable the "Use Tumblr fonts for title" toggle, then leave the "Google font for title" field empty.
Theme credits: Tippy tooltips by atomiks, Feather icons from Cole Bemis, custom like buttons by Demirev, NPF photosets fix and spoiler tags plugin by glenthemes, dark/light mode toggle by eggdesign, stamp patterning by orhanveli, custom audio posts by annasthms
A super customizable theme, with everything you could want visible at a glance.
Static previews: index page, permalink | Code
Features:
Custom colors for everything
Custom post sizes
Custom font size; choice between Google fonts and Tumblr fonts
(Optional) Banner images for the background and each sidebar, with customizable positioning and sizing
Optional avatar/title/description, search bar, like/reblog buttons, tags, Archive/Random links, and timestamps
Like/reblog/permalink/source/via buttons stay in place when scrolling
Light/Dark modes: set your default color mode + optional toggle
(Optional) FAQ/Submission Guidelines sections that appear above the form on Ask/Submit pages
Collapsible sections, for use on custom blog pages (tutorial)
Responsive
Unlimited custom links
Supports new post types/pinned posts
Pagination or infinite scroll (manual load/automatic)
And more!
Notes:
For how to add custom links/enable the theme for mobile, see my theme installation guide.
Theme credits: Tippy tooltips by atomiks, icons from Feather, custom like buttons by Demirev, infinite scroll by Paul Irish+Metafizzy, NPF photosets fix by glenthemes, dark/light mode toggle by eggdesign
