#css!

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

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.

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.

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!

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!

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 { ...}

Absolutely, I would love to! (And thank you so much for the compliment!)

For others’ reference, this is the theme we’re discussing. What you’re describing is that, as you make the browser window larger or smaller, the background image and posts move along with the window, like this:

I accomplished this by placing all the necessary items (the background image, the post markup) inside a div, then making the div positioned. After that, I made use of the top, right, bottom, and left properties to place the div where I wanted it on the page. You can position any element on a page this way using these properties!

Here is the code I used to style the div, with relevant properties in bold!

  #postcontainer {     background-image:url(http://i.imgur.com/ABkGi50.png);     width:1000px;     height:696px;     position:fixed;     right:0px;     bottom:0px;   }

The position property is a bit tricky to explain! To put it as simply as I can, position:fixed; lets me put my div anywhere I want on the page, and to position it using, in this case, the right and bottom properties. I’m going to add some links at the bottom of the page which have fuller explanations, and if you’re confused about this part, please let me know and I’ll talk more about it!

The right and bottom properties, as you can see, are both set to 0px. This puts my #postcontainer div flush with the right and bottom sides of the page – it is 0 pixels away from either one, and it wants to stay that way. When you make the browser smaller like in the above gif, #postcontainer stays in its spot, 0 pixels away from the right and the bottom.

You can see this if you try to make the browser smaller in other ways, too!

When I pull in the browser from the left side, the #postcontainer div doesn’t care. It stays where it is, on the right, because that’s where I positioned it. If I pull up the browser from the bottom, the #postcontainer div moves with it, because it wants to always stay flush against the bottom of the browser.

(As you might notice in the gif, it is the bubble on the bottom left – which is actually the updates tab – that moves when you pull in the browser from the left side. That’s because the updates tab is positioned 0px away from the left, as opposed to #postcontainer, which is 0px away from the right.)

As an addendum, the reason that the blog posts themselves move with #postcontainer is because they are actually in a div nested inside #postcontainer, like this:

                  …     

When #postcontainer moves with the browser (or doesn’t), it takes the posts with it.

Here are some helpful links that discuss positioning elements:

The “position” page of LearnLayouts.com

“Position” on Css-Tricks.com (one of my favorite websites!)

“Position” on the Mozilla Developer Network (NB: the language here is more technical and may not be as clear as the two pages above)