Depth of Field is a fullscreen photography theme for Tumblr. It's a great way for photographers to showcase their portfolio in a breathtaking way. Nevertheless, this theme also supports all the other Tumblr post types, meaning that you can also post galleries, videos, audio tracks, quotes, chats, links and normal text posts. Check the demo page for examples of how each post type looks like when using this template. In addition, this theme also supports the submit and ask post types.

Next to that, this theme enables you to display your latest Instagram photos, Dribbble shots and tweets, as well as a number of popular social media links. The popular Disqus commenting system is integrated and you have the option to choose from over 500 fonts from the Google webfont library for your headers and normal body text. Sounds overwhelming? Don't worry, because I will explain every little detail in the following sections.

Depth of Field is also a fully responsive theme, which mean that it will dynamically adept its layout for tablets and smartphones. However, as this theme is mainly geared towards high resolution photography, the most enjoyable viewing experience is still on a large screen.


So you've downloaded the ZIP file containing the theme files and now you are eager to install it.

Look for the HTML file called dof-tumblr-theme.html and open it up in your preferred text editor. For Windows users this might be Notepad++ and for Mac users this could be Textwrangler.

Attention: Do not just double-click the HTML file, because it will most likely open in your default browser and you will see a blank page with Tumblr template tags spread all over, which looks nasty.

When the document is open in your text editor, press CRTL + A and then CRTL + C (for Windows PC) or CMD + A followed by CMD + C (for Mac). This selects all the code and copies it to your clipboard.

Now log into your dashboard on Tumblr and click on the settings button on the top icon bar.

On the left-hand side, choose the Tumblr blog for which you want to install the Affection theme (in my case, I have 4 blogs hosted under 1 Tumblr account) and press the customize button.

On the following screen, please press the Edit HTML button next to the label "Custom Theme". Now you should see the existing code of your current Tumblr theme.

Now, all you have to do is, click inside this editor window, press CRTL + A and then CRLT + V (for Windows) or CMD + A and then CMD + V (for Mac) in order to paste the code from your clipboard. After that, hit the "Update Preview" button in the top right corner followed by the green "Save" button. You can now return to Customization screen by clicking the "Appearance" button in the top left corner.

That's it for the installation and you are now ready to further configure the theme with all the options available.

General Options

Blog title & description

If you followed all instructions so far, you should now be on the Customization screen of your Tumblr blog. On top you have the "Edit HTML" section, where you just pasted in the code from the main HTML theme file. Directly underneath, you have fields for entering your blog title and a description of you site.

There is a checkbox further down in the options panel, where you can choose to enable/disable displaying the blog description in the sidebar of your blog. This checkbox is selected by default, so if you want the description to show up in your sidebar, you don't have to do anything at this point.

Switching off Tumblr's default mobile theme

Tumblr offers a default mobile theme for all blogs, so that people hosting a Tumblr blog without a custom responsive design can be sure that their site is accessible for mobile devices. Now that you've got your own fully responsive theme, you can switch off this default theme, so your mobile visitors will also be able to see the Depth of Field theme.

Choosing the number of posts per page

Attention: For this theme to work properly, it is of utmost importance that you set this value to 1!

This way each photograph can be displayed in fullscreen mode. If you set this value to something else than 1, more posts will overlay over each other and the themes functionality will be lost.

Styling Options

Theme colors

The first part of the Appearance section deals with theme colors. Here you have the option to choose the color for various items like body font, links or panel background. As soon as you click on the colored rectangle on the right, a color-picker will appear and you can either directly select a color or, if you have specific color scheme ready, copy & paste you HEX code (e.g. #FFFFFF for white). In the screenshot on the right you can see all color options. For instance the ArrownavBGColor and ArrownavBGHoverColor determine the colors for the arrow navigation that is used to switch between posts or pages. The first option sets the normal background color, whereas the second option sets the color for when you hover over the arrow button.

Custom logo & Background images

You can upload your own logo, which will then appear in the header. For this, press the grey "Upload" button next to the label "00 Logo". Wait a bit as the logo is being uploaded and it will immediately appear in the preview screen on the right. The "Clear" button is for removing or changing already uploaded pictures. The Depth of Field theme offers you the option to use either a tiled or a full screen background image, which becomes visible on other post types besides photos. As a fullscreen default background images, I am using a black and white wood texture. You can check out an example on this video post. In case this background image would not be there, the demo page uses as a fallback some sort of fabric structure from the amazing library of Subtle Patterns. They offer almost 300 patterns and I'm sure you'll find something that suits your needs. If you have found the right image, follow the same procedure as for the logo before. Press "Upload" next to "BodyBGImage", select your file and wait for the preview page to reflect the changes. If you have uploaded both a fullscreen background image and a tiled image, then the fullscreen image will prevail as it lays on top of the tiled image. Also worth mentioning, when you upload a fullscreen background image, it will not show on the preview page like for the logo. Just wait for the upload to finish, then press save and check your actual tumblr page in order to see if it is there.

Google Web Fonts

The Depth of Field theme allows you to use any of the 500+ Google web fonts for the main body font as well as the font for all your headings. Visit the Google web font library and browse through the fonts until you found "the One!".

Click the "Quickuse" button and if applicable select one or more font-weights. Watch the gauge on the right side, which indicates page load time as you add more font-weights.

Now scroll down to section 3 and copy the code within the blue box.

We now assume that you have chosen a Header font for your blog, so switch back to your tumblr customization screen an look for the option "FontHeaderCode". Paste the code you just copied into the text field. Go back to the Google web font page and scroll down further until you see the exact name of this Font.

Copy the name without the single quotes and back at the Tumblr screen, paste it into field labelled "FontHeaderName".

Repeat this entire procedure, if you also want to select a custom body font. The Depth of Field demo page uses "Source Sans Pro" as header and body font, but you are more than welcome to choose your own combination. As different fonts look best at different sizes, you can also set the size of the body font by typing a pixel value in the Option field called "FontBodySize".

Content & Widget Options

Social media widget

If you would like to link to some of your social media profiles, you should make sure that the accompanying checkbox is enabled, which is the default setting. After that, you can simply copy & paste the link to your profile(s) in the corresponding settings field. As soon as you enter an URL, the icon for that social media channel will appear in the sidebar widget. Finally you can adjust the label of that widget to your liking by using the settings field "02 Social Media Widget Title". At the moment, the theme includes icons for the following Social Media platforms:

Instagram widget

In order to use the Instagram widget, you also need to make sure that the checkbox named "Enable Instagram Feed" is enabled. Next to that, you need to allow a certain web application called Embedagram to access your Instagram profile. Visit their website and log in with your Instagram username and password. Then click the third option named "the jQuery plugin".

On the next screen you are able to retrieve your Instagram ID.

Please copy this ID and paste it in the corresponding settings field on the Tumblr customization screen ("WidgetInstagramID").

In addition, you can influence the look of this widget by setting the thumbnail size and the number of photos to show up. The demo page uses 120 pixels wide and 4 photos, but feel free to experiment with these values until you've found what is right for you. Also for this widget, you are able to adjust the title by changing the settings field named "WidgetInstagramTitle".

Attention: Please only enter numbers (no pixel indicator needed) in the Instagram settings fields for thumbnail width and thumbnail limit. Otherwise, the widget will not work properly.

Twitter widget

For the activation of the twitter widget, you first need to sign in with your twitter account on the general settings page of your blog. Scroll down until you see the grey button "Sign in with Twitter" and click it.

As soon as you authorized twitter to access your tumblr page and when you are signed in, the twitter widget will appear automatically in the sidebar of you Tumblr page and it displays your last 5 tweets by defaut. The Option "20 Number of tweets" determines the amount of tweets that are displayed in the widget.

As with the other widgets, you can adjust the title by using the settings field "04 Twitter Widget Title".

Dribbble widget

This widget works like the one for Twitter. Look for the option "WidgetDribbbleID" and enter your Dribbble username. The Option "WidgetDribbbleShots" determines the amount of shots that are displayed in the widget.

As soon as you entered your username and saved the changes, the Dribbble widget will appear automatically in the sidebar of you Tumblr page and it display the specified amount of Dribbble shots. As with the other widgets, you can adjust the title by using the settings field "WidgetDribbbleTitle".

Disqus comments

Tumblr does not come with a native comment system, but fortunately there is a service called Disqus, which is integrated in the Affection theme. In case you are new to Disqus, please visit their website and create an account. For the enabling the comment system on your Tumblr page, you need the socalled Disqus shortname If you already have a Disqus account, you should be able to retrieve your Disqus shortname by logging in at and clicking the "Dashboard" link op top.

Please copy this shortname and paste it into Tumblr settings field "DisqusShortname". Consequently, the Disqus module will appear on the permalink page of every post and your visitors are now able to comment on your posts, as long as they have a disqus account.

Google Analytics

If you would like to implement Google Analytics for your Tumblr page then the only thing you need to do is to create a new property within your Google Analytics account, copy the property ID (starting with UA-XXXXXX) and paste it into the Options field "GoogleAnalyticsID" on the customization screen of Tumblr.

Thank you!

I would like to thank you very much for purchasing one of my themes and I hope that you will enjoy using it as much as I had fun building it! Should you run into problems during the installation or configuration of the theme and the topic is not covered in this manual, then feel free to contact me via my Themeforest profile page. I am also open to suggestions, in case you have any feature requests. So long!