Luomo

Luomo Tumblr Theme Documentation

About this theme

Luomo is an expressive, responsive theme for Tumblr created by Pixel Moxie. Luomo is designed to display your media at large sizes in big style, giving you great control over each post color palette. With Luomo, you can tailor each post to complement the way your content looks and feels. Luomo adapts to the screen size of the device you’re using to view it—your content will look awesome on any device.

Theme Features

Bespoke color palette for each post

In Luomo, posts in the index page alternate between dark and light. You can define background, text and accent colors for the generic dark and light posts—but that’s just the tip of the iceberg. Luomo comes with a predefined array of colors, allowing you to set a post background color by simply tagging it with that particular color name. You can access different variations of a color using the tags “desaturate”, “darken” and “lighten”—so, a post containing the tags #blue #darken #desaturate, will have a darker and less saturated hue of the color blue. And that’s not all—you can even break free of the included color palette by using a set of custom tags targeting individual post colors. Read more about colors in the customization section.

Filter posts by tag

Luomo features an icon-based post filter that fallbacks to an stylized dropdown menu on smaller screens. The filter includes items for each post type—including “answer”, which is disabled by default in the dashboard when you first install the theme. To make your posts filterable, simply tag them according to their type: “text”, “photo”, “quote”, “link”, “chat”, “audio”, “video” and “answer”. You can enable or disable any individual filter at any time.

Responsive Photosets

Photosets in Luomo are implemented using the excellent and responsive FlexSlider jQuery plugin—your images will look awesome at any screen size.

Twitter and Flickr feeds

Retrieve tweets based on your twitter handle or using a custom query. Populate your Flickr feed with photos from an individual user account or a group pool.

Disqus commenting system

Includes support for comment count and comments.

User defined fonts

Define a custom font stack (native fonts) for body text and Google Web Fonts families and weights for posts and footer headings.

Optional media queries

If your content gets a little too wide, you can disable the two wider media queries that cater to larger screen sizes.

Custom image logo

Upload your own logo image and set its width and height. Use the provided logo PSD template if you need help placing the logo in the allocated space.

Features on demand

At any time, you can enable or disable most of the theme features by simply toggling a checkbox on your dashboard.

Support for all post types

Luomo offers support for the following Tumblr post types: text, photo/photosets, quote, link, chat, audio, video, and answer.

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 Navigate section on the blog footer. Luomo offers support for Ask and Submit pages as well.

Compatibility

Luomo is compatible with all modern browsers and devices, including: Firefox, Chrome, Internet Explorer 9, Safari, iPhone, iPad and Android.

Installation

Login to your Tumblr account and head on to your dashboard (http://www.tumblr.com/dashboard)

dashboard

Click on the Settings icon at the top and then on the tab of the Blog you want to install the theme on.

settings

On the Blog settings page, click on the Customize button on the Theme field.

customize

On the customization dashboard, click on Edit HTML.

edit html

Open the archive you downloaded from Themeforest and find the file named: pixelmoxie-luomo-1.0.html (its located in the folder named theme). Do not double click on it—if it opens on the web browser you’ll see an ugly, garbled mess. Right-click (control-click on a Mac), and open the file on your favorite, no-frills text editor. Copy all the contents of the file and paste them on your dashboard sidebar.

paste html

Click on Update Preview (CTRL+S). Your blog should start looking like Luomo. If the preview doesn’t look quite right, it’s because Tumblr hasn’t recognized and applied the theme’s variables yet. It’ll all be fine after you save your changes and refresh your browser window.

Click on the Appearance button and you’ll be taken to the main sidebar. Under the Advanced section, make sure to uncheck “Use optimized mobile layout”.

uncheck use optimized mobile layout

Luomo has been designed to adapt to different screen sizes, and you want to make sure visitors using mobile devices will see your site as you intended. Save your changes by clicking the Save button and then refresh your browser window (F5 or CMD + F5).

Congratulations! Your Tumblr theme is now installed.

Customization

Now you can make Luomo your own. Below is a screen grab of the available theme options and some notes and hints on customization.

theme options

Your custom logo

The first step on making your Tumblr site unique should be to brand it with your own logo. You need to upload your logo as a PNG image with a transparent background. The default logo is 300px wide by 140px tall. Your logo can be any size, but it’s recommended that is no wider than that. You’ll also need to specify your logo’s dimensions for it to display correctly.

Make use of the included PSD logo template if you need help with logo placement. It’s recommended that you include the necessary whitespace around the logo in your image—however, you can tick the “Enable Extra Padding Around Logo” option if you need a little breathing space above and below.

The font used on the included PSD is called Mission Script by Lost Type and you can download it here.

Header and footer colors

The following site-wide options will define the colors applied to your blog header and footer.

Header Background
the header main background color #f5f5f5
Mobile Filter Label Background
background color of the mobile filter label #f2f2f2
Mobile Filter Label Border
border color of the mobile filter label #d9d9d9
Mobile Filter Label Inset
color of the mobile filter 1px inset highlight #ffffff
Mobile Filter Dropdown Bg
background color of the mobile filter dropdown menu #d9d9d9
Mobile Filter Dropdown Bg Hover
background color of the mobile filter menu items when hovered #cccccc
Mobile Filter Text Color
text color of the mobile version of the filter #666666
Mobile Filter Text Color Hover
text color of the mobile filter items when hovered #333333
Desktop Filter Item Bg
background color of the desktop filter items #cccccc
Desktop Filter Item Bg Hover
background color of the desktop filter items when hovered #999999
Footer Background
background color of the blog footer #343332
Footer Text
text color of the blog footer #9a9998
Footer Link
text color of the blog footer hyperlinks #f5f5f5
Footer Link Hover
text color of the footer hyperlinks when hovered #00ccff
Pagination Background
background color of the footer pagination #40403f
Pagination Background
text color of the footer pagination #f5f5f5
Disqus Thread Accent
accent color for the Disqus thread—it will be applied to all hyperlinks #00ccff

Generic post colors

Posts in Luomo will alternate between dark and light. By default, odd posts will be darker, while even posts will be lighter. You can “force” a post to be dark or light by using the “dark” or “light” tag on that particular post. The following variables control the posts generic palette.

Dark Post Background
background color of the dark posts #494f50
Dark Post Text
text color of the dark posts #f5f5f5
Dark Post Accent
background color of the dark posts info bar items when hovered #00ccff
Dark Post Link
text color of the dark posts hyperlinks #00ccff
Dark Post Link Hover
text color of the dark posts hyperlinks when hovered #f5f5f5
Dark Post Link Hover Bg
background color of the dark posts hyperlinks when hovered #333333
Light Post Background
background color of the light posts #afb5b6
Light Post Text
text color of the light posts #333333
Light Post Accent
background color of the light posts info bar items when hovered #00ccff
Light Post Link
text color of the light posts hyperlinks #007A99
Light Post Link Hover
text color of the light posts hyperlinks when hovered #333333
Light Post Link Hover Bg
background color of the light posts hyperlinks when hovered #f5f5f5

Predefined color palette

Luomo comes with a built-in selection of colors you can use on individual posts. To color a particular post, simply tag it with the name of one of the predefined colors. Please note that this will change the post background color only—other values like text and hyperlinks colors will be unaffected. The included palette consists of sixteen named colors, and desaturated, darker and lighter variations. To access the variations, use the “desaturate”, “darken” and “lighten” tags alongside the particular color. The chart below shows each color and its variations with their corresponding tags.

For example, a post with the tags #desaturate #darken #lime could look like this.

predefined colors

Bespoke post colors

If you feel like none of the included colors is right for your post, or want your accent and link colors to complement its background, you can get really specific by using the following tags, where xxxxxx is the color hexadecimal value.

bg_xxxxxx
Color of the post background.
info_xxxxxx
Color of the post info bar background.
accent_xxxxxx
Post accent color. It applies to the info bar items when hovered and to hyperlinks, if a specific color is not set.
link_xxxxxx
Color of the post hyperlink text.

No matter what background color your posts has, Luomo will try to make its text readable by “guestimating” the background color luminosity and applying the corresponding CSS classes. Sometimes though, even the best guess can be a mismatch, or even if correct, you may prefer dark or light text against your chosen background. Remember—you can always “pin” a post as light or dark by adding the “dark” and “light” tags. A dark post will always show light text and icons over a dark background, while a light post will do the opposite.

For example, a post with the tags #bg_5ebdb8 #accent_ff1a40 #link_ffffff could look like this.

bespoke colors

Body text font stack

Luomo uses your operating system’s fonts for body text, and you can specify your desired font stack. The default one is “Segoe UI”, Tahoma, Helvetica, sans-serif.

Here’s a few sans-serif font stacks that could also work well.

Futura, “Trebuchet MS”, Arial, sans-serif;
“Gill Sans”, “Gill Sans MT”, Calibri, sans-serif;
“Trebuchet MS”, “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, Tahoma, sans-serif;
“Helvetica Neue”, Helvetica, Arial, sans-serif;
Verdana, Geneva, sans-serif;
“Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, Geneva, Verdana, sans-serif;
Segoe, “Segoe UI”, “Helvetica Neue”, Arial, sans-serif;
Calibri, Candara, Segoe, “Segoe UI”, Optima, Arial, sans-serif;
Tahoma, Geneva, Verdana, sans-serif;

Google Web Fonts

You can choose from Google’s vast library of fonts for some of this theme elements—simply enter the font family name and weight into the corresponding text fields. The following fonts can be replaced, including weight.

Post Heading Font Family
Post Heading Font Weight
Post Info Font Family
Post Info Font Weight
Footer Heading Font Family
Footer Heading Font Weight
Pagination Font Family
Pagination Font Weight

In the example below, the font family name would be Dosis, and its weight 600.

google web fonts

Head over http://www.google.com/webfonts to discover more fonts. This theme uses Open Sans and Open Sans Condensed by default, in various weights. We love it as it’s a nice looking, versatile, well executed font.

Here’s a few ones that work well for the posts and footer headings.

For the post info bar, a narrower or condensed typeface is needed, as there’s quite a bit of info to display. We feel Open Sans Condensed works great for this. Dosis is another great alternative.

Optional wider layouts

If you ever feel your content is getting too wide, you can always disable the wider layouts that cater to the largest screen sizes. Simply untick the options “Enable 1128px wide layout” and “Enable 984px wide layout” in your dashboard.

Filter posts by tags

The filter below the logo allows visitors to filter your posts by tags that match Tumblr post types. To make your posts filterable, simply tag them according to their type. On your dashboard, you can enable or disable any individual post type by checking/unchecking the options “Enable Post Filter x” (Answer is unchecked by default.)

Twitter and Flickr feeds

Use this tool to find your Flickr user or group id. Just enter the address of your photostream or group pool and it’ll find the number for you.

Enter your Flickr ID to enable the Flickr widget. You can use an individual or group pool ID, but if pooling from a group, you need to enable the option “Enable Flickr Group Feed” to switch to the right API. Set the number of images to retrieve in the Flickr Count field.

Enter your Twitter Username to activate the Twitter feed. If you wish to use a custom query, type it on the Twitter Query field (for example: “pixelmoxie-luomo.tumblr.com” or “illustration design art”). Set the number of tweets to retrieve in the Tweet Count field.

Other options

Enable Audio ID3 Info
show or hide ID3 info from audio posts.
Enable Blog Description
show or hide your blog description on the footer.
Enable Click Through Photos
clicking on photos takes you to the full-size image or a user defined target.
Enable Copyright Info
show or hide copyright info on the footer.
Enable Extra Padding Around Logo
add an extra 20px padding above and below the logo if you need a little breathing space.
Enable Flickr Group Feed
only enable this if your Flickr ID corresponds to a group pool, as opposed to an individual user.
Enable Post Content Source
show or hide info about the page where the content was originally posted.
Enable Post Notes
show or hide post notes on permalink pages.
Enable Post Reblogged From
show or hide original source from reblogged posts.
Enable Post Sharing
show or hide sharing link on post info bar (AddThis popup).
Enable Post Tags
show or hide post tags on the post footer.
Enable Social Links
show or hide all of the social links on the blog header.
Enable Uppercase Post/Footer Headings
uppercase styling for headings.
Posts Per Page
Set the number of posts per page to display.
Add custom CSS
add your own CSS rules to modify the look of your site without touching the codebase—for advanced users only!

Labels

Ask Label
label for the “ask me anything” link on the blog footer.
Submit Label
label for the “submit a post” link on the blog footer.
Categories Label
displayed on the mobile version of the post filter.
Flickr Label
label for the Flickr widget heading.

External URLs

Social icons will be displayed on the site header for the following sites/services, if not left blank.

Behance, Dribbble, Facebook, Flickr, Google+, Instagram, LastFM, LinkedIn, MySpace, Picasa, Pinterest, SoundCloud, Twitter, Vimeo, YouTube, and deviantART.

Icon Sprites

I you fine-tune the color of the text for the dark and light posts, you may want to change the icons to match. Inside the psd folder, you will find the files “luomo_icons.psd” and “social_icons.psd”. Make your changes and then export the sprites as PNG images with transparency, then use the upload buttons in the customization sidebar to upload the new files.

Support

Thank you for purchasing our theme, your support is more than appreciated!

If after reading this guide you still need help setting up your theme, or if you find a bug that needs to be ironed out, you’re welcome to contact us through our ThemeForest profile page.

A note on older version of Internet Explorer

Although this theme officially supports Internet Explorer 9 and up and other moderns browsers, some measures have been taken so the site doesn’t look completely broken on older versions of IE. Internet Explorer 7 and 8 will be served the mobile layouts with a very basic styling—color customizations will not apply—so it won’t look as pretty, but content should be perfectly accessible nonetheless.

Credits & Thanks

The following resources have been used in the making of this theme:

Sass – http://sass-lang.com/

Compass – http://compass-style.org/

normalize.css – http://necolas.github.com/normalize.css/

Frameless Grid – http://framelessgrid.com/

Open Sans – http://www.google.com/webfonts/specimen/Open+Sans

Open Sans Condensed – http://www.google.com/webfonts/specimen/Open+Sans+Condensed

Iconic – http://somerandomdude.com/work/iconic/

FlexSlider 2 – http://www.woothemes.com/flexslider/

Tweet! – http://tweet.seaofclouds.com/

Jflickrfeed – http://www.gethifi.com/blog/a-jquery-flickr-feed-plugin

FitVids – http://fitvidsjs.com/

Reveal – http://www.zurb.com/playground/reveal-modal-plugin

Images used in the demos

Simon Bouchard’s Stock Images
http://www.flickr.com/photos/simon-bouchard/sets/72157624798241210/

Sakura by Petr Kratochvil
Seabed by Petr Kratochvil
White Sands 7 by Kondo Yukihiro
Macaw by juditu
Wonderland by AD-Passion
Pin-up by Patrick Hitte