Table of Contents
Tresno - Personal Blog Tumblr Theme Documentation
Updated: 05/02/2016
Created: 08/02/2015
By: StringLabs
Email: maskodook@gmail.com
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

A) Theme Installation

Before you install this theme, you will see two files themes: tresno.html and tresno.txt. You can choose one of the two files to start the installation. For example, I will use tresno.txt.

  1. First, Open tresno.txt with Text Editor, Example: TextWrangler (Mac), Notepad, Sublime Text, or Etc

  2. Copy all HTML Code in tresno.txt file

  3. Open your browser, and Go to http://tumblr.com and Please login into your Tumblr Dashboard

  4. Click on the Gear Icon at very top of the site

  5. Click on the Edit Theme button, like this:

  6. Next, Click Edit HTML:

  7. Paste the HTML code into Tumblr theme editor:

  8. Finally, Click Update Preview and Click Save.

  9. Preview Theme after install

    Live on Tumblr Theme Editor

    Live on Tumblr Blog

B) First Navigation

Basically, this section have a Menu Navigation and Social Media Icons. Here is First Navigation preview:

1. Set Up Your First Menu Navigation

First Menu Navigation is a group link, such as: Layouts, Typography, Custom Menu, and Permalink Types.
In this tutorial, i will guide you to customize your first top menu navigation with theme options.

a. Boolean Options

If you want to Turn ON/Turn Off Links of top navigation menu, you can do with this:

b. Text Options

If you want to change the link text and also link URL, you can change with this:

c. Color Options

If you want to Change Links Text Color of top navigation menu, you can do with this:

2. Set Up Your Social Media Icons

Basically, Social Media Icons contained in the First Top Navigation and Footer. You just simply set your social media icons with the theme options. So, automatically social media icons that is on First Navigation and Footer will be modified automatically.

a. Boolean Options

If you want to Turn ON/Turn Off Social Media Icons, you can do with this:

b. Text Options

If you want to change the URL of Social Media Icons, you can change with this:

c. Color Options

If you want to Change Color of Social Media Icons, you can do with this:

C) Second Navigation

Basically, this section have a Logo and Menu Navigation. Here is a Second Navigation preview:

1. How to Set Up Your Logo

Basically, Logo in this theme have a two types.

  1. Logo as a Text
  2. Logo as an Image

  • a. How to Change The Logo Text Color

    Before you change the logo, You can see your starter logo is just as a text and isn't an Image. Of course, you must know about How to change the logo Text color before we change it with an image.

    Just change the logo text color with this theme option:

    And this is preview after change the logo text color:

  • b. How to Change The Logo with an Image

    Just upload your logo with this theme option, and your logo will be an image.

    Preview after you upload a logo

2. Set Up Your Second Menu Navigation

Second Menu Navigation is a group link, such as: Home, Pages, Post Types, Custom Menu, Contact, and Random.

a. Boolean Options

If you want to Turn ON/Turn Off Second Menu Navigation, you can do with this:

b. Color Options

If you want to Change the color of Second Menu Navigation, you can do with this:

c. Text Options

If you want to change text and URL of Second Menu Navigation, you can do with this:

d. Text Options for Dropdown Menu

Basically, this section have three dropdown menu.

  1. Dropdown Under Post Types

    Text Options

  2. Dropdown Under Custom Menu

    Text Options

  3. Dropdown Under Pages

    Basically, you just need to create a new page for displaying dropdown menu under pages. Please follow this instruction:

    1. Open your Tumblr Theme Editor, and create a new page

    2. Next, Click Update Preview and Click Save.

    3. Finally, you can see a new page on the dropdown menu under pages.

D) Featured Post Slider

Featured Post Slider is one of the features in this theme. You can do some customization for featured post slider with theme options that we provide.

  1. Enable/Disable Featured Post Slider Section

    Before you custom a slider, you must enabling the featured post slider with this theme option:

  2. Image Uploader

    In this theme, We provide six featured post slider to you. you can turn off another featured post slider if you don't need. This is theme option for upload your images.

  3. Enable/Disable Slider Per Image

  4. Enable/Disable Caption Slider

  5. Quick Tutorial: Upload Your Image and Set Up the Caption

    In this tutorial, i will guide you to upload an image and also set up your caption for featured post slider. This tutorial also can used for another slide.

    • Step 1: Upload an Image

      Note: Normal Image Size (Width: 675px x Height: 475px)

    • Step 2: Enable Slide 1 and Enable Caption for Slide 1

    • Step 3: Set Up Caption Text

    • Finally, Click Save and See your live Tumblr Preview.

  6. Color Options

E) Widgets/Sidebar

Widgets or Sidebar contain: Author Profile Widget, Banner Ads, Search, Category, Flickr Grid, Flickr Gallery, Facebook Page, Instagram Grid, Twitter Feed, Tag Cloud, sand also you can customization 10 extra widgets with upload image and HTML Code.

This is your starter widgets:

1. Custom Author Profile Widget

  • Enable/Disable Author Profile Widget

  • Upload Author Cover

  • Upload Author Avatar

  • Custom Author Name and Description

  • Color Options

2. Custom Banner Ads Widget

  • Enable/Disable Banner Ads Widget

  • Upload Banner Ads

  • Custom Banner Ads URL

3. Custom Search Widget

  • Enable/Disable Search Widget

  • Custom Placeholder Text

  • Color Options

4. Custom Category Widget

  • Enable/Disable Category Widget

  • Custom Category Text

  • Color Options

5. Custom Flickr Widget

Basically, Flickr Widget have a two mode.

  1. Flickr Grid Widget
  2. Flickr Gallery Widget

But, you can use these flickr widget with same or another flickr account.

a. Get Your Flickr ID

If you don't know what is your Flickr ID, you can access this link http://idgettr.com for get your flickr id.

For Example: we'll try to find Envato Flickr ID, and we get it with website idgetter.com

Note: don't forget and Remember your Flickr ID for activating flickr widgets

b. Flickr Grid Widget

  • Enable/Disable Flickr Grid Widget

  • Setting Widget Title, Flickr ID, and Flickr Grid Limit

c. Flickr Gallery Widget

  • Enable/Disable Flickr Gallery Widget

  • Setting Widget Title, Flickr ID, and Flickr Grid Limit

  • Color Options

6. Custom Facebook Page Widget

  • Enable/Disable Facebook Page Widget

  • Setting Widget Title and Facebook Page URL

7. Custom Instagram Widget

  • Enable/Disable Instagram Widget

  • GET Instagram UserID and Instagram Access Token

    Visit this website: http://instagram.pixelunion.net/

    click Generate Access Token to Get Your Instagram Access Token

    Copy and Remember Your Instagram Access Token ID and Instagram User ID

    a. My Instagram USER ID: 1494679416
    b. My Instagram ACCESS TOKEN ID: 1494679416.1677ed0.835c85bc49f84e0896e777658ae8bca3

    Finally, back to your tumblr theme editor, and please put instagram User ID and Access Token like this:

    Note: You can set instagram feed limit and widget title with theme option.

8. Custom Twitter Feed Widget

  • Enable/Disable Twitter Feed:

  • Custom Title and Twitter Feed Limit

  • Twitter Feed Widget Setting

    For Activating the Twitter Feed Widget, you must integrating your Twitter Account to Tumblr. This quick tutorial will show you about how to integrating your Twitter account to Tumblr.

    • Go to Your Dashboard and Click the Gear Icon at Very top of the site

    • After that, Scroll Down and Click the Share on Twitter button

    • Next, Click the Authorize App button

    • Finally, Disable Share posts on Twitter button if you no want to share any post to your Twitter.

  • Color Options

9. Custom Tag Cloud Widget

  • Enable/Disable Tag Cloud Widget

  • Custom Tag Cloud Title and Color

10. Custom Extra Widget

  • Boolean Options

  • Custom Widget Title and Extra Widget HTML Code

  • Upload Image

  • Color Options

  • Example Extra Widget

F) Setting Widget Position

In this theme, We provide left and right widget position, and also you can remove widget from this theme with theme option.

1. Left Widget Position

You just need to turn off "Enable Widget Position Right" to make your widget move to left position.

2. Right Widget Position

The Default position of widget is right position. if you want to change back into right position, please re-enabling this theme option

3. Enable/Disable Widget on Index Page

If you want to remove widget on index page, please turn off this theme option

4. Enable/Disable Widget on Permalink Page

If you want to remove widget on permalink page, please turn off this theme option

5. Enable Full Width Post on Permalink Page (Without Widget)

You can make your permalink post to full width with this theme option (note: without widget)

G) Post Section

In this tutorial, we will customing some of post types. such as: Quote, Link, Photoset and also we will custom background blog.

1. Custom Photoset Model (Grid/Slider)

  • Photoset Gallery Model

    Just keep enable this theme option to make your photoset as a slider

  • Photoset Grid Model

    Turn Off this theme option to make your photoset as a Grid

2. Custom Quote Post Background Model

  • Quote Post Background Cover

    Just "Turn OFF" this theme option to make your quote post have a background cover

    Next, Try to upload an image

    Preview Quote Post Background Cover

  • Quote Post Background Pattern

    Turn ON this theme option to make your quote post have a background pattern

    Next, Try to upload an image

    Preview Quote Post Background Pattern

3. Custom Link Post Background Model

  • Link Post Background Cover

    Just "Turn OFF" this theme option to make your link post have a background cover

    Next, Try to upload an image

    Preview Link Post Background Cover

  • Link Post Background Pattern

    Turn ON this theme option to make your quote post have a background pattern

    Next, Try to upload an image

    Preview Link Post Background Pattern

4. Custom Blog Body Background

  • Background Cover

    Turn ON thi theme option.

    Next, Try to upload an image

    Preview Blog Body Background Cover

  • Background Pattern

    Turn OFF this theme option

    Next, Try to upload an image

    Preview Blog Body Background Pattern

5. Color Option for Post Section

H) Permalink Pages

In this tutorial, you will learn how to custom Author Profile on Permalink, Adding Disqus Comment, and Enable/Disable Meta Info.

1. Custom Author Profile on Permalink

  • Enable/Disable Author Profile on Permalink

  • Custom Author Name and Description

  • Enable/Disable Social Media on Author Profile

  • Image Upload for Author Avatar

  • Preview Author Profile on Permalink

  • Color Options

2. Adding Disqus Comment

If you want to Enable Disqus Comment, please fill the Disqus Shortname on the theme options menu.

After that, Please check the Disqus Comment on Permalink Page.

Color Options

3. Enable/Disable Meta Info

If you want to Turn on or off meta info, please use these theme option.

Color Options

4. Enable/Disable Post Notes

If you want to Turn on or off post notes, please use these theme option.

Color Options

I) Footer Section

  • Boolean Options

  • Text Options

  • Color Options

  • Preview Footer

J) How to Change Fonts

Before you change or custom fonts in this theme, you must searching font.
Go to https://www.google.com/fonts, and please choose your font will used in this theme.

Note: In this case, i will using 2 fonts.

  1. After you choose a font, please Click Add to Collection

  2. Next, Click Use

  3. Checklist the font weight you want

  4. Remember the font family

  5. Just Copy URL fonts

  6. Back to your tumblr editor, and Paste URL into this theme option

  7. Finally, click Save before you change fonts in some section.

Quick Tutorial: Custom Font Family for First Navigation and Second Navigation

  1. Let's Change first navigation font family to 'Lobster', cursive.

  2. After Font Changed.

  3. Let's Change second navigation font family to 'Shadows Into Light', cursive.

  4. After Font Changed.

K) Advance Options

  1. Mobile View

    Actually, if you new installing a theme or you new make a tumblr account, Mobile Layout is look default. Therefore, you must disable the default mobile layout. So, enjoy with your nice mobile layout.

    • Click Advanced Options menu

    • Click Disable or Turn OFF Use optimized mobile layout

  2. Hide Promote Tumblr

    For Professional use, i guess you must hide a Promote Tumblr Button. You can do that with Disable Promote Tumblr! option like this:

  3. Setting Post Per Page

  4. Google Analytics Setting

    For Activating the Google Analytics, you must adding your Google Analytics ID in the Google Analytics ID theme option

L) Credits

M) Support

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.


StringLabs

Back to Top