theme sixteen: lavender — an attempt at a sidebar grid theme with big posts
previews:static preview,live preview /install:theme garden
features and options:
- one or two columns
- 100px x 100px sidebar image
- if you pick the one column option, your post size options are: 400px, 450px, 500px, 540px, 570px. if you pick the two column option, posts will be responsive to your screen size. please do not ask me to change the post sizes on the two column version.
- links dropdown with space for up to six custom links and an unlimited number of Tumblr pages
- hide or show captions and tags on index page, optional rounded corners
- ten body font options, five title font options, font sizes from 12px to 18px, and all colours customizable.
- responsive for both desktop and mobile devices
notes:
- Tumblr’s customize page is very buggy and when you first install the theme, you have totoggle the toggle options on and off to get them to work properly.
- if you’re a gif/graphics maker and you want your images to show up exactly 540px wide,pick the 570px post sizeoption to account for the post padding.
- sidebar link icons are fromfeather icons. if you want to change them, go tothis site, find the name of the new icon you want, and enter it in the requisite text field in the customization panel.
theme fifteen: magnolia — dual sidebar one-column theme with gradient accents (and gradient icons!), per the results of this survey from a few months ago.
preview: static preview /live preview
install:theme garden / pastebin / github
features and options:
- 175px wide sidebar image and an optional 100px x 100px icon image.
- post styling: option for tags on click or show tags, options for rounded corners.
- post sizes: 400px, 450px, 500px, 540px, 600px.
- hide or show captions on index.
- up to four custom links and an unlimited number of Tumblr pages.
- ten body font options, five title font options, font sizes from 12px to 18px, and all colours customizable.
- responsive for both desktop and mobile devices.
notes:
- Tumblr’s customize page is very buggy and when you first install the theme, you have totoggle the toggle options on and off to get them to work properly.
- this was going to be an npf-friendly theme where npf and legacy posts were styled to look exactly the same. I got most of the way there, but then Tumblr changed the npf styling on me and I gave up. so this is a much more npf-friendly theme than my other ones, but I’m not making any guarantees, and please do not message me about npf posts on this theme because I have officially given up on npf.
- likewise, please don’t message me about removing the coloured letter/period in the title; it’s a design choice!!! I like it!! (also I’m not responding to customization questions anymore)
theme fourteen: camellia — a Windows 11/Mac OS mashup grid theme with a slide-out sidebar. made forcodingcabin’s opposites attract challenge!
previews:grid preview,one-column preview
features and options:
- slide-out sidebar with a 500px sidebar image, space for description, extra navigation links, and a search bar
- footer with space for up to three custom links, weather status, local time and date.
- optional updates tab. if you don’t turn this on through the customization panel, it won’t show up.
- one, two, or three columns
- post sizes: 300px, 350px, 400px, 450px, 500px, 540px
- optional background image
- hide or show captions and tags on index page
- ten body font options, font sizes from 12px to 18px, and all colours customizable.
- responsive for both desktop and mobile devices
notes:
- Tumblr’s customize page is very buggy and when you first install the theme, you have totoggle the toggle options on and off to get them to work properly.
- the navigation section in the sidebar has space for up to five custom links and as many Tumblr page links as you want. however, to get them to show up, you need to make sure the “Menu Navigation Section” option is enabled in the customization panel.
- icons are fromphosphoricons; to change the icons, go to thephosphoricons site, find the name of the new icon you want, and input the name of the new icon into the relevant text fields in the customization panel.
page six: poppy— media page with isotope filtering and a slide-in description for each item.
features and options:
- isotope filtering with space for multiple filter groups and the ability for users to select multiple filters from the same group.
- space for a one to five rating for each media item.
- slide-in description with space for links.
- responsive for small screen sizes and mobile devices.
notes:
- this page uses CSS variables for easier customization and includes instructions on how to edit within the HTML, but you will needbasic HTML knowledge to use this page.
- images for each media item are 250px x 375px, but will resize automatically without stretching.
credits:
- tippy.js tooltips by atomiks
- feathericons by Cole Bemis
- isotope combination filtering by metafizzy /tutorial by magnusthemes
theme twelve: anemone — spotify-inspired header theme for@codingcabin’snew year, new theme challenge; featuring an optional music player and the colours #f1a5c0, #5ea, #facade, and #7ea as accents.
features and options:
- header with an optional 125px x 125px profile image.
- optional header background image (screen width x 225px. I recommend choosing an image no less than 1920px in width).
- fade-in navigation bar on scroll with a back-to-top button.
- optional music player with space for one song.
- post sizes: 450px, 500px, 540px, 600px, 650px, 700px.
- show/hide captions, show/hide tags, optional rounded corners, customizable post margins and photoset gutters, dropdown post info with via/source links.
- up to four custom links in the header and an unlimited number of Tumblr pages.
- ten body font options, font sizes from 12px to 18px, and all colours customizable.
- responsive for all screen sizes and mobile devices.
notes:
- your audio file must be in .mp3 format and you must host it on Google Drive or Dropbox.** read below the cut for instructions** on how to upload your audio file and use the music player.
- tumblr’s customize page is very buggy and when you first install the theme, you have totoggle the toggle options on and off to get them to work properly.
- song in preview isLonesome Love by Mitski.
theme eleven: rosemary — responsive and minimal sidebar or header theme with a slide-out navigation menu and a bunch of customization options.
previews:sidebar preview /header preview /live preview
install:theme garden /pastebin /github
features and options:
- slide-out navigation menu with up to six custom links, an unlimited number of pages on your blog, and a search bar
- option to add a header/sidebar image, option to show blog icon, or option to show both
- space for two optional statistics/updates in your header or sidebar
- post sizes: 400px, 450px, 500px, 540px, 600px
- lots of post styling options: centered or left-aligned text, two styles of post info (minimal with icons only or with icons and text), show or hide date, show/hide/hover tags, show or hide captions, customizable post margins
- font sizes from 12px to 18px, eleven body font options, and four title font options. all colours are customizable.
- responsive for all screen sizes and mobile devices.
notes:
- the icons in your blog stats are from Feathericons.com; to change them, go to the site, find the name of the new icon you want, and add the new icon name into the slot in the customization panel.
- tumblr’s customize page is very buggy and when you first install the theme, you have to toggle the options on and off to get them to work properly.
theme ten: nightshade — fansite theme with two sidebars and a ton of customization options. can be easily edited for other non-fansite uses. please read through thecustomization guide when customizing the theme.
previews:preview one,preview two /code:pastebin,github
features and options:
- header image that can be full-screen or have a fixed width, with space for an optional title overlay.
- optional bar with your username, icon, and search bar.
- the sidebar has eight sections with space for your description, navigation links, updates, projects, blog members, affiliates, statistics, and blog status. you can choose to show or hide each individual section through the customization panel, depending on what kind of content you want to display.
- up to four custom links in the fixed navigation bar at the top of the screen and up to eight custom links in the sidebar.
- post sizes: 400px, 450px, 500px, 540px.
- lots of post styling options: option for tags and reblog info on click, optional copy link to post button, adjustable post margins and photoset gutter, six body font and six title fonts, font sizes from 12px to 18px.
- footer with space for a disclaimer and social media links
notes:
- you must manually input most of the sidebar content in the HTML. thecustomization guide will explain how to do so, but this theme is intended for those who know basic HTML syntax. pleaseread through the guide! i won’t answer questions covered by the guide.
- tumblr’s customize page is very buggy and when you first install the theme, you have to toggle the options on and off to get them to work properly.
PAGE PACK ONE
page four: hyacinth —an about page with space for facts, a quote, social media links, skill bars, lists of your favourite things, and a moodboard with a colour palette.
page five: narcissus — a tags/navigation page with space for dropdowns and a search bar.
features:
- both pages are responsive for desktop and mobile devices
- made to matchtheme nine: lilac
credits:
- the social media icons in the about page are fromfontawesome, and all the rest are from feathericons by Cole Bemis. to change the icons, go to the icon sites, find the name of the icon you want, and replace the icon name with the name of the new icon.
- tippy.js tooltips by atomiks
both pages have instructions on how to edit in the html as well as css variables to make customization easier, but basic html knowledge will come in very handy here.
theme nine: lilac — one-column sidebar theme with an optional header inspired by social media post dashboards. made to commemorate the one-year anniversary of when i started this blog. it’s been a crazy year and i can’t believe how much this blog has grown, so thank you to all of you!
previews:static preview /live preview
install:theme garden / pastebin / github
features and options:
- sidebar with a 100px by 100px circular image and up to three custom links
- optional header with a search bar, optional header image, and up to seven custom links. header image can be any height and is the same width as whatever post size you choose.
- posts sizes: 400px, 450px, 500px, 540px.
- option to show or hide captions, show tags or tags on click, optional post dropdown menu with extra post info.
- options include: post margin, photoset gutter, drop shadows, rounded post and photo corners.
- first npf photoset in a post will be converted to a regular photoset, thanks tothis script by annasthms and codematurgy’snpf photoset script.
- responsive for both desktop and mobile devices.
notes:
- tumblr’s customize page is very buggy and when you first install the theme, you have to toggle the options on and off to get them to work properly. if something doesn’t look right or the post captions disappear, save and exit because 99% of the time it will look fine on your blog.
- icons are fromFeather Icons and if you want to change them, go tothe site, find the name of the icon you want, and enter it in the space in the customization panel.
- there are only three custom links in the sidebar. links four to ten are in the header. if you do not toggle the header on, none of the links in the header will show up.
- matcheshyacinth about page and narcissus tags page
page three: tansy — a responsive tabbed works in progress/fanfic page as requested by an anon a few months ago.
preview / code:pastebin,github
features:
- unlimited number of tabs: you can add as many works as you want.
- each tab has a 400px x 600px cover image. whatever image you add will resize to fit the dimensions.
- space for details, summary, tropes, links, characters, important relationships, and a quote.
- css variables for easier customization.
credits:
- tabs adapted from this stackoverflow thread
- feather icons by Cole Bemis
- tippy.js tooltips by atomiks
- character icons in preview byherbologies
notes on customization are included in the code, but basic html knowledge will go a long way towards helping you customize this.
theme eight: dahlia— twitter-inspired theme, as requested by an anon, with an optional popup that can be fully edited from the customization panel. (updated may 5, 2020)
preview / code:pastebin,github
features and options:
- optional header image and optional profile image. header image width is whichever post size you choose + 100px, profile image is 125px x 125px and can be square or circular.
- header has space for up to three custom links and three statistics. if you want to change the statistics icons, go tofeathericons, find the name of the icon you want, and input the icon name into the customize panel.
- optional popup: this can be fully customized from the customization panel. has space for you to add extra text and add up to six custom links. also has space for you to put up three sideblogs and a section for you to add up to three updates. make sure you enable it in the customize panel if you want to use it!
- post sizes: 400px, 450px, 500px, 540px, 600px.
- captions can be displayed on top or above posts, or you can choose to hide captions on index.
- NEW:first npf photoset in a post will be converted to a regular photoset, thanks tothis script by annasthms and codematurgy’snpf photoset script
- option to hide tags
- responsive for desktop but not for mobile devices
- font sizes from 12px to 16px and nine different font options
- all colours customizable
notes:tumblr’s customize page is very buggy and when you first install the theme, you have to toggle the options on and off to get them to work properly. if something doesn’t look right or the post captions disappear, save and exit because 99% of the time it will look fine on your blog.
theme seven: bluebell— one column sidebar theme inspired by pantone’s 2020 colour of the year, classic blue. (updated may 13, 2020)
preview / code:pastebin,github
features and options:
- option to show64px x 64px icon,190px sidebar image, or neither
- post sizes: 400px, 450px, 500px, 540px, 600px
- left or right sidebar
- optional search bar on dropdown
- optional updates tab on dropdown within the sidebar. the updates tab can be fully edited from tumblr’s customize panel, just make sure you enable it in the customize panel if you want to display it.
- dropdown with up to six custom links
- NEW:first npf photoset in a post will be converted to a regular photoset, thanks tothis script by annasthms and codematurgy’snpf photoset script
- responsive for both desktop and mobile devices
- show/hide/hover tags, show/hide captions on index, show post source icon
- customizable photoset gutter and post margin
- font sizes from 12px to 16px and nine different font options
- all colours customizable
notes:tumblr’s customize page is very buggy and when you first install the theme, you have to toggle the options on and off to get them to work properly. if something doesn’t look right, save and exit because 99% of the time it will look fine on your blog
theme six: holly— header/sidebar theme as requested by an anon. you can choose either a header or a sidebar on the index page, and you can choose one or multiple columns. (updated june 8, 2020)
previews:header with grid,sidebar with one column /code:pastebin,github
features and options:
- responsive for both desktop and mobile devices
- header or sidebar on index page. sidebar on permalink page. if you pick sidebar on index, it will show as a header on tablets and mobile devices.
- post sizes: 300px, 350px, 400px, 450px, 500px, 540px
- one, two, or three columns
- optional blog icon in your header/sidebar
- NEW: customizable photoset gutters (from 1px to 4px) and post margins
- NEW:first npf photoset in a post will be converted to a regular photoset, thanks tothis script by annasthms and codematurgy’snpf photoset script
- show/hide/hover tags, show/hide captions on index, show/hide note count on index, show/hover like and reblog buttons
- eleven different fonts and five font sizes
- up to five custom links, all colours customizable
note: tumblr’s customize page is buggy as hell. i recommendswitching all the options on and off when you first install the theme, and then save and exit. even if something doesn’t look right on the customize page, it should look fine on your actual blog.
theme five: honeysuckle — a theme aimed at text-heavy and writing blogs, but works with any kind of posts. focuses on readable text and larger post sizes. (updated may 5, 2020)
preview / code:pastebin,github
features:
- optional 70px x 70px icon
- post sizes: 450px, 500px, 540px, 600px, 650px
- optional search bar
- show/hide/hover tags, show/hide note count on index page
- NEW: improved options for text styling — option for left or justified text, more colours, and more
- NEW: improved compatibility for npf photosets, and will convert the first npf photoset in a post to a regular photoset
- up to 5 custom links, all colours customizable
- responsive for mobile devices
- FIXES:fixed issue where sidebar wasn’t scrolling properly when content overflowed, fixed issue where mobile slide-in sidebar would sometimes disappear after resizing the browser window
note: tumblr’s customize page is buggy as hell. if something doesn’t look right, try switching all the options on and off, and then save and exit. it should look fine on your actual blog.
credits:
- css photosets by annasthms and espoirthemes
- tippy.js tooltips by atomiks
- remove redirects bymagnusthemes
- outicons byanton saputro
- responsive videos by nouvae
- npf photosets by codematurgy
- npf photoset conversion by annasthms
- full list of credits here
theme four: moonflower — by request, a version of the theme i previously used on my theme blog. (updated july 21, 2020)
previews: alternating posts,one column / code:pastebin,github
features and options:
- 80px x 80px icon
- slide-down with up to six custom links and ability to add pages.
- option to choose between alternating posts with post info displayed to the side of the post and one column posts with post info at the bottom
- NEW: show/hide tags and captions, editable post margin and photoset gutters
- NEW post sizes: 360px, 400px, 450px, 500px, 540px
- responsive for both desktop and mobile devices
- NEW:font sizes from 12px to 18px
- 13 different font options and all colours customizable
notes:
- if you have alternating posts enabled, the theme will display as one column on small screens and on mobile. resize your browser window to see the effect.
- tumblr’s customize page is very buggy and when you first install the theme, you have to toggle the options on and off to get them to work properly. if something doesn’t look right or the post captions disappear, save and exit because 99% of the time it will look fine on your blog.