Finally! A theme that is as round and floaty as a soap bubble and organized as that one Pinterest board you never actually use.
Meet Bubble. It’s a clean, pastel grid theme designed for people who have excellent taste but also need to scroll through 500 posts at 3 AM without clicking "Next Page."
[ STATIC PREVIEW ] | [ GET THE CODE ]
✨ The Vibe Check:
Infinite Scroll: Because clicking buttons is so 2012. Just keep scrolling. It never ends. (Sorry to your sleep schedule).
Grid Layout: Comes in a 2-column "Classy" mode, but there's a toggle to switch to 3 columns if you like your posts tiny and aesthetic.
Top Bar Navigation: So your sidebar doesn't eat your content.
Pop-up Everything: A pop-up Ask box and a pop-up Links menu because we love secrets. 🤫
Round & Soft: Everything has rounded corners because sharp edges are scary.
🚨 VERY IMPORTANT INSTRUCTION (READ ME OR CRY LATER) 🚨 To make the Pop-up Ask Box work perfectly, you need to do one tiny thing in the code:
Look for the line that says iframe src="https://www.tumblr.com/ask_form/{Name}.js"
If the box isn't loading for you, replace {Name} with your actual username.
That's it. You're a coder now. 👩💻
♡ Notes:
Please Like or Reblog if you use it (it fuels my coding addiction).
ok im trying to scroll through your headcanons but i cannot figure out how to the next freaking page XD. is there like a button i have to click on the screen on something b/c i might just not be seeing it lol
My guy, if you're expecting Tumblr to work as expected, I have some bad news...
how to add masonry and infinite scroll to a tumblr theme
Hi, welcome. If you’re here, it’s because you want to add either Masonry, Infinite Scroll or both to your custom Tumblr theme.
Heads up, this guide requires some familiarity with HTML, CSS and Javascript as you will be editing your current theme and since all themes are different, I can't give step-by-step instructions on how to edit your exact theme.
Also, this post is best viewed on my desktop theme. Blame Tumblr for not supporting Markdown properly.
OVERVIEW
Alright, so what are we even adding? Basically, Masonry is used to display your posts in a nicely laid out grid, even if they're all different sizes. You tell it what your posts are, what you want them to fit into and it'll come up with a nice grid layout for you. Infinite Scroll is used to... infinitely scroll through posts with having to go to another page. It’s the endless scrolling of your Twitter/Instagram/whatever feed.
Now maybe you’ve already got one or the other in your theme and you’re looking to add the other one. Sounds pretty simple, yeah? It kind of is. The trouble is that Masonry and Infinite Scroll interact with each other. When you’re using Infinite Scroll, whenever you scroll down and load more posts, Masonry needs to check whether your post layout is still okay and correct it if it isn't.
PLUGINS
For the sake of this guide not getting too confusing and because they integrate so easily together, we’ll ONLY be using David DeSandro's Masonry and Infinite Scroll Javascript plugins. If you’ve got different versions of these plugins, remove them now as they may cause issues.
First, we need to add the plugins to your theme’s head:
To get Masonry working, we need to know what your posts are and the container that they're in. Give your posts a class (e.g. .post) and your container an id (e.g. #posts). We can also specify additional options, such as column width and spacing between the posts. We want the layout to be responsive, so by following the example code Masonry provides, we'll create post-sizer and gutter-sizer.
To add Infinite Scroll, we need to know what the posts are (same as Masonry) and where to get the new content from - this will be the next page of posts on your blog. Tumblr lets us get that easily using pagination variables. Make sure you give the next page a class (e.g. .pagination__next), since this is where we'll be loading new posts from.
For the styling, we want the layout to be responsive so we'll set post-sizer and gutter-sizer to have a % width. For the rest of the styling, we'll use some of Masonry's example code again.
In your theme's head, we can create a new script and set up Masonry inside it like this:
<script> window.onload = function() { var elem = document.getElementById('posts'); var msnry = new Masonry(elem, { itemSelector: '.post', percentPosition: true, columnWidth: '#post-sizer', gutter: '#gutter-sizer' }); } </script>
Then to actually get Masonry to generate a layout, we need to call it like this:
msnry.layout();
Usually, that's all you really need for Masonry but for Tumblr posts, any media embeds might take a bit of time to load. For example, Instagram embeds get taller when they're fully loaded (or at least they used to) and this can screw up the layout of your posts. To deal with this, you can add an observer that checks for any changes with media embeds and calculates a new layout if needed:
Then finally, we need to set up Infinite Scroll. Remember, we're using the same posts that Masonry is changing. Since this plugin is made by the same guy who wrote Masonry, we can integrate it easily using outlayer:
let infScroll = new InfiniteScroll(elem, { path: '.pagination__next', append: '.post', outlayer: msnry });
Every time it loads a new page, it'll update the URL in your address bar. If you want to turn that off, you can add a new line to the previous codeblock, setting history to false:
let infScroll = new InfiniteScroll(elem, { path: '.pagination__next', append: '.post', history: false, outlayer: msnry });
And that should be it! The whole script should be something like this:
Do keep in mind that your theme code will be different to this, so it's not a case of just copying and pasting everything directly. Remember to remove any old Masonry or Infinite Scroll plugins you already have. Your class and id names will probably be different and you may need to add certain HTML elements if you're missing them. You'll almost certainly need to tweak the styling too.
Feel free to shoot me a message if you need help or want to heckle me about the guide being outdated.
The theme is very clean, all of your links are contained in a slide out sidebar. The posts are responsive, even though you may have chosen 6 columns, if your device is too small to support that many it’ll show a fewer amount. The top bar is a linear gradient, these two colors will be applied to most of the elements in the theme. Ideal for photo heavy blogs, if you have lots of text posts it might look funny.
Main features:
4-6 Columns
Slide Out Sidebar
Hidden Captions
Up to 3 Custom Links and up to 5 Social Media icons
Optional Hit Counter
Infinite Scroll
Credits can be found here
Last Updated April 15 2021, if you have any questions don’t hesitate to ask!
srhg i missed about tumblr is being able to turn infinite scroll OFF, and instead browse the site in discrete chunks of ten posts at a time that are NAVIGABLE URLS, no more of this "just scroll until the site crashes or you hit the back button at the same time you spy a particularly interesting post you didnt see enough of to ever be able to find again" garbage that has consumed every other website on earth
Hey, sleepyheads! This theme has been a work in progress for quite some time. It took awhile to finish because I kept changing how some features were designed. But, I’m really glad it looks great. I also use Silaw for my main blog @carriza. Cara is just my nickname HAHAHHA. Also, cheers to my fellow Filipinos in Tumblr!
This is the fourth theme of Pillow Themes’ theme series titled Mezurashii.
Rules:
Do not steal snippets or all of my codes.
Do not claim the theme as yours.
Do not remove my credits.
Features:
Infinite scroll and pagination
One column layout (with 500px post size)
Hover option for reblog, note count, tags, and date of posting
400px sidebar width + icon for your accent color (you can also change it to an image)
Three (3) extra links (but you can always add more) + link hover effects
Tab for your updates or what you’re currently doing (reading, listening, etc)
One accent color for permalinks, links, and other features
Designed permalink page
The theme’s codes has built-in guides for you to fully customize your theme.
Thank you to @alagadda for the theme name suggestion! :>
