Introduction

Affection is a feature-rich, responsive Tumblr theme, which starts out with a width of 1040 pixels for desktop computers and scales down nicely to tablet and smartphone resolutions. The sidebar slides under the main content area for smaller resolutions. You can easily check out the effect by visiting the demo page and resize your browser window window until you end up with a narrow window, where all columns are stacked on top of each other.

Included with the theme is a featured content slider, which gives you the possibility to give extra exposure to some of your posts, which otherwise over time might get buried on page 12 or beyond. The slider can hold up to 5 images, including descriptive captions and corresponding links to the post or external site you would like to promote. More information on how to setup and use the slider can be found in this section.

Next to that, this theme enables you to display your latest Instagram photos 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.

The Affection theme supports all 8 post types: image, gallery, video, audio, text, chat, quote and link. The galleries are using the same slideshow as the featured content slider and can handle images with different formats. You can also enable the standard Tumblr features "Ask me anything" and "Submit", if you want other people to be able to post on your website as well.

Installation

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 affection-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 2 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 Affection theme.

Choosing the number of posts per page

This particular option is pretty self-explanatory. You determine, how many posts appear on one page, before the pagination links appear below the posts. Depending on your personal preference and your posting frequency you can select anything from 1 till 15 posts.

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).

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 already uploaded pictures.

The Affection theme offers you the option to use either a tiled or a full screen background image. The demo page uses 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 "07 Background Tile", select your file and wait for the preview page to reflect the changes.

The same holds true for a full screen background image, option "08 Background Full Screen". In both cases you can change/remove your image over and over again, if you are not entirely satisfied with the look.

Attention: You cannot use both Tile and Full Screen background images together. In case you have uploaded images for both, the full screen background image will prevail. So if you prefer to use a tiled background image instead, you need to remove the full screen image first by pressing the "Clear" button.

Tip: As you go along, it is maybe a good idea to save your settings from time to time, by pressing the green "Save" button in the top right corner of the customization panel,

Google web fonts

The Affection 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 "Font Header Code". 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 "Font Header Name".

Repeat this entire procedure, if you also want to select a custom body font. The Affection demo page uses "Oswald" as a header font and "Noticia Text" as body font.

Content Options

Featured content slider

The most noteworthy component of this theme is the featured content slider that can handle up to 5 images including corresponding caption and link to either a certain post, you would like to promote or to an external site, like e.g. your portfolio. The setup is easy as pie, because it works the same way as uploading a logo or background image. As soon as you upload the first image "01 Feature 1", the slider will appear above your main content area. Repeat this step for any subsequent images you would like to add to the slider.

Tip: The slider is able to handle different image formats and will automatically adjust in height, but for the main slider it looks best, if all featured images have the same dimensions.

Per image, you can add a caption and a URL. On the demo page, I am using the post titles and links in order to promote two of my image posts.

The autoplay option of the slider is enabled by default, but you can also disable it, if you want your visitors to manually browse your featured content.

You can even determine how long the pause between the slider transitions will be, in case you leave autoplay enabled. For this, you need to fill in the time in seconds in the field labelled "16 Slider Pause Seconds". The default pause time is set to 5 seconds.

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 6 channels, namely Facebook, Twitter, Google+, Pinterest, Vimeo and Dribbble.


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 ("Instagram API ID").

In addition, you can influence the look of this widget by setting the thumbnail size and the number of photos to show up. The default settings are 277 pixels wide (covers the entire sidebar) and 5 photos with 20px of margin on the bottom of each photo. If you prefer to display the pictures in a grid, you might want to use values as 69 pixels, the limit to 12 and both gap values for margins to 0. This results in a grid of 4 by 3 photos. Also for this widget, you are able to adjust the title by changing the settings field named "03 Instagram Widget Title".

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

The activation of the twitter widget is similar. For this you need to go look for the option "20 Twitter Username" and enter your twitter username without the "@". The Option "21 Number of tweets" determines the amount of tweets that are displayed in the widget.

As soon as you entered your username and saved the changes, the twitter widget will appear automatically in the sidebar of you Tumblr page and it display your last 5 tweets by defaut. As with the other widgets, you can adjust the title by using the settings field "04 Twitter Widget Title".

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 Disqus.com and clicking the "Dashboard" link op top.

Please copy this shortname and paste it into Tumblr settings field "15 Disqus Shortname". 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.

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!

Cheers,

Alex