logo

Luomo Tumblr Theme Documentation v1.3

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

Retina Ready New in version 1.1

Luomo is now retina ready, and includes HiDPI icons and graphics. The images and icons used on Luomo user interface are neatly organized on standard and high resolution sprites, and their PSD sources are included for you to modify if necessary.

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 Updated in version 1.2

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.

Since version 1.2 you can set the “label” and “slug” for each post type.

Text Based Post Filter New in Version 1.2

Now you can choose to display text instead of icons on the post filter menu, change each item “label” and “slug”, and even define up to ten custom tags of your own!

Responsive Photosets Improved in Version 1.3

Since version 1.3, Luomo lets you choose between a grid-like layout or a FlexSlider powered image slider for your photosets. Photosets are displayed as sliders by default, but you can choose the grid layout for all your sets, or on a per-post basis by adding a specific tag to your posts.

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.

Dribbble and Instagram Feeds New in version 1.1

Luomo now allows you to display your shots from Instagram and Dribbble as well!

SoundCloud Embeds New in version 1.2.1

Since version 1.2.1 Luomo offers a more seamless integration with the new SoundCloud audio embed HTML5 widget. The custom HTML5 audio player is still available for audio files hosted on Tumblr.

Spotify Embeds New in version 1.1

Now you can also share music from Spotify, in addition to SoundCloud. Luomo Spotify embeds are responsive and adapt to any screen size.

HTML5 Audio PLayer New in version 1.1

Now you can optionally replace Tumblr's default Flash audio player for an HTML5 alternative powered by jPlayer. Your audio files will play smoothly in any device that plays MP3 files natively or supports Flash. This is a great improvement over the last version, especially for those users visiting your site from a mobile device.

Twitter Embedded Timelines New in version 1.2.1

Since version 1.2.1 you can replace the old Twitter widget with Twitter Embedded Timeline.

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 (standard and HiDPI versions) and set its width and height. Use the provided logo PSD templates 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.

Also in version 1.1

Also in version 1.3

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.3.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.

Important: If using TextEdit on a Mac, you want to check Ignore rich text commands in HTML files on the preferences, or TextEdit will mess up your HTML source. Follow the instructions listed here if having trouble.

Update: Some Mac user have reported greater success using TextWrangler, an HTML and text editor for the Macintosh.

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

Jump To:

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.

You can optionally upload a HiDPI version of you logo and that image will be shown on retina displays and other devices with High DPI screens.

Important: If you don’t upload a HiDPI version of you logo, you need to clear the default one by clicking the the “clear” button next to the Logo HiDPI field, otherwise Luomo default logo will be shown on those devices.

Make use of the included PSD logo templates 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.

In the psd folder you‘ll find the files logo.psd and logo@2x.psd.

Open the logo.psd file, pick the font of your choice and type the name of your blog. Or if you have your logo in a raster or vector format already, place it on the document and center it on the x and y axis. Trim the unnecessary transparent pixels but make sure to leave enough whitespace so your logo can “breathe”. Make sure to center the logo vertically and that the margins on the left and right are identical.

Repeat the same process for the HiDPI version of you logo, or upscale the image by 200% and export it as “logo@2x.png”. Then upload both versions of your logo on the customization sidebar.

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.

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

Variable name Description Default value
Dark Post Background Background color of the dark posts #494f50#494f50
Dark Post Text Text color of the dark posts #f5f5f5#f5f5f5
Dark Post Accent Background color of the dark posts info bar items when hovered #00ccff#00ccff
Dark Post Link Text color of the dark posts hyperlink #00ccff#00ccff
Dark Post Link Hover Text color of the dark posts hyperlinks when hovered #f5f5f5#f5f5f5
Dark Post Link Hover Bg Background color of the dark posts hyperlinks when hovered #333333#333333
Light Post Background Background color of the light posts #afb5b6#afb5b6
Light Post Text Text color of the light posts #333333#333333
Light Post Accent Background color of the light posts info bar items when hovered #00ccff#00ccff
Light Post Link Text color of the light posts hyperlinks #007A99#007A99
Light Post Link Hover Text color of the light posts hyperlinks when hovered #333333#333333
Light Post Link Hover Bg Background color of the light posts hyperlinks when hovered #f5f5f5#f5f5f5
Slider Control Nav Normal Color of the photoset slider navigation controls #333333#333333
Slider Control Nav Hover Color of the photoset slider navigation controls when hovered #f5f5f5#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.

Variable NameDescription
bg_xxxxxxColor of the post background.
info_xxxxxxColor of the post info bar background.
accent_xxxxxxPost accent color. It applies to the info bar items when hovered and to hyperlinks, if a specific color is not set.
link_xxxxxxColor 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 would 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 options can be edited.

Variable NameDefault values
Post Header Font FamilyOpen Sans
Post Header Font Weight600
Post Header Text Transformnone|capitalize|uppercase|lowercase
Post Filter Font FamilyOpen Sans Condensed
Post Filter Font Weight600
Post Filter Font Size16
Post Filter Text Transformnone|capitalize|uppercase|lowercase
Post Info Font FamilyOpen Sans Condensed
Post Info Font Weight700
Footer Header Font FamilyOpen Sans
Footer Header Font Weight300
Footer Header Text Transformnone|capitalize|uppercase|lowercase
Pagination Font FamilyOpen Sans
Pagination Font Weight400

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.

Setting Font Sizes

You can define font sizes for body text and headings for phones, tablets and desktop devices

Variable NameDefault values
Body Font Size Phone16
Body Font Size Tablet18
Body Font Size Desktop24
Post Header Font Size Phone18
Post Header Font Size Tablet27
Post Header Font Size Desktop36
Footer Font Size14
Footer Header Font Size24

New: Slider Options

Now you can choose between a grid-like layout and a FlexSlider powered image slider for your Photo posts containing more than a single image.

Photo sets are displayed as sliders by default, but you can activate the grid layout site-wide by checking the option Enable Photoset Grid Layout.

When you upload more than one image to a Photo post, if you drag your images around, a blue line will appear, indicating the position the image will have when you drop it. This way you can arrange your images in any way you want.

If you want to combine grids and sliders for your photosets, you can activate the grid layout for individual posts by adding the tag `photo_grid`. If you want some separation between the images on your photoset grid, set the option `Photoset Gutter` to other than `0`.

When displaying photo sets as sliders, you have more options now to control the sliders behaviour:

Enable Slider Autostart
Whether or not the slideshow will start automatically on page load. We recommend you uncheck this option if your slider images are not all the same height, as this will make the contents below the slider jump up and down when the slider transitions between images.
Slider Animation
You can use `fade` or `slide`.
Slider Animation Speed
Transition speed in milliseconds, defaults to ´500´.
Slider Slideshow Speed
When autostart is enabled, this is the time between each slide transition, in milliseconds. Defaults to ´5000´, or five seconds.

Disabling Media Queries

If you ever feel your content is getting too wide, you can disable media queries as you see fit, making the desktop version of your site closer in look to the mobile experience. Media queries should be disabled sequentially, unchecking the corresponding options in the following order:

Enable 1440px Media Query
Enable 1280px Media Query
Enable 1024px Media Query

Filter posts by tags

The menu underneath 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.)

The Icon Based Post Filter

As of version 1.2, Luomo allows you to define both the ‘label’ and the ‘slug’ to be used with each one of the icon based post filter menu items. That means that you can keep using the same icons as always, but having them point to an user defined tag of your choice.

For example, setting the options ‘Filter Label Photo’ to ‘kitten pics’ and ‘Filter Slug Photo’ to ‘pictures’, would mean that the photo icon would now point to http://pixelmoxie-luomo.tumblr.com/tagged/pictures, and when hovered, ‘kitten pics’ will be the displayed tittle.

The Text Based Post Filter

As of version 1.2, Luomo includes the option to use just text for your post filter menu and do away with the icons altogether. To do that, you need to check the option ‘Enable Text Based Post Filter’.

When using this option, you can define both the text to be shown for each post type (the label) and the actual tag the link should target (the slug). You’re not longer limited to the Tumblr default post types either, now Luomo gives you the option to set up to ten user defined tags of your choice. Remember that the standard tags can be disabled individually, and user defined tags will always show up after them on the menu.

Important: if you set user defined tags for the filter, the “text based post filter” must be enabled. Those items won’t show up when using the “icon based post filter”.

When using the text based post filter, you may want to adjust the relevant color variables to taste. We find that dark text on a light background works better in this case.

If the text based menu gets too wide, you can enable the mobile version of the filter (dropdown) for the wider layouts too. the following options should be enabled sequentially, as needed:

Enable Mobile Filter For 1024px Layout
Enable Mobile Filter For 1280px Layout
Enable Mobile Filter For 1440px Layout
Enable Mobile Filter For 1600px Layout

These are the variables related to the new filter functionality, introduced in version 1.2:

Variable NameDescription
Filter Custom Label [1-10]User defined labels for the post filter.
Filter Label TextLabel for the “Text” post type. Will be shown on the mobile menu and on the desktop menu tooltip.
Filter Label PhotoLabel for the “Photo” post type.
Filter Label QuoteLabel for the “Quote” post type.
Filter Label LinkLabel for the “Link” post type.
Filter Label ChatLabel for the “Chat” post type.
Filter Label AudioLabel for the “Audio” post type.
Filter Label VideoLabel for the “Video” post type.
Filter Label AnswerLabel for the “Answer” post type.
Filter Slug TextThe “slug” (last segment on the URL the menu item points to) for the “Text” post type. You’ll need to tag your posts accordingly if you change this value.
Filter Slug PhotoThe “slug” (last segment on the URL the menu item points to) for the “Photo” post type.
Filter Slug QuoteThe “slug” (last segment on the URL the menu item points to) for the “Quote” post type.
Filter Slug LinkThe “slug” (last segment on the URL the menu item points to) for the “Link” post type.
Filter Slug ChatThe “slug” (last segment on the URL the menu item points to) for the “Chat” post type.
Filter Slug AudioThe “slug” (last segment on the URL the menu item points to) for the “Audio” post type.
Filter Slug VideoThe “slug” (last segment on the URL the menu item points to) for the “Video” post type.
Filter Slug AnswerThe “slug” (last segment on the URL the menu item points to) for the “Answer” post type.
Enable Post Filter [post type]Enable or disable the filter for individual post types.
Enable Mobile Filter For [1024, 1280, 1440, 1600]px LayoutDisplay the mobile version of the post filter (dropdown) on larger screen resolutions. Useful when the menu gets too wide otherwise for certain layouts.
Enable Desktop Filter Dark IconsUseful when using a dark color for the menu items background.

Enabling the HTML5 Audio PLayer

Check the Enable HTML5 Audio PLayer option to replace Tumblr Flash player for an HTML5 player for Audio posts (hosted on Tumblr or SoundCloud embeds). Browsers that can natively play MP3 files include: Safari, Mobile Safari iOS4 (iPad, iPhone, iPod), Chrome and IE9. Firefox and Opera do not support MP3 files and will use a Flash solution, so they need to have the Flash plugin installed if this option is active.

Drawback: when using the HTML5 audio player, play count won’t increment with each play and thus it won’t be shown.

Footer Columns And Widgets

You can disable at will individual footer columns and widgets. Here's a rundown of the related options.

Variable NameWhat it does
Enable Footer CopyrightEnable the footer copyright notice
Enable Footer CreditsEnable the footer theme credits
Enable Footer First ColumnEnable the footer first column
Enable Footer Second ColumnEnable the footer second column
Enable Footer Third ColumnEnable the footer third column
Enable About WidgetEnable the footer About Widget
Enable Dribbble WidgetEnable the footer Dribbble Widget
Enable Flickr WidgetEnable the footer Flickr Widget
Enable Instagram WidgetEnable the footer Instagram Widget
Enable Navigation WidgetEnable the footer Navigation Widget
Enable Twitter WidgetEnable the footer Twitter Widget
Move About Widget To Column [2, 3]Move the About Widget from its default location
Move Dribbble Widget To Column [1, 2]Move the Dribbble Widget from its default location
Move Flickr Widget To Column [1, 2]Move the Flickr Widget from its default location
Move Instagram Widget To Column [1, 2]Move the Instagram Widget from its default location
Move Navigation Widget To Column [2, 3]Move the Navigation Widget from its default location
Move Twitter Widget To Column [1, 3]Move the Twitter Widget from its default location

Twitter Feed

Since version 1.3, Luomo has changed the way tweets are displayed. In order to be compatible with the new Twitter v1.1 API, SUPPLE uses Tumblr own `tweets.js` script. This means that now you need to take different steps in order to display your latest tweets, but the process is still pretty straightforward.

Now you need to enable Twitter integration in your Tumblr preferences. To do that, go to your dashboard and click on the gear icon at the top, then select the blog on which you want to show your tweets. Scroll down the settings page until you get to the Twitter sign-in option—after authorizing the app you will be redirected back to your Settings page.

You’ll need to enable the Twitter widget, and set the number of tweets to display (`Twitter Count`). You can edit the widget’s title as well (`Twitter Widget Title`) and toggle the visibility of your Twitter avatar (`Enable Twitter Avatar`).

If you’d rather display Twitter’s own Embedded Timeline, you need to check the option `Enable Twitter Embedded Timeline` and enter your timeline code (`Twitter Embedded Timeline`).

You can create your own embedded timeline using the new timeline settings page on twitter.com. Make sure to customize your widget (dark or light theme, link color, height, domain to embed the widget on) and once you’re done, copy the generated code.

Flickr Feed

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 and then 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.

Dribbble Shots

Displaying shots from your Dribbble account is just as easy. Make sure the Dribble widget is enabled and enter you Dribbble Username. Edit the fields Dribbble Count and Dribbble Widget Title to control the numbers of shots to display and the text shown above them.

Instagram Shots

Displaying your Instagram feed requires an extra piece of info, but thanks to this tool this is quite easy as well. Besides your Instagram User ID, you’ll need an Instagram Access Token. Go to http://projects.craftedpixelz.co.uk/jqinstapics/, scroll down and press the Retrieve my details bro! button to get your details and complete the fields with the corresponding info. Edit the Instagram Count and Instagram Widget Title if needed.

Titles and Labels

Variable NameDescriptionDefault value
Ask LabelLabel for the “ask me anything” link on the blog footerAsk me anything
Submit LabelLabel for the “submit a post” link on the blog footerSubmit a post
Categories Dropdown TitleDisplayed on the mobile version of the post filterCategories
About Widget TitleTitle for the footer About WidgetAbout Me
Dribbble Widget TitleTitle for the footer Dribbble WidgetDribbble Shots
Flickr Widget TitleTitle for the footer Flickr WidgetLatest From Flickr
Instagram Widget TitleTitle for the footer Instagram WidgetInstagram
Twitter Widget TitleTitle for the footer Twitter WidgetLatest Tweets

Social Sites And Services

Social icons will be displayed on the site header for the following sites/services, if not left blank. The option Enable Social Links need to be checked.

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

Other options

Variable NameDescription
Google Analytics IDThe tracking code for your Google Analytics account.
Adtdhis Profile IDEnter your Adtdhis Profile ID to have access to analytics reports.
Enable Audio ID3 InfoShow or hide ID3 info from audio posts.
Enable Blog DescriptionShow or hide your blog description on the footer.
Enable Centered LogoKeeps the logo and social media icons centered at any screen size.
Enable Click Through PhotosClicking on photos takes you to the full-size image or a user defined target.
Enable Extra Padding Around LogoAdd an extra 20px padding above and below the logo if you need a little breathing space.
Enable Flickr Group FeedOnly enable this if your Flickr ID corresponds to a group pool, as opposed to an individual user.
Enable HTML5 Audio PLayerSwaps the default Flash audio player for an HTML5 compatible one.
Enable Image Feed Alt StylingAlternative styling for the footer’s image feeds, with extra spacing
Enable Linkable QuotesIf this is checked, quotations text will act as a permalink to the full post.
Enable Post Content SourceShow or hide info about the page where the content was originally posted.
Enable Post NotesShow or hide post notes on permalink pages.
Enable Post Reblogged FromShow or hide original source from reblogged posts.
Enable Post SharingShow or hide sharing link on post info bar (Adtdhis popup).
Enable Post TagsShow or hide post tags on the post footer.
Enable Social LinksShow or hide all of the social links on the blog header.
Enable Twitter AvatarShow or hide the twitter user avatar on the Twitter Feed.
Posts Per PageSet the number of posts per page to display (Under the “Advanced” section).
Add custom CSSAdd your own CSS rules to modify the look of your site without touching the source code—for advanced users only!

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 following files:

luomo_icons.psd
luomo_icons@2x.psd
social_icons.psd
social_icons@2x.psd

Make your changes and then export the normal and high DPI 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

Jribbble – http://lab.tylergaw.com/jribbble/

jQInstaPics – http://projects.craftedpixelz.co.uk/jqinstapics/

FitVids – http://fitvidsjs.com/

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

jPlayer – http://jplayer.org/

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