If you know basic HTML then there are a lot of extras you can use to enhance your posts. The good news is even if you don’t know HTML they aren’t hard to learn. This post will walk you through some of the ways to add extra formatting with CSS classes and custom tags.
To begin with if you are on a modern browser then these intro paragraphs before the jump are split into two columns. This happens automatically because I wrapped this content in a <div> with a class of “two-col.” You can view the source of this page to see it in action. If you are using a browser that does not support multi-columns then a single column will appear as normal. However once the jump to the full article has been made the two columns revert back to a single column. This was a intentional decision to keep the flow of the article intact. It was fine to break the preview text into columns because most of the time it will be a small amount of text that is easy to digest in one glance. There is no scrolling needed to read the first column and then back up to the beginning of the second. One very important note about the way this is setup: due to constraints of Tumblr’s text edit area the preview text before the jump must be in one single paragraph. This may seem like a nuisance at first but it’s actually quite nice because the columns have a greater chance of being equal in height.
Is it easy to customize my own fonts with the Courier theme? —Anonymous
Yes, you can use Tumblr’s built-in font selection tool to select your fonts. You can also use Google Webfonts, Typekit or Fontdeck to deliver custom fonts via @font-face. And finally you have the option to enter your own font stacks without editing the theme code.
- Tumblrer: Is Courier optimized for different devices.
- Me: Yes! In fact the entire design is "responsive."
- Tumblrer: What do you mean by responsive?
- Me: By responsive I mean the design and content adheres to a fluid grid that expands and contracts to the specific width of each user's viewport.
- Tumblrer: But what about really small screens – like an iPhone – won't the layout be really cramped?
- Me: I have augmented the fluid grid with media queries that rearrange the content at specific breakpoints; all while maintaining the fluid grid. So the content and layout are optimized for mobile screens, tablets (like the iPad or Galaxy) and all sorts of monitor widths.
- Tumblrer: That's fantastic! But what about Internet Explorer?