Would you happen to have a tutorial regarding how you made the scrolling text in your theme in the status area?
Itโs actually quite simple! I used the classic HTML marquee tag. Here is the step-by-step on how to add it and customize it for your own theme.
The Code (The Basics)
At its simplest, you just wrap your text in this tag. Paste this wherever you want the text to appear (like in your sidebar description or a status widget):
<marquee> Writing a tutorial... โ </marquee>
Step 2: Customizing the Scroll
You can control how fast it moves or which way it goes by adding little "attributes" inside the first tag.
To change the Speed: Add scrollamount="number".
1 is very slow.
6 is standard speed.
10 is very fast.
To change the Direction: Add direction="side".
left (Default - moves right to left)
right (Moves left to right)
up (Scrolls upwards)
The Finished Code: If you combine them, your code will look like this:
<marquee scrollamount="5" direction="left"> Your text goes here </marquee>
You may put this code anywhere you would like it to appear!
Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
โ Live Streamingโ Interactive Chatโ Private Showsโ HD Qualityโ Free Actions
Free to watch โข No registration required โข HD streaming
Are your quotes looking a little plain? Whether you are posting poetry, book excerpts, or just aesthetic ramblings, your blockquotes deserve to look as cute as the rest of your theme!
Today Iโm sharing 5 New Blockquote Designs inspired by coquette, soft, and minimal aesthetics. We have washi tape, sparkles, and even a love letter style! โจ
SEE THE LIVE PREVIEW OF THE BLOCKQUOTE STYLES HERE
๐ ๏ธ How to Install
Go to your blogโs Customize page.
Click Edit HTML.
Scroll down to your CSS section (usually inside <style> tags).
Paste the code for your favorite style below!
โ ๏ธ Please read until the end on how to customize the codes!
Style 1: The "Love Letter"
Perfect for soft/coquette themes. Features a tiny heart icon.
Option A: Make it your default style (Easiest) - If you want every quote on your blog to look like this, take the code you chose above and change the class name (e.g., .whereinmnl-bq-cute-v1) to simply blockquote. Then paste it at the bottom of your CSS!
Option B: Use it occasionally - Keep the code as is. When writing a post, switch to the HTML editor (the <> icon) and wrap your text like this: <div class="whereinmnl-bq-cute-v1">Your text here</div>
---
I designed these using soft pinks and blues, but they might not match your specific theme. Don't worryโchanging the colors is super easy! You don't need to be a coding expert; you just need to know which "Hex Codes" to swap.
(Tip: Go to Google and search "Color Picker" to find the Hex code for the exact color you want, like #ff0000 for red.)
Here is a quick guide on what to change for each style:
๐ For Style 1 (The Love Letter)
To change the box color: Look for background: #fff0f3; and border: 1px solid #ffccd5;.
To change the Heart Icon: Look inside the ::before section. Change color: #ff8fa3; to make the heart red, black, or whatever you like!
โ๏ธ For Style 2 (The Dreamy Cloud)
To change the Shadow: This style relies on box-shadow to look cute. Find box-shadow: 5px 5px 0 #e0f2fe;. Change that code to a darker version of your border color.
To change the Border: Find border: 2px solid #bae6fd;.
๐งต For Style 3 (The Stitched Diary)
To change the "Stitches": Find border: 2px dashed #b197fc;.
To change the Text Color: Find color: #7950f2;.
โจ For Style 4 (The Sparkle)
To change the Sparkle: Look inside the ::before section. Change color: #fab005; (the star icon) and border: 1px solid #ffd43b; (the circle around it).
To change the Gradient: Look for background: linear-gradient(...). You can change #fff9db to another light pastel color.
๐ฉน For Style 5 (The Washi Tape)
To change the Tape Color: This one is a bit tricky! Look inside the ::before section.
Find background-color: #a5d8ff;. Change this to make the tape pink, green, or grey!
Note: Do not touch the "repeating-linear-gradient" part unless you want to remove the stripes on the tape.
๐ก General CSS Cheat Sheet:
color: = The color of the text or icon.
background: = The background color of the box.
border: = The line around the box.
If you get stuck or the code breaks, just come back to this post, copy the original code again, and start fresh! Happy customizing! ๐จ
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.
Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
โ Live Streamingโ Interactive Chatโ Private Showsโ HD Qualityโ Free Actions
Free to watch โข No registration required โข HD streaming
If you're looking for coding resources, I have a compilation of websites that you may want to look into. This is an ongoing project that I've made since 2020 and I usually update the page periodically. Currently, there are 134 websites that I've inserted inside this project page. So feel free to visit the page!
Also, if you have any suggestion to add in this page, feel free to reach me out!
iโm finally more or less back and fully available to do com.missions. thatโs not to say turnaround time will be 2 days or anything, but i plan on being more active on this blog! hmu if you ever have any questions, or if youโre in the market for some sort of blog update (be it background image, coding, icons, promos, etc). i will say that iโm still learning carrd and might even try go.ogle docs if i get enough questions/requests for them, but note that iโm still new and not great at either.
hi!! not sure if your blog is still active, but on the off chance you are, is there a way to center text in a text post?? i can't find any recent code that works!! thank u :)
hiya! unfortunately for everyone, i am still alive and kicking. not 100% sure if you mean in the posts itself or just in themes, so iโll just cover both
#1 centering in posts
afaik, you can still center text in the posts themselves but it will only be shown as centered in desktop themes.
to do it:
start making a text post
click the cogwheel / settings icon in the top right corner
change the Text Editor to HTML
add style="text-align:center" to any opening paragraph tag (these look like <p>)
on a desktop theme, itโll (maybe) show like this:
however, do keep in mind that the theme may override whatever styling youโve added to your post. tbh i wouldnโt recommend putting styling into your post bc even if you can control your own theme, you canโt control other peoplesโ themes (when they reblog your post)
#2 centering in themes
if youโre developing a theme and you want all text posts to be centered, just add text-align:center to the styling of the text post. you can either do it inline or within the document styling (so in the <style> tags in your <head>).
if youโve never seen a line of html/css in your life and/or you donโt understand any of ^that, feel free to message me and i can either talk you through it or edit it for you
i would also be wary of centering text posts like this because it can make long paragraphs really awkward to read if everything is centered. once again, you can control the length of the text posts you make, but you canโt control what other people post.
