HAPPY Tumblr Theme Documentation
Theme version 1.0 / last update: 04.02.2014
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 comment our theme on Creative Market. It will really motivates us to make more quality themes. Your opinion is very helpful and necessary for us.
Thanks in advance.
If you want, you can follow us on social profiles:
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:
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.
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 Creative Market 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.
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.
|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|
|Variable name||Description||Default value
in demo #1
in demo #2
|005 Top Bar||Color of the bar at the top of the page header||
|011 Header Text 1||Color of the bigger text over the image in the header||
|012 Header Text 2||The smaller text over the image in the header||
|013 Menu Toggle Button||Color of the sidebar menu toggle button||
|101 Body Bg||Color of the page background||
|102 Link||Link color||
|103 Link Hover||Link color on hover||
|104 Button Bg||Background color for buttons. This applies to the "read more" button, pagination buttons and the buttons on the photo||
|301 Footer||Color of the footer bottom bar||
|302 Footer Text||Color of text in the footer||
|304 Scroll Top||Color of the scroll to top button in the footer||
|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|
|Logo Align||Set alignment of the logo image in the header|
|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:
|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
|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:
|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|
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.
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:
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.
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
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.
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.
- 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 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.
- initial release
JS scripts & apps:
- jQuery library - jquery.com
- IcoMoon – icomoon.io/app
- Photoset Grid – stylehatch.github.com/photoset-grid/
- fitVids - fitvidsjs.com
- Nivo Lightbox - dev7studios.com/plugins/nivo-lightbox
- bxSlider - bxslider.com
- Modernizr - modernizr.com
- highlight.js - highlightjs.org
- Pushy - christopheryee.ca/pushy/
- Infinite Scroll - infinite-scroll.com/
- timeago - timeago.yarp.com
- twitter-text-js - github.com/twitter/twitter-text-js
- jQuery Flickr Feed Plugin - gethifi.com/blog/a-jquery-flickr-feed-plugin
- jribbble - lab.tylergaw.com/jribbble/
- embedagram - embedagram.com
Photos, images, videos and audio used in demos (for theme preview only):
If you could spare some of your time, go check out the rest of the our Tumblr themes: