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.
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
#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.
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.
Photosets in Luomo are implemented using the excellent and responsive FlexSlider jQuery plugin—your images will look awesome at any screen size.
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.
Includes support for comment count and comments.
Define a custom font stack (native fonts) for body text and Google Web Fonts families and weights for posts and footer headings.
If your content gets a little too wide, you can disable the two wider media queries that cater to larger screen sizes.
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.
At any time, you can enable or disable most of the theme features by simply toggling a checkbox on your dashboard.
Luomo offers support for the following Tumblr post types: text, photo/photosets, quote, link, chat, audio, video, and answer.
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.
Luomo is compatible with all modern browsers and devices, including: Firefox, Chrome, Internet Explorer 9, Safari, iPhone, iPad and Android.
Login to your Tumblr account and head on to your dashboard (http://www.tumblr.com/dashboard)
Click on the Settings icon at the top and then on the tab of the Blog you want to install the theme on.
On the Blog settings page, click on the Customize button on the Theme field.
On the customization dashboard, click on 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.
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”.
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.
Now you can make Luomo your own. Below is a screen grab of the available theme options and some notes and hints on customization.
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 following site-wide options will define the colors applied to your blog header and footer.
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.
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
#lime could look like this.
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.
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
#link_ffffff could look like this.
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;
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.
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.
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.
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.)
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.
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.
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.
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.
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.
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 Condensed – http://www.google.com/webfonts/specimen/Open+Sans+Condensed
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/
Simon Bouchard’s Stock Images