#tumblr coding

[chososcutie]

hii how do u use gradient colors on tumblr?? bc i only have specific colors n iw use pastel colors on my texts.. how do i do that?

TUT FOR GRADIENT COLORS .ᐟ.ᐟ

i've been meaning to make this post for a while, i hope this helps all of you aspiring tumblr writers and bloggers for your aesthetic posts!

divider creds to @angeliicide

STEP ONE

use the website, stuffbydavid.com, or another html text colorizer website, and type in whatever texts you want to use

it should look something like this!!

type in the hex code of any color you'd like

(tip: i like to use pinterest color palettes that include hex codes so the colors correspond well!)

(additional tip: if you're using images on your post, and want to match colors, use the site imagecolorpicker.com, and upload your image to see matching hex codes!)

it will look like this!

STEP TWO

next, you're going to want to copy the full html code at the bottom (do not use bbcode, it will not work for tumblr!)

STEP THREE

once you've done that, go to tumblr on browser or site form, this part will not work on the app!

tip: use safari or microsoft or any browsing app that allows you to go to the tumblr website!

STEP FOUR

now, by creating a new post by clicking the little pencil button on the bottom left or opening an old draft, open the settings gear icon on the top right of your post and scroll down to where it says, text editor, and click the dropdown menu to change it to html

STEP FIVE

now exit out of settings back on your post, and paste the html code onto it.

you should now see a jumble of numbers and letters, and once you save it to draft, it will show you your colorful text!

ADDITIONAL STEPS

now sometimes when I want a gradient image for a story, i use pinterest to search for fanart, and then picsart to convert them into colorful gradients

1. find your image of choice

2. open picsart and start a new project with your image

3. find where it says fx effects

4. then scroll until you find color gradient

5. and change around the colors to your liking

6. save your image!!

a/n: hope this helps you lovelies who are confused by the coding/ html aspect of tumblr as it sure confused me when i was first starting out!

[whereinmnl]

CSS Effects for Your Images

Hi everyone! 👋 If you’ve been scrolling through other blogs thinking, "How did they do that?" but you’re too scared to touch your theme's HTML, this post is for you.

You don't need to be a coder to make your theme look cute. I’ve put together a collection of 12 Simple CSS Codes that you can just copy and paste.

🌸 Want to see them in action first?

CLICK HERE TO VIEW THE LIVE PREVIEW

(Check out the preview to see exactly how these move and look!)

🛠️ How to Add These Codes

It is completely safe! If you don't like the result, you can just delete the code and your theme returns to normal.

Go to your blog and click Edit Appearance (the palette icon).

Click Edit Theme.

Scroll down the sidebar and look for "Advanced Options" or "Add Custom CSS". You may also put this under your <style> tag.

Paste ONE of the codes below into that box.

The Design Collection

01. Soft Corners

If your theme feels too "sharp," this softens the edges of every image.

img { border-radius: 30px; }

02. The Noir (B&W Reveal)

A classic look. Images are black & white until you hover over them.

img { filter: grayscale(100%); transition: 0.6s ease; } img:hover { filter: grayscale(0%); }

03. Ethereal (Fade In)

Images are slightly faded and transparent, blending into your background, until you look at them.

img { opacity: 0.6; transition: 0.6s ease; } img:hover { opacity: 1; }

04. Levitate (3D Lift)

Makes your blog feel tactile. Images float upwards when hovered.

img { transition: 0.4s ease; } img:hover { transform: translateY(-10px); }

05. The Vintage

Applies a warm, sepia-toned filter for that old-school aesthetic.

img { filter: sepia(50%) contrast(0.9); transition: 0.5s ease; } img:hover { filter: sepia(0%) contrast(1); }

06. The Mystery (Blur)

Great for text-heavy blogs. Images are out of focus until you want to see them.

img { filter: blur(4px); transition: 0.8s ease; } img:hover { filter: blur(0px); }

07. The Spotlight

Dims your images so your content pops, but lights them up when selected.

img { filter: brightness(80%); transition: 0.5s ease; } img:hover { filter: brightness(110%); }

08. The Zoom

A high-end fashion editorial look. The image subtly grows closer.

img { transition: 0.6s ease; } img:hover { transform: scale(1.05); }

09. The Cameo (Circle)

Automatically crops your square images into perfect circles with a cute border.

img { border-radius: 50%; border: 3px solid #ff99ac; transition: 0.5s ease; } img:hover { transform: rotate(10deg); }

10. The Snapshot (Polaroid)

Adds a white border and a casual tilt, like photos scattered on a desk.

img { border: 10px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: 0.4s ease; } img:hover { transform: rotate(-3deg) scale(1.03); }

11. The Pulse

A cute interaction. The image shrinks slightly, like a heartbeat or a button press.

img { transition: 0.5s ease; } img:hover { transform: scale(0.95); opacity: 0.8; }

12. The Candy (Vibrant)

Makes your colors super bright and saturated when hovered!

img { filter: saturate(100%); transition: 0.5s ease; } img:hover { filter: saturate(180%); border-radius: 50px; }

💡 Quick Tips

Don't paste them all! Pick just one effect for the best result.

Customize: You can change the numbers! For example, change 0.6s to 1s for a slower movement, or 30px to 10px for less rounded corners.

Happy editing! Let me know which one is your favorite! 💖

⚠️ Disclaimer: These codes target the standard img tag, which means they will affect most images on your blog. Depending on how your specific theme was coded by its creator, these snippets might interact differently with your layout (e.g., sidebar icons or header images). If something looks wrong, simply delete the code from the Custom CSS box and save, and your theme will return to its original state. Always back up your theme code before making major changes!

[count-o-nines]

I’m not sure how far this post will go but after like- Repeatedly trying to search for anything to help with this I couldn’t find anything! So I’m gonna ask-

How do you make inline images in tumblr posts?

(Mock up of what I mean below)

Essentially I just want to be able to line up images with text for webcomic reasons, Sort of like how RPGmaker icons in textboxes look. But I cant seem to find a way to do this even with messing with HTML and I didn’t make the tumblr theme I’m using for the blog I’m trying to do this on- Any help is appreciated. Been trying to figure this out for maybe almost a year. Please be kind I’m not good at coding and all orz

[glesbianupland]

anybody know how to get rid of the section under the "more! more!" or have a code to add to the Stylus extension that gets rid of it?

[incipitinterpreter]

does anyone have any posts/tips/blogs for learning how to code tumblr blog themes specifically? I have a basic foundation in HTML/CSS and I learn best by jumping into projects, but I really don’t know where to start when it comes to coding themes specifically, and I’m nervous to look at others’ work bc I don’t want to copy code.

[sadismancer]

Basic tips for a viewer friendly blog on desktop

 To put it short: pick a suiting theme for people to be able to read!

⯈ Things you should have:       Readable text of a good size (12px+).      Visible and easy to find links.      At least a basic ‘about this blog’ section.      Posts separated decently (not all squished up).      Clear pagination.

⯈ Things not to have:      Randomly dotted links or hidden links.      Lower than 11px text.      Too many gifs.      X colour on X colour text/background; no light pink text on a red background for instance.      Too much clutter.      Small post types (200px).      A chaotic background that distracts heavily from the posts.

⯈ Tips:

     Aesthetics and minimalism aren’t always good! People need to be able to read things easy enough to enjoy your blog. Having a tiny theme with hard to find links or even a bright aesthetics can put somebody straight off. 

     Ensure the word spacing and fonts aren’t over the top. Spaced out letters and words make reading hard for lots of people. ‘Fancy’ fonts can also be hard to read. Also try to keep the same font all around unless for a title or the likes. Nothing worse than trying to read a bunch of different fonts when they’re different for bold, underline etc.

      Pick a good colour theme. Nothing too white, bright, dark, or flashy works best. A bright white background with gray text isn’t nice to try and read.

      Endless scrolling makes it hard for people to try and find specific posts again so try ensure the theme has pages and a pagination.

      Have a pinned post with links to your pages for mobile users or a mobile navigation link in your description. This way people can navigate things if on mobile and the pages aren’t showing up normally.

      Remember that some people have a smaller resolution on their monitor so it’s always best to check that the theme you install will resize. The way I do it is to shrink the browser window and see if the theme moves or not.

                                         Coding tips and tricks

[leeanncodes]

I don’t build tumblr themes (i’ve done exactly one and it. is. hell.)

but editing one to match the aesthetic of someone’s vision for their blog is really fun and absolutely amazing since most of the heavy lifting was already done!

you check out this re-worked theme soon @billyrussocentral !