How To Change Top Bar Tumblr Blog

1. Installation

Ease theme installation in three steps.

Make sure you are logged in to your tumblr account.
Visit https://www.tumblr.com/theme/39042 and click on "Install" on top-right corner.
Select your blog and click on "Install" again.

Mobile theme

If you would like to use Elise theme on mobile devices istead of default Tumblr theme, do this:

Open "Edit theme" screen,
Scroll to the bottom and select "Advanced options",
Turn off "Use default mobile theme" option,
Save and quit.

2. Configuration

To start configuring theme, first open "Edit theme" screen (by clicking on "Edit theme" button at the right bottom corner of your blog homepage, or "Customize" link on the right sidebar menu at your tumblr dashboard).

A. Header section

Header contain top bar with page title and navigation menu as well as single header image or up to three slides with optional caption and button.

Page Title

You can change page title text by changing "Title" option. Optionally title can be hidden by turning off "Show title" option.

Top Navigation

Navigation menu is displayed as horizontal list of links as long as there is enough place for all links in menu, if not menu change to vertical menu.

"Menu show home link" - turn on and of showing link to homepage.
"Menu show pages in dropdown menu" - if on, all custom pages link will be placed inside dropdown menu.
"Menu show categories" - turns on and off dropdown menu with list of tags. You can edit this menu element name by "Categories menu label" and specify which tags you want to display inside this menu by "Category tag [1-15]"
"Menu show ask link" - adds link to the Tumblr ask box page.
"Menu show submit link" - adds link to the submit page.
"Menu show RSS link" - adds RSS feed link to the menu.
"Menu show random post link" - adds "Random" link to the menu. This link will take you to permalink page of random selected post.
"Menu show archive link" - adds link to your blog's archive page.

Header Image

You can upload picture by "Header image". If you want a slide show you can upload two more with "Header image [2-3]".

You can add optional captions and link button to each header slide.

"Caption [1-3] horizontal align" - horizontal caption position - left, right or center.
"Caption [1-3] vertical align" - vertical positioning - top, bottom or center.
"Caption text shadow" - captions can be hard to read on some background images, so you can add shadow to the caption text to make it more readable.
"Header image change delay" - time delay between each change of header image. Time is in milliseconds so 1000 = 1s. If you want 9 second delay you must type 9000.
"Slide [1-3] caption title" - here you can type title for your header slides.
"Slide [1-3] caption text" - smaller then title text, placed below slide title.
"Slide [1-3] caption link url" - URL address for slide button.
"Slide [1-3] caption link text" -text displayed on slide button.

Header image can by turned off by "Show header image" option.

B. Posts section

Categories filter menu

This menu is used to filter posts by thier categories. You can turn it off and on by "Show posts filter menu". You can specify up to 15 categories. Making categories is easy: just tag posts you want to put in one category with same tag then type this tag name to "Category [1-15] tag" option.

Posts

When you hover over or click on post you will see its title, category or post type as well as two buttons and notes/comments counters. Some of these elements can by turn on and off by this options:

"Show posts title" - toggle showing post title.
"Show posts categories" - toggles showing category.
"Show posts notes and comments counters" - toggle counters with notes and comments numbers.

Posts titles are automatically set only for text posts and chat posts with filled "Title" box. For other types of posts you need to specify them manually.

Method 1 - Header (H) text or bolded (B) text

The ease way is to just add text you want to be your post title to the caption of your post and set it as header (H) or make it bolded (B). Basically, first header or bolded text fragment of caption will be consider as post title.

When you select text fragment, menu will show up then click on H or B icon.

Method 2 - Using class

Second method is more advanced. By using HTML mode when writing post caption you can add class="title" to any element in caption. This method have higher priority than method 1.

First switch to HTML view.

Add CSS class 'title' to one of the caption elements.

C. Footer section

Footer section contains blog description with optional social links and widgets. All widgets are optional. There is Twitter feed, Flickr feed, Dribbble feed, two text widgets and links widget.

Description and Social Links

Footer "About" section can be edited by "Description" option. You can add text and HTML tags if you want. There is also blog avatar picture which can be changed by uploading new picture on "Avatar" option.

Below your blog description you can show icons linked to your profiles on other social media sites (Facebook, Google+, Twitter, Dribbble, Instagram, Flickr, YouTube, Vimeo, DeviantART, Pinterest, LinkedIn, Behance, GitHub, Spotify, SoundCloud).

There is option to enter web addresses of your profiles at corresponding social network. If you leave these blank, icon will not be shown.

Instagram feed

To enable Instagram feed you need to type in your valid Instagram access token to "Instagram access token" option. Then you can change widget label displayed above your Instagram feed as well as how many pictures you want to load.

Twitter Feed

You can enable Twitter feed by integrating your Twitter account in Tumblr settings.

open your Tumblr dashboard page,
enter 'Settings' by using top menu,
select blog from the right side menu,
scroll down till you see "Twitter" section, click on "Share on twitter" button,
authorize Tumblr to access you twitter account,
(optional) disable "Share posts on your Twitter" if you don't want your Tumblr posts to be automatically shared to your Twitter.

Now you can change widget label displayed above your tweets as well as how many tweets you want to load.

Flickr feed

To enable Flickr feed you need to type in your Flickr username to "Flick username" option. Then you can change widget label displayed above your Flickr feed as well as how many pictures you want to load.

Text Widgets

This two widgets allow you to place text inside footer section. You can also use HTML tags here, such as <b> <i> <strong> <em> <a> and other to customize content of this widget.

Links Widget

Inside this footer widget you can place up to 5 links. Widget top text can be edited by "Footer links widget label". Each link must have url address typed in "Footer link [1-5] url" and some text wich will be displayed in "Footer link [1-5] text".

D. Other options

Disqus Comments

To add disqus comments to your blog you first must register to Disqus site at https://disqus.com/. After registration you will obtain disqus shortname for your blog.

Type in this name to "Disqus shortname" field in theme options and you are done.

Google Analytics

If you are using Google Analytics service just type your ID to "Google analytics ID" in theme options.

3. FAQ

3.1. How to use categories filter?

First turn it on with "Show posts filter menu" option. Decide which names you will use for your categories (15 is max).

add category names to the "Category [1-15] tag" fields in theme options.
assign posts to categories by adding tags from point 1 to your posts.

3.2. How to add your page to the menu?

If you want to add new elements to the menu:

Open "Edit theme" screen.
Scroll down to the bottom.
Click on "Add a page".

More about pages here: Tumblr pages

3.3. How to add ask link to menu?

Go to your tumblr dashboard.
Open tumblr settings window (gear icon on top menu).
Scroll down to "Ask" section and enable it.
Open "Edit theme" screen and turn on "Menu show ask link" option.

3.4. How to add submit link to menu?

Go to your tumblr dashboard.
Open tumblr settings window (gear icon on top menu).
Scroll down to "Submit" section and enable it.
Open "Edit theme" screen and turn on "Menu show submit link" option.

4. Credits

A big thanks to those who let me use their scripts and other resources for my theme.

Google WebFont - http://www.google.com/fonts/#
jQuery - http://jquery.com/
IcoMoon App - http://icomoon.io/
Disqus - http://disqus.com
Photoset Grid - http://stylehatch.github.com/photoset-grid/
Nivo Lightbox jQuery - http://dev7studios.com/plugins/nivo-lightbox/
HTML5 Shiv - http://code.google.com/p/html5shiv/
jQuery Custom Content Scroller - http://manos.malihu.gr/jquery-custom-content-scroller/
FitVids.JS - http://fitvidsjs.com/
Livestamp.js - http://mattbradley.github.io/livestampjs/
Masonry - http://masonry.desandro.com/
Social Networks Photo Stream - http://pixel-industry.com/website/social_networks_photo_stream_free_jquery_plugin.html

5. Changelog

Version 1.4 - 22 December 2016

FIXED - Instagram feed
ADDED - options for 'Pages' label in main menu and 'scroll top' button text
REMOVED - Dribbble feed

Version 1.3e - 14 December 2015

ADDED - two new color options for posts hover overlay background and text
CHANGE - posts height option replaced with posts aspect ratio
FIXED - updated support for new Tumblr controls buttons and fixed position set to bottom right corner
FIXED - share post codes for non standard characters in post URLs
REMOVED - unused header captions text shadows
REMOVED - 'posted by' text in post details, becouse it always shows primary blog name and not the blog that posted it

Version 1.3d - 17 September 2015

FIXED - few issues with categories menu
FIXED - infinte loading on search pages bug
FIXED - Facebook and Twitter share buttons not working for blogs with special characters in their titles

Version 1.3c - 8 September 2015

ADDED - option for turning ON and OFF scrollbars for text posts on homepage
FIXED - dissapearing posts after clicking on 'Load more posts' button when category was selected
FIXED - videos and other embeds inside text post or capton have proper height now

Version 1.3b - 18 August 2015

CHANGE - Twitter feed no longer have scroll bar, now all tweets are visible
FIXED - Flickr photos are now same size as Instagram feed photos

Version 1.3a - 29 July 2015

ADDED - option to choose how categories menu is working, filter already loaded posts (no page reload) or tag links, loading posts for that tag (page is reloading)
FIXED - flickering EXIF data when picture is fading in on index page
FIXED - few elements margins and paddings

Version 1.3 - 26 July 2015

ADDED - posts spacing option
ADDED - columns number option, you can set it to 2, 3 or 4
ADDED - blog logo can be used instead of text title
ADDED - loading page animation option
ADDED - instagram feed
ADDED - exif data for photo posts
ADDED - on single post pages, captions can be displayed on the left or right side of the photo if you use special tag ('_caption-left' or '_caption-right')
ADDED - custom copytight text option
CHANGE - number of header images increased to 5

Version 1.2a - 22 June 2015

ADDED - option to change header image to full width
ADDED - option for setting single post width
FIXED - categories filter issue when newly loaded posts wasn't visible

Version 1.2 - 13 April 2015

ADDED - color options
CHANGE - featured tags menu renamed to categories and now it shows same tags as categories filter
CHANGE - new look for categories filter
CHANGE - more than three columns can be displayed on wide screens
CHANGE - replaced video posts thumbnails on homepage with video player

Version 1.1a - 28 January 2015

FIXED - gradient display problem in Firefox browser

Version 1.1 - 25 January 2015

ADDED - option to change header image height
CHANGE - new look on grid for text, chat, link, quote, audio and answer posts
CHANGE - more small visual tweaks

Version 1.01 - 25 October 2014

ADDED - search box feature

Version 1.0 - 01 October 2014

Initial release.