@usgmr writes:

Woah, oneechan noticed me. haha. Anyway, right! Totally forgot to include !important on the post. It sucks how they actually put this into the whole DOM at all. I mean display: none !important works alright without the hack bec their display attr doesn’t have !important. So does that mean they’re alright with themes hiding it but not repositioning it? And I wish on the documentation. It’s not even complete. {PermalinkPagination} and {ReblogURL} aren’t even there when they’re so useful.

It’s arguably impossible for Tumblr to keep someone from overriding their CSS, in this case. Practically speaking, there’s an infinitude of ways to make selectors more specific by matching on attribute values. The way I see it – and this is just my blind speculation – Tumblr’s motivation for choosing to override the rules they have is mostly driven by two practical considerations.

First, they’d like to override older stylesheets that don’t take the new control style into account. People tend not to apply !important to their CSS declarations without a good reason, after all. So they pick the two rules that are most likely to be changed by themes, and change those back.

After that, Tumblr wants to make it difficult enough to override the positioning that most developers won’t bother to do so, in what I presume are the interests of consistency. Hence the very specific selectors. I have to admit that if Dichotomy’s navigation wasn’t fixed in the top right corner of the viewport, I probably wouldn’t even have noticed.

On the principle of it, though, I think this approach is entirely wrongheaded. I’d rather Tumblr make things like the controls an explicit part of theme customization, and simply encourage designers to take them into account when creating themes. The fact that they operate the Theme Garden gives them quite a bit of leverage in encouraging themes not to hide the standard controls – they already do this for other aspects of a theme’s design. The “my way or the highway” attitude doesn’t work well when, ultimately, you’re literally giving the user full control over the page’s stylesheets.

noxki writes about Tumblr’s sticky controls:

Anyway, work around is to make the selector more specific. This great grill (abandonmentprobability) — I’m assuming you’re a grill since your blog says you’re an onee-chan. But I also claim to be a cute little girl every now and then so I could be wrong — does it by applying the styles to #tumblr_controls[src*="o.html"] and #tumblr_controls.tumblr_sticky_iframe[src*="o.html"] instead of just the iframe ID. To think I was even considering of forcing it with jQuery. 10 years of shame on me.

I’m the onee-channiest onee-chan to ever onee-chan God’s green earth.

But in all seriousness, selector specificity is only half the story here. Boring historical explanation follows for the rest of this paragraph: The fact that this still works is really something of an accident having to do with the [src*="o.html"] attribute selector. I originally put that in there to keep these rules from over-matching and glomming onto the control banner for mobile devices, which has a separate iframe URL and considerably different appearance. Tumblr’s own selector used to only have the frame ID and class, but now also has html body in front of it in what I presume is an attempt to keep themes from overriding the buttons’ placement. Fortunately for us, attribute selectors are considered more specific than element selectors, so all this still works.

The other big, important aspect is that all of Dichotomy’s CSS rules regarding the Tumblr controls frame are defined with !important. Tumblr defines all of its rules (namely position and top) with !important, so unless we add that to our rules as well, we’ll get overridden even though our selector is more specific than theirs.

I really wish Tumblr had the sense to treat things like this as parts of their theming API that are documented like anything else. (And for that API to be versioned. Can we get some semver up in here?) Until then, it’s hack after hack after hack to “fix” things that shouldn’t be broken in the first place.

Using custom fonts with Dichotomy

@abandonedsteel writes:

Just one question - do you, perhaps, have suggestions for alternate monospace fonts? And if so, how would I use them in this theme?

Certainly. The most important thing to note when selecting a typeface is that Dichotomy expects normal, bold, and italic styles to all have the same character width. For instance, links turn bold when the mouse cursor moves over them, and if the typeface you’re using has normal and bold fonts with different character widths, you’re going to end up with text jumping all over the place.

A small digression about browser font synthesis: If you ask for a bold font in a font family that doesn’t contain one, most browsers will fake one by simply doubling some pixels horizontally. Needless to say, this means that the mock bold font will not have the same character width as the original. Browsers will also synthesize italic fonts when needed by applying a uniform slant to the glyphs, but the character width isn’t affected by this process, and so it’s okay if the typeface doesn’t have italics. If it does, though, it had better also have a separate bold italic font, otherwise bold synthesis will ruin everything again.

Dichotomy uses Ubuntu Mono by default, which conveniently has regular, bold, italic, and bold-italic variants. Early versions used Lekton, which I liked but unfortunately committed the cardinal sin of having an italic without a bold italic.

Okay, okay, so how do you do it?

In short, head over to Advanced options, and enter something like the following in the Custom CSS box:

body {
    font-family: "MyFace", monospace;
}

You’d replace "MyFace" with the name of your preferred font family, of course, preserving the quotes. That monospace at the end is important to ensure that people who can’t use the font you specified still get something monospaced. Don’t leave home without it.

System fonts

It’d be great if we could pick a monospaced font family that’s already installed on everyone’s computers, so we wouldn’t have to add code to download the font files from elsewhere. Sadly, it’s slim pickings here. Consolas comes with Windows and Office these days, and may be your best bet on this route. OS X ships a decent version of Courier, but Courier New on Windows is thin and spindly and hard to read and I hate it. Don’t use it.

Web fonts

Okay, so let’s take a look at some downloadable web fonts. This option requires more work, but it carries the advantage that most browsers will automatically download the required font files, sidestepping the problem of default system availability. Ordinarily, I would point you to Google Fonts and say, “Search away!” But even though they provide options for searching by various font attributes, fixed width is not among them. Never fear, though, because I’ve compiled a shortlist of typefaces available there that satisfy our criteria:

• Anonymous Pro
• Inconsolata
• Source Code Pro

(Yow, that really was short.) To use one of these fonts, you’ll need to follow the Open [font name] in Google Fonts link near the top of the specimen page. Check the appropriate styles to include – you’ll want at least Normal 400 and Bold 700, as well as any italic variants if they’re present – then scroll down to step 3. Select the @import tab, and copy and paste the code there at the top of your custom CSS, before any other declarations. Then change the font family name as I mentioned above, and save.

If you’re using Dichotomy with custom HTML, this won’t work properly due to an oversight in versions up to 3.0 – but in that case I trust you can read the diff fixing this problem and make changes to the code accordingly.

Any questions?

I hope this guide was reasonably clear, but if not, you can always send me e-mail or grumble to me via Tumblr asks.

Dear Tumblr,

Can we get support for alpha values in custom theme colors? Pretty please? Abusing text fields just to use rgba() feels dirty.

~if

Those of you who know me know that I’m not a huge fan of reblogged posts, so I usually hide them from my dashboard. Sometimes, though, I want to take a peek at their contents. I was playing around with some custom CSS and arrived at the following:

.not_mine.is_reblog {
    opacity: 0.1;
    overflow: hidden;
    max-height: 20px !important;
    -moz-transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.not_mine.is_reblog:hover {
    opacity: 1;
    max-height: 10000px !important;
}

There’s a transition rule for general posts already, so all I need to do is override the default styles and styles on hover. [Edit: Tumblr changed the dashboard style sheets to no longer provide a transition by default. I’ve added the appropriate code above.] It’s functional and pretty. Win-win!