#html!

[jungjnsoul]

Hello! I absolutely adore your themes! I have been wanting to make my own themes for a while now, but I'm not even sure where to start. Do you remember how did you learn to make your themes? I have basic html knowledge, but only the enough to modify some details of already made themes, so I wouldn't be starting from zero but I still need a lot of pactice to make my own themes!

hi u !  i only started making themes towards the end of last year, so i’m still learning too, but i’ll try to help you out !  one of my biggest recommendations is to start with a base code; it’ll help you understand all components of tumblr themes & the confusing parts are already there. i’ll link some things i find helpful below:

all-in-one base code by neonbikethemes (includes tabs)

base code by limesthemes

theme tutorials by octomoosey

theme tutorials by lmthemes

lots about positioning by internetingishard

css animation for beginners by rachel cope

inline-block info by angelo simeoni

imessage chat posts by animalities

installing custom fonts by jcnnie

scripts tag by theme-hunter

w3schools (html/css how-to’s)

codeacademy (learn code)

code tutorials by mozilla

google everything !!  seriously. if you don’t know how to do it, someone’s most likely posted a tutorial about it before. “how to add ___ html” / “how do you ___ css”

add “site:tumblr.com” before your search to make results tumblr-specific.

[rabbithelps]

Hi rabbit! Do you have any idea how to add the gradient fade to the sidebar like you add it to the container? I've looked everywhere for a tutorial and couldn't find any :(

Hey here, anon! I believe you’re referring to the masking effect on the container, which makes posts appear to fade out, right? Like this?

You should be able to use the same CSS on your sidebar as you do on your main container, producing the same effect. In the case of this example, I would take this CSS from my container:

.posts {          ...          -webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,1),  rgba(0,0,0,0));}

... And add it to the CSS of my sidebar div, which is, in this case, just .sidebar. You’ll need to check your own code to see what ID or class your theme uses to define the sidebar, then just add your own CSS there. nwn

Hope this helps! Please let me know if there’s anything else I can do for you!

[rabbithelps]

Hey, all! I wanted to share a CSS trick for improving readability on your themes.

The matter of readability/accessibility on themes is a bit controversial in the RP community. The problem is exacerbated by the fact that RPers will often have small font sizes coded in their themes, and on top of that, use HTML in their posts to make their font size small on the dashboard (e.g. <small></small>, , ). The result is posts that, when viewed on the RPer’s blog, are super incredibly tiny!

The way to fix this is to include CSS that targets the small, subscript, and superscript HTML and forces them to display at your default font size. If your font size is already 10px or 11px, think of how small your font will display after you <small></small> it! But if we force the theme to display this text at the default size, some of the readability issues are resolved.

Here’s how to do it:

1. Find your default font size.

If you coded your theme yourself, you should already know this! It’s whatever you coded your post font to display at. If you’re using a premade theme, it might take a little more searching, but you might have a drop-down/fill-in option for font size on your Customize page, or you might have to take a look in the code itself. The property that you’re looking for is font-size! Once you have that...

2. Create a new CSS rule that targets small, subscript, and superscript.

The reason we’re targeting all of these is because RPers tend to use one, or even a combination, of this HTML to make their text smaller on the dashboard. Here is how a rule targeting this HTML would look:

small, sub, sup {       ... }

(Because we separated the selectors with commas, we can combine them all into one rule!)

3. Add in your font size.

Now that you have your rule, you can add in the declaration that will change the font size! If our default font was, for example, 11px, this is how it would look:

small, sub, sup {       font-size: 11px; }

That’s it!

That’s seriously all it takes! Now you’ve made your theme more readable and more easily accessible to your fellow RPers.

I hope this has been helpful! Feel free to drop by my ask if you have any questions or comments. nwn

[rabbithelps]

hello, rabbit! i've been trying to finish my first theme and i have a doubt! how can i change, like, the POSTS TITLE font and size? btw, all of your tutorials are so useful and they helped me a lot, so thank you very much! XX

Hi there! I’m so glad to have been of help!

What you’re looking to customize is the {Title} variable inside the Posts block ({block:Posts}{/block:Posts}). It’ll look something like this (from the Tumblr theme documentation):

{block:Title}

{Title}

{/block:Title}

You need to add an HTML tag of some kind in order to customize these! As you can see, in the example,

 is used. In my own theme markup, I use

. You can use whatever you like--even a div class!--and then customize it by targeting it in the CSS, e.g.

h3 { font-family:’courier new’, monospace; font-size:20px; letter-spacing:2px; this:is just an example; use:whatever you’d like;}

You can use the same HTML tag to make your titles uniform in your Chat posts as well, where the {Title} variable is also used.

I hope this is helpful! I know that Tumblr markup is a bit finicky/hard to read, so let me know if I can clarify anything for you.

[rabbithelps]

Helloooooooo. Can you please explain how you have the key loading thingy on your RP blog? It's hella cool o.o

Hi, anon! For those who don’t know what the anon is referring to, I have a loading animation on my RP blog. Here’s what that looks like:

I actually use a premade code for this, which I link on my credits page: PreLoadMe by Niklaus Gerber! That page explains the whole thing, as well as how to install the code--he gives you everything you need!

The only thing I, personally, created was the loading animation, with the glowing key. The key image I got from this texture pack (also linked on my credit page!), and I created the glow with an Outer Glow layer style.

I animated the glow “pulsing” like so:

1. In the timeline window, I hit “Create Frame Animation,” then duplicated the one frame I had.

2. On the second frame, I added an Outer Glow layer style.

3. I selected both of the frames (hold down shift when clicking on the other frame!), then went down and hit the Tween button. This is a tool that creates transitions between two different frames by fading one out and the other in. I went with 5 frames here, for simplicity’s sake!

That has the glow fade in; we still need it to fade out!

4. To create the fadeout, I selected the first and last frames of the animation and hit the Tween button again. These are actually the same frames we selected in the last step; they just have the tweened frames between them! When we hit the tween button again, it creates a new transition between the two of them, fading out the Outer Glow layer style.

5. Then I just set the timing to “Forever,” so the animation repeats continuously, and there you have it!

I hope this was helpful! Let me know if there’s anything else I can do for you.

[rabbithelps]

hello rabbit! I've tried to make a pop up ask, but every time it fails. do you know of any easy to follow pop up ask tutorials?

Hey there, anon! Here are some posts that might help:

Popup ask video tutorial (with close button)

Walkthrough/code by str-wrs (no close button)

Walkthrough/code by HTML-Tutorials (with close button)

Walkthrough/code by Tumblr Academy (with close button)

If you’d like visual reference on what a working code looks like, here’s the code of my ask box from my own theme, with the actual ask box itself bolded:

contact me!

Do you have a question or concern? Please send me an ask! I am never, ever bothered by any message I am sent. Remember, I want to hear from you!

As always, if you’d like direct help from me, you can feel free to submit your code or a pastebin of your code!

I hope this was helpful! Let me know if there’s anything else you need!

[rabbithelps]

excuse me! do you know how to isolate certain links, if that makes sense? i try putting effects on my description links ( glowing, spinning, fade, ect.), but instead of it working on only my description links, ALL of the links on my blog get that effect. i'm pretty sure i just mucked up somewhere when i was originally coding, but can i ask if you know of a tutorial or how to fix it?

Hi there! Yes, I do nwn It’s quite simple!

Let’s say we have a div with the ID #example, with all our links in it, like so:

link 1 link 2 ...

We want to add an effect, but to these links and to only these links. The way to do that is to style them in our CSS like this, with the important part in bold:

#example a { color:black; text-shadow:0px 0px 5px #fff; just:someexamples; ...}

The bolded part of the CSS says, “Apply these properties to the links (a) only within this specific containing element (#example)!”

If we want to add effects or change properties on hover, we can write it just the same way, e.g.

#example a { ...}#example a:hover { ...}

That’s all there is to it! I hope this was helpful. Please let me know if there’s anything I can clarify, or anything else I can help you with!