Start

HAPPY Tumblr Theme Documentation

Theme version 1.0 / last update: 04.02.2014

Introduction

At first, thank you for your interest in our theme. If you purchased our theme, we hope that, HAPPY will meet your expectations and make you really happy.

We do our best in making themes, so we will be very appreciated if you can rate and review our theme on ThemeForest (more details you can find in "FAQ" section). It will really motivates us to make more quality themes. Your opinion (rate and review) is very helpful and necessary for us.

Thanks in advance.

If you want, you can follow us on social profiles:

About theme

HAPPY is a clean, minimal blog theme for Tumblr. You can easily change the overall view of the theme (for best start, we’ve prepared a well documented user guide you’re reading now). You can customize it for your needs: change logo image, place your own photo in the page header, change place of the sidebar (left or right side). HAPPY supports following post types: photo, photoset, panorama, audio, video, text, quote, chat, link, reblogs and answer.

HAPPY is fully responsive web design for all devices.

We know that social sharing is important, so HAPPY contains social elements such as: socially sharing buttons on each post permalink page, social media widget in the sidebar (linked icons). If you’re using Twitter – you can show your latest tweets. All visitors can comment posts using Disqus comment system.

For a better experience, please check the live preview demos:

Features

Below are described all features included in HAPPY theme. Let’s start!

Retina ready logo image
HAPPY has support for Retina ready logo image (as a theme options)
"Load more" pagination - dynamic post fetching
Pagination can be switched between normal pagination (page numbers and previous/next page buttons) and dynamic post loading (load more posts button)
Support for all Tumblr post types (including newest - Panorama)
HAPPY offers support for all Tumblr post types: text, photo/photosets, quote, link, chat, audio, video, answer and the newest - panorama for wide photos.
Localized theme strings
HAPPY uses localized theme strings that allow theme to appear in every language Tumblr supports.
Social media links (widget in sidebar)
Up to 10 custom buttons placed in the sidebar (you can set icon and URL).
Exif data for photo posts
This feature shows basic Exif data from a photos: camera name, ISO value, aperture, exposure and focal length.
Highly customizable sidebar
Sidebar contains some important widgets: search, about me text widget, menu and social widgets (Twitter, Instagram, Dribbble and Flickr)
Syntax code highlighting
Multi-language automatic code highlighting in text posts. Includes automatic language detection.
Instagram, Dribbble and Flickr photostreams widgets
Displays slideshow of photostream in the sidebar
Webfont vector icons
Vector icons are retina ready and can be used to show social media links.
Responsive design
HAPPY automatically adapts to any screen resolution or device.
Custom theme colors
You can change colors for header bar, links, body background, footer background and text.
HTML5 + CSS3 animations
HAPPY theme is created using the newest web standards (HTML 5, CSS 3).
Social share buttons for blog posts
Twitter, Facebook and Google Plus sharing buttons.
Twitter feed
Retrieve and display tweets based on your twitter handle
Disqus comments
Includes support for Disqus comments system.
Author avatar and description in sidebar
In the sidebar there is a possibility to show avatar image and text description
Google Analytics support
To set up your Google Analytics, you only need to paste your unique code.
Lightbox for fullscreen photos
Cool way to showcase your photos (available in photoset and photo posts).
Showing or hiding theme elements
You can hide unnecessary theme element with one button.
Custom Vimeo video player color
You can set custom color for Video player for better match to the theme color scheme.
Like and Reblog buttons
HAPPY has implemented Tumblr features: Like and Reblog buttons.
Support for user defined pages
Create your custom static pages in the dashboard and add a link to them so they show up on the sidebar. HAPPY offers support for Ask and Submit pages as well.

Installation

This is a step-by-step installation process, facilitated using screenshots from Tumblr.

Open www.tumblr.com/dashboard and login to your account.

Click on the Settings Icon.

Click on the tab of the Blog you want to install the theme on.

Click on the Customize button.

On the customization dashboard, click on Edit HTML.

Unpack archive you’ve downloaded from Themeforest and search for the file named: Happy-1.html (first color scheme) or Happy-2.html (second color scheme) or use relevant .txt files.

Once located, open .html or .txt file with a text / code editor (such as Dreamweaver, Notepad or other). Select all code (in Windows press Ctrl+A) and copy (press Ctrl+C).

Next step is paste this code in Tumblr’s Edit HTML text area (first select all current theme code and press Ctrl+V to paste HAPPY theme code).

Final step is to click Update Preview, then Save button. Get back to Appearance tab and refresh your browser window. (F5 or Ctrl+F5).

HAPPY theme has responsive design which adapts to any device and screen resolutions, so you have to disable Tumblr's optimized mobile layout (it's enabled by the default). In "Customize" panel please go to the bottom and open "Advanced options" and switch off this option.

Customization

Theme customization is really easy! To make it easier to find the desired option, we've added a number prefix to the option name. In the next section you have description for all options.

Options

Images

Variable name Description
001 Logo Logo in page header
002 Logo 2x Logo (for Retina displays) in page header
004 Header Image in page header
202 Avatar Avatar image in the sidebar menu
203 Avatar 2x Avatar image (for Retina displays) in the sidebar menu

Colors

Variable name Description Default value
in demo #1
Default value
in demo #2
005 Top Bar Color of the bar at the top of the page header #f15a22 #383f32
011 Header Text 1 Color of the bigger text over the image in the header #ffffff #ffffff
012 Header Text 2 The smaller text over the image in the header #ffffff #ffffff
013 Menu Toggle Button Color of the sidebar menu toggle button #ffffff #ffffff
101 Body Bg Color of the page background #dddddd #f2f2f2
102 Link Link color #ea8807 #1abc9c
103 Link Hover Link color on hover #ea8807 #1abc9c
104 Button Bg Background color for buttons. This applies to the "read more" button, pagination buttons and the buttons on the photo #ffefda #e8f8f5
301 Footer Color of the footer bottom bar #2bb0f3 #1abc9c
302 Footer Text Color of text in the footer #ffffff #ffffff
304 Scroll Top Color of the scroll to top button in the footer #ffffff #ffffff

Switches

Variable name Description
003 Show Text Logo Toggles display of logo between text and image.
If switched ON, the blog name will be used instead of the logo image. Switch OFF, to display the logo image.
006 Show Top Bar Toggles display of header bar. Does not affect to display the logo and the sidebar button.
007 Top Bar Transparency Toggles transparency of header bar. Turn on to set transparency to 50%. Turn off to set solid color.
008 Show Header Toggles display of the image in the header
105 Enable Post Loading Toggles display between the standard pagination and the dynamic loading of posts
108 Show Exif Button Toggles display of exif button on the photos with exif data
109 Show Like Button Toggles display of the Like button
110 Show Reblog Button Toggles display of reblog button
111 Show Comment Button Toggles display of comment button
112 Show Share Button Toggles display of share button
113 Show Tags Toggles display of tags list
114 Show Reblog Info Toggles display of reblog info
115 Show Post Notes Toggles display of post notes
116 Show Tumblr Controls Toggles display of Tumblr buttons (Dashboard, Customize, Follow, etc.)
201 Sidebar On Right If switched ON, the sidebar is displayed on the right side. Switch OFF, to display the sidebar on the left side.
206 Show About Toggles display of the About section in the sidebar (title, avatar and text)
219 Show Home Link Toggles display of link for Home page
220 Show Archive Link Toggles display of link for Archive page
221 Show Random Link Toggles display of link for Random post page
222 Show RSS Link Toggles display of link for RSS data
223 Show Links As List Toggles display of links as list or as buttons

Select

Variable name Description
Logo Align Set alignment of the logo image in the header

Texts

Variable name Description
009 Header Text 1 Bigger text over the image in the header
010 Header Text 2 Smaller text over the image in the header
106 Disqus Username Your Disqus username. Required to display comments
107 Google Analytics Google Analytics ID, for example: UA-XXXXXXX
204 About Title Title for the about section. If empty, the title will not be displayed.
205 About Text Text for the about section
207 Categories Title Title for the categories section. If empty, the title will not be displayed.
208 Custom Name 1 Name for custom link. If empty, the link will not be displayed
209 Custom Name 1 URL URL for custom link
210 Custom Name 2 Name for custom link. If empty, the link will not be displayed
211 Custom Name 2 URL URL for custom link
212 Custom Name 3 Name for custom link. If empty, the link will not be displayed
213 Custom Name 3 URL URL for custom link
214 Custom Name 4 Name for custom link. If empty, the link will not be displayed
215 Custom Name 4 URL URL for custom link
216 Custom Name 5 Name for custom link. If empty, the link will not be displayed
217 Custom Name 5 URL URL for custom link
218 Pages Title Title for the pages section. If empty, the title will not be displayed.
224 Instagram Title Title for the Instagram section. If empty, the title will not be displayed.
225 Instagram ID Instagram user ID
226 Dribbble Title Title for the Dribbble section. If empty, the title will not be displayed.
227 Dribbble ID Dribbble username
228 Flickr Title Title for the Flickr section. If empty, the title will not be displayed.
229 Flickr ID Flickr user ID
230 Twitter Title Title for the Twitter section. If empty, the title will not be displayed.
231 Twitter Tweets Count The number of tweets retrieved to display. Default value is 2
232 Social Title Title for the social links section. If empty, the title will not be displayed.
233 Social 1 Icon Name of icon to display, for example: facebook
234 Social 1 URL URL for social profile link
235 Social 2 Icon As an option 233 Social 1 Icon
236 Social 2 URL As an option 234 Social 1 URL
237 Social 3 Icon As an option 233 Social 1 Icon
238 Social 3 URL As an option 234 Social 1 URL
239 Social 4 Icon As an option 233 Social 1 Icon
240 Social 4 URL As an option 234 Social 1 URL
241 Social 5 Icon As an option 233 Social 1 Icon
242 Social 5 URL As an option 234 Social 1 URL
243 Social 6 Icon As an option 233 Social 1 Icon
244 Social 6 URL As an option 234 Social 1 URL
245 Social 7 Icon As an option 233 Social 1 Icon
246 Social 7 URL As an option 234 Social 1 URL
247 Social 8 Icon As an option 233 Social 1 Icon
248 Social 8 URL As an option 234 Social 1 URL
249 Social 9 Icon As an option 233 Social 1 Icon
250 Social 9 URL As an option 234 Social 1 URL
251 Social 10 Icon As an option 233 Social 1 Icon
252 Social 10 URL As an option 234 Social 1 URL
253 Sidebar Footer Text Text displayed at the end of the sidebar
303 Footer Text Text displayed in the bottom footer

Sections

Header

Header is one of the first things your visitors will see. Use it and make a good impression on them.

Options 001 Logo and 002 Logo 2x allow you to load the logo image in the standard version and the version for high-resolution screens. If you don't want to display the logo, just clear the file loaded for the options above.

If you want to use an image logo try to keep this file in PNG format with transparency. Make sure that the logo image version for high-resolution screens are respectively larger in size than the normal version of the logo. Perfect size for this image is doubled the size of the image normal version of the logo.

The maximum height for the logo image is 80px for the standard version and 160px for the version for high-resolution screens.

Normal Logo High resolution Logo

Instead of the image with logo you can display the title of your blog. To do this, use the switch in the option 003 Show Text Logo.

In the header you can show your photo or any graphics. To do this, upload the image in the option 004 Header. Picture in the header, you can hide with the switch in the option 008 Show Header.

At the top of the header (where the logo is displayed) is a bar of uniform color. The color for this bar set in the option 005 Top Bar. You can also switch its transparency using a switch in the option 007 Top Bar Transparency. To disable display of the bar use 006 Show Top Bar switch. The value of opacity bar is 50%.

In the header, you can display your own slogan or any text. We have prepared for this purpose two options. 009 Header Text 1 corresponds to the first text (the one with large font), and 010 Header Text 2 corresponds to the second text. For each of these slogans, you can set any color by using options 011 Header Text 1 and 012 Header Text 2.

013 Menu Toggle Button is the last option in the header. It is the color for the sidebar toggle button.

 

Sidebar

The main goal of HAPPY theme design is to hide some of the theme elements and focus visitors attention on the content of the blog. For this purpose, we used sliding sidebar. Let us describe its components and show how to customize them.

The sidebar can be placed either on the left or right side of the page. You can set the sidebar placement in option 201 Sidebar On Right. If switched ON, the sidebar is displayed on the right side. Switch OFF, to display the sidebar on the left side.

The first is the About widget. You can use it to show info about blog author. You can set title in the option 204 About Title. Under the title you can show author photo or avatar image by uploading images into options 202 Avatar and 202 Avatar 2x (for high resolution screens). In the next option 205 About Text you can write any description. Hide or show About widget using the option 206 Show About.

The next is the Pages widget. This widget is for displaying links for blog pages. You can set title in the option 218 Pages Title. Links are displayed in a certain order so as you can see below.

  • Home link - link for blog's homepage - 219 Show Home Link
  • Custom page - if the custom page is present the link will appear automatically
  • Archive - link for Tumblr posts archive - 220 Show Archive Link
  • Random - link for random post - 221 Show Random Link
  • Ask - link for Ask page - name for this link you can set in your blog settings page
  • Submit - link for Submit page - name for this link you can set in your blog settings page
  • RSS - 222 Show RSS Link

The next is Categories widget. You can set up to five custom links. Every menu item in this widget has his own options for name and URL setting. To hide menu entry just simply leave empty name for this entry.

If you want to set custom link to show posts with a specific tag, Custom Name URL option must be written according to example: /tagged/YOURTAG

In Pages and Categories widgets, entries can be displayed as list or buttons according to option 223 Show Links As List

Show Links As List - ON Show Links As List - OFF

The next three widgets is for show photo stream from Instagram, Dribbble and Flickr services.

Titles for this three widgets you can set in options 224 Instagram Title, 226 Dribbble Title, 228 Flickr Title.

The next is Twitter widget where you can show your latest tweets. Title for this widget you can set in the option 230 Twitter Title. Number of displayed tweets you can set in the option 231 Twitter Tweets Count.

Instructions on how to setup Twitter, Instagram and Flickr widgets you can find in the FAQ section.

In the next widget you can show up to ten icons as link to any web page. You can set title for this widget in the option 232 Social Title. Every item in this widget has his own options for icon ### Social # Icon and URL ### Social # URL setting. To hide entry just simply leave empty icon name for this entry. Here you can find names for most popular icons of social media.

And the last element in the sidebar is the text with copyright information. You can set this text in the option 253 Sidebar Footer Text.

 

Posts

In the all posts you have options to show /hide some of elements. You can toggle display of the exif data on the photo post by 108 Show Exif Button switch. This has affect only if photo has embedded exif data. You can toggle display of the Tumblr like button using the option 109 Show Like Button. Only the "Like" button is visible in the posts list and permalink page, unlike the other elements of post. See a list of items that you can show or hide and options assigned to them.

  • Reblog button - 110 Show Reblog Button
  • Comments button - 111 Show Comment Button - displays only if Disqus comments is enabled
  • Share button - 112 Show Share Button
  • Tags list - 113 Show Tags
  • Reblog info - 114 Show Reblog Info
  • List of post notes - 115 Show Post Notes

Footer

In the footer at the bottom of the page you can set background color 301 Footer, text color 302 Footer Text and scroll-to-top button color 304 Scroll Top. You can add text to the footer using option 303 Footer Text.

Icons

 


home

envelop

phone

location

google-plus

facebook2

instagram

twitter

facebook

feed

youtube

vimeo

flickr

picassa

dribbble

forrst

deviantart

steam

github

github2

wordpress

joomla

blogger

tumblr

yahoo

soundcloud

skype

reddit

linkedin

lastfm

delicious

stumbleupon

stackoverflow

pinterest

xing

flattr

foursquare

paypal

yelp

Support

Please register a new account and open new ticket at our support website - www.passionthemes.com/support. It will help us to quickly solve your problem(s).

Turnaround time for support replies takes up to 24-48 hours. Please describe in detail your problem(s) with a theme. Include your blog's URL and/or your current theme code in .txt or .html file format.

FAQ

How to link Twitter account to HAPPY theme?
To link with Twitter you need to go to your blog’s Settings (not Account Settings) and find button “Sign in with Twitter” – click it. You will be redirected to Twitter, log in and authorize application. That’s all about Twitter.
How to show photos from Instagram? What is my Instagram ID?
First go to this page: http://embedagram.com. Click on "...let’s get started", you will be redirected to Instagram. Log in and authorize Embedagram (plugin to show Instagram photos in HAPPY theme). Next, you have to get your Instagram ID – go to http://jelled.com/instagram/lookup-user-id and write your Instagram username and press Submit. Copy-paste ID to HAPPY theme option 225 Instagram ID.
How to show photos from Flickr? What is my Flickr ID?
In HAPPY theme you are able to show your Flickr photos in sidebar. All you should do is to get your Flickr ID (please go here www.idgettr.com and type Flickr URL with your username, for example: http://www.flickr.com/photos/we-are-envato/ and click Find). You should get an ID similar to: 52617155@N08, which you need to put in your theme option called 229 Flickr ID.
How to rate this theme on ThemeForest?
Click "Download" tab in your ThemeForest profile page and rate our theme with 5 stars. If you want to rate our theme with less stars, first please let us know – we want to know your opinion, what things we have to improve in the future.
How can I change the CSS code by myself in HAPPY theme?
You can simply open the "Customize" panel, scroll down and click on "Advanced options". You will find there a "Add custom CSS" field - put there your CSS styles.

Changelog

v1.0 (04.02.2014)

  • initial release

Credits

JS scripts & apps:

Photos, images, videos and audio used in demos (for theme preview only):

Our themes

If you could spare some of your time, go check out the rest of the our Tumblr themes:

FLAT - Responsive Business Tumblr Theme

FRESCO - Responsive Multipurpose Tumblr Theme

PULIRE - Responsive Multipurpose Tumblr Theme