- Changing Your Tumblog's Appearance
- Changing Advanced Settings
- Changing a Theme's Appearance
- Four Ways to Change Your Tumblog's Appearance
- Choosing a New Theme
- Customizing a Theme
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Four Ways to Change Your Tumblog's Appearance
Tumblr offers the following four ways to change the appearance of your tumblog; each of these overlaps in interesting ways:
- Use the Appearance menu in the Customize area to change the background color, background image, font, and so on of your blog, as described in the previous section. These settings always work on the default Tumblr theme, allowing extensive customization, but only some of them work on some other themes. (The choice of which customizations to allow is decided by the theme's author.)
- Use the Theme menu to choose a different theme from among hundreds of available themes. Then use the Appearance menu to change any settings that the chosen theme allows you to change.
- Use the Custom HTML button in the Theme menu to enter your own Hypertext Markup Language (HTML) and CSS, either modifying an existing theme or choosing a new one of your own. This is explained in more detail later in this lesson.
- Use the Custom CSS area of the Advanced menu in the Customize area, described earlier in this lesson, to add a block of custom CSS to the current theme. As with the settings in the Appearance menu, this can be allowed or blocked by the theme's author.
The Appearance menu and the Theme menu were described in previous sections in this chapter. The next section introduces HTML, CSS, and the differences among them.
HTML Basics for Tumblr
HTML is the original language used to create web pages.
HTML is the text that normally displays in your web page, plus tags that have various effects. It has a fair amount of power but doesn't allow for detailed positional control of exactly where various text and graphical elements on a web page go. Following are a few examples of HTML in action:
- The bold and italics tags—The bold tags—<b> to begin bolding and </b> to end it—add bold style to text. Text that looks like <b>this</b> in HTML looks like this when displayed in a web browser. The <i> and </i> tags work the same way for italics.
- The image tag—To insert an image into a web page, put in the image tag and a link to where on the Web the image is. For example, use <img href="www.google.com/intl/en_ALL/images/logo.gif"> to insert the Google logo in your web page.
- Hyperlinking—To make text a hyperlink, surround it with the <a> and </a> tags, including the destination of the link. For example, with the following <a href="www.sardis.com">my favorite restaurant</a>, the words "my favorite restaurant" display underlined and in the link color, usually blue; clicking the link takes you to the website for Sardi's restaurant in New York City.
You can learn much more about HTML from many websites, books, and people you might know from whom you can learn it. It's too large of a topic to be covered in this book.
CSS in Tumblr
CSS is a clever way to allow specific formatting of web content, such as fonts, text size, the location of the various elements on a web page, and more. If you don't already know CSS, you can learn a great deal about it from websites, books, and by experimenting in Tumblr.
HTML and CSS can be used to create a page layout into which new content—your tumblog postings—is more or less "poured." In Tumblr, this kind of page layout is called a theme.
You can access the HTML and/or CSS—they're often used in combination—that make up any of the themes in Tumblr and modify them. You can also create a whole new theme of your own.
Modifying and creating themes is a great "sandbox" for experimenting with and even learning HTML and/or CSS. However, creating a page layout that can support the pouring in of new tumblog postings, and never break—that is, get rendered as an unrecognizable mess—is not easy. Even themes available to you within Tumblr can break occasionally.
A useful page in Tumblr's Help area introduces the topic of creating a custom HTML theme, including the specifics of how various elements work with Tumblr, in some detail. It's shown in Figure 5.4 and is available at www.tumblr.com/docs/custom_themes.
)
Figure 5.4 Tumblr gives you a leg up in theme editing.
This Help page is fairly advanced, but if you're bright and brave, you can get pretty far with it.