How Do I Create a Tumblr Theme in Dreamweaver?

by Brandy Alexander

A Tumblr theme is the page layout that determines the look of your blog, including its colors and images, and you can make your own theme using Dreamweaver. Although Tumblr gives you a default layout for your page, you can create a customized theme by modifying the existing Cascading Style Sheets (CSS) code in Dreamweaver.

1

Log into your Tumblr account and bring up Tumblr's Upload a Static File page. Click the "Choose File" button and follow the prompts to upload the image files you plan to use in your theme (if applicable). Copy the URL address that automatically appears at the end of each upload.

2

Click your blog's title in the menu bar. Click the Customize Appearance link on the right side and then click the "Edit HTML" button to display the code. Copy the code that loads in the window.

3

Launch Dreamweaver and select New from the File menu. Click the Blank Page option on the left side of the window that opens and select None next to the CSS Layout title so Dreamweaver does not apply a pre-designed layout. Click the "Create" button to load the page in your workspace.

4

Click the Code or Split Code option under the View menu to bring up the area where your code goes. Delete any existing syntax on the page and then paste in your Tumblr code.

5

Select CSS Styles from the Window menu and then click the "All" button to see your current Tumblr style rules.

6

Double-click the body rule to bring up the window that lets you design the characteristics of your blog. For instance, click the Background option under the Category heading and then use the Background Color palette to apply the shade you want. Click Type and use the menus that appear to choose the typeface, size and color of your theme's font. Continue to click through each style to design each element as you prefer.

7

Insert your images in the preferred style rules to attach them to your theme. Assign a picture to the background of the body rule, for example, by pasting the URL address in the Background Image text field.

8

Save your file. Copy your finished Tumblr code and paste it back to your Customize page to apply your new theme. Optionally, point your browser to Tumblr's Theme Garden page and click the Submit a Theme link to make your design publicly available.

Warning

  • close Do not use Tumblr's static uploader to upload anything besides files related to your theme. Your account may be banned if you do.

About the Author

Brandy Alexander has been writing professionally since 2001. She is a glass artist with a Web design and technical writing background. Alexander runs her own art-glass business and has been a contributor to "Glass Line Magazine" as well as various online publications.