I made a fansite a while ago and asked if anyone would be interested in a matching page pack. I got a few requests to go for it, but because I have no self control I ended up completely revamping the whole theme and making an additional blog theme (as well as the three matching pages). If you are currently using the older version, I highly recommend updating to the new code as there was a bunch of stuff that had to be fixed - most of the content you will have put into the html (like admins, links etc) will be easily pasted across as itâs mostly the styling thatâs changed.
Includes:
Fansite theme
FAQ page (fairly simple so can be used as an about page/some other text-heavy page)
Members page (can also be used as a blogroll)
Navigation/tags page
Head to @fansitepreview to check out the live preview as well as find links in the pinned post to preview all four codes (download links on the previews)
Small text removed (it looks great on your dash but itâs removed for easier readability on the blog)
optional footer
And then the point/idea of the matching pages is that you are able to transfer over any boxes from the main theme to the matching pages.
Tumblr credits include: @sorrism base code, @suiomi honeybee icons, @shythemes pxu photosets & note count shortener. All other credits are on creatre.tumblr.com/creds
Please like/reblog this post if you are using it, and consider donating to me on ko-fi @ taezs because this took forever. Any problems, queries or concerns, send me an ask on @creatre (so it doesnât get lost on this blog).
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 (temporary) | 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
page theme four: war paint by pirateskinned
âł static preview â pastebin
about / moodboard page theme with statistics, biography and social media tabs
five images, sizes can be found in the code though everything automatically resizes
up to eight custom links and room for a quote
basic html and css knowledge is required to use this page
created for the winner of my page theme giveaway, @lilys. thank you for giving me so much freedom! i had a lot of fun making this. âĽâĽâĽ
this is my entry for @codingcabinâs pagecraft challenge from the codingawards
donât use as base code, remove credit, take parts of the code or repost / claim as your own.
do edit and make it your own. if you like my themes, please consider supporting me.
please like / reblog if you plan on using.
about page
with four links (or more), a large image (400 x 600), text messages with icons (70 x 70), statistics and a large text area
basic html knowledge is useful when editing
read my terms of use. please like or reblog if you plan on using!
The preview page might NOT look the same as the actual page. And the javascript might NOT work on the preview page. You need to go to the actual page to double check.
How to use:
Please follow the tutorial before asking
A demo code here (please DONâT download this one, but you can learn how to code)
4 filters + genre filters + a favorites filter. if you know code, itâs pretty easy to add as many filters as you want and change any of the filters i have set.
10 built in fic recs but you can add as many as you want by following the instructions in the code
typical theme rules apply: like/reblog if you use, donât steal, you can edit in any way as long as you donât use it as a base, ect. if you have any questions, ask me and iâll try and answer. as this is a page theme, youâll need some knowledge of html/css to edit it but iâve done my best to explain everything inside the code. lmk if thereâs anything wrong in the code!
a minimalistic and versatile tags page that features
dropdown subtags inside the main tag section
unlimited tag sections, tags and subtags. templates are included in the code.
2-4 columns. 3 is the default. instructions on changing them are here.
custom number of and header links (suggested number is four)
custom colours for background, border, scrollbar and more
dropdown link tutorial by acuite.Â
basic coding knowledge is required to use this page, especially if you want to change the number of columns. if you need help with anything at all, please send me an ask!Â
thanks to jennifer for all the help!
reblog/like if using and please do not repost or steal!
page two: elderflower â a responsive navigation/tags page featuring lots of emojis. made for codingcabinâs fruitilicious challenge
version one preview: without sidebar icon / code: pastebin, github
version two preview: with sidebar icon / code: pastebin, github
features: search bar, tag dropdowns, option to give each tag box a unique hover colour, optional emojis. the page is also fully responsive; resize your browser window to see it in effect.Â
notes:Â
instructions on how to edit the tags, change/add/remove the emojis, and change the link hover colours are provided in the code.
basic knowledge of html and css is highly recommended for editing the code
⢠faq page
⢠100x100px icon image, will auto resize if original image is square
⢠one line for title
⢠one line for description (keep short)
⢠5 links (home, ask, three extras; all may be changed)
credits:
⢠iframe fix by cyantists
⢠icon font by fontawesome
quick terms of use:
⢠do not remove any credits
⢠do not take parts of the code for your own use; google what you need
⢠do not alter and/or redistribute [more info here]
⢠please like or reblog if youâre using the theme; Iâd love to see how you customized it!
extra notes:
⢠part of my everyday6 inspired coding series
⢠inspired by day6âs Iâm SeriousÂ
⢠if thereâs any problems encountered, donât hesitate to contact me @shuveethms ! be sure to be specific about what problem youâre experiencing so I can help you as smoothly as possible!
⢠coded in google chrome
⢠note: since this is a page, all colors/edits must be made in-code.  Everything should be labeled in the code but if something is missing or unclear, let me know!
!!! None of the images and texts are included in the theme (except the copyright container and the containers titles) so at first, your blog should look like this (x). You might need some basic knowledge of html (here) and (here)
FEATURES:
Fansite theme - there are A LOT of options.
245px width sidebar image.
navigation links: index and message + 4 other links (optional).
navigation links subtitles (optional).
all the containers are editable from the customization page (no need to edit the code unless you want to change the containersâ titles and/or change the icons - you can find them here).
searchbox (optional).
all containers are optional except the description (obviously), âstatisticsâ, âmembersâ and âcopyrightâ that are included by default.
you can choose to have the events scrolling or not.
option to keep both or one of the sidebars fixed (not scrolling with the posts).
you can also directly insert a twitter widget code from the customization page.
pagination is fixed at the bottom of the blog.
affiliates images: 40x40. you can upload them from the customization page (i included 10 images by default) and you can choose to show/hide them too. you can as well insert the urls and names.
fonts and fonts sizes you can change from the customization page: containers font, post font and âsmallâ font.
as usual, colorized scrollbar and selection.
affiliates icons credit (x).
Please like/reblog if youâre using the theme, thank you :)
Before asking anything, PLEASE check out the customization page carefully, take some time to figure where things are, how to show/hide and customize them. I honestly tried to include as many options as possible on the customization page to make it easier for you to use.
