Luomo Tumblr Theme v1.3.2 Documentation
LUOMO is an expressive and responsive theme for Tumblr created by PixelMoxie. 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!
Retina Ready
LUOMO is now retina ready, and includes high-res 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 and #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 Feed
Display your latest tweets on the blog footer by simply authorizing the app with Twitter on your blog’s settings page. Your tweets will be shown using LUOMO bespoke twitter widget—or you could replace it with Twitter’s native embedded timeline if yo prefer.
Flickr, Dribbble And Instagram Feeds
Populate your Flickr feed with photos from an individual user account or a group pool. Since version 1.1 you can display your Instagram images and Dribbble shots as well on the footer.
Audio And Video Embeds
Since version 1.3.2, LUOMO provides better support for Tumblr’s native video player, Instagram and Vine videos, and Soundcloud and Spotify audio embeds.
HTML5 Audio Player
MP3 files you upload directly from your computer or devices will be reproduced by LUOMO’s bespoke HTML5 audio player powered by jPlayer.
Disqus Commenting System
Includes support for Disqus comment count and threaded comments.
User Defined Fonts
Define a custom font stack (system 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 (you can optionally upload a retina version of it too) and set its width and height. Use the provided logo PSD templates if you need help placing the logo in the allocated space.
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 new static pages on the customizer and check the option “Show a link to this page” so they show up on the Navigate section on the blog footer. LUOMO offers support for Ask and Submit pages as well.
Social Icons
Display as many social icons as you need on your blog’s header. The included services are: Behance, Blogger, DeviantART, Dribbble, Facebook, Flickr, Google+, Instagram, LastFM, LinkedIn, MySpace, Picasa, Pinterest, SoundCloud, Twitter, Vimeo, YouTube, Quora and 500px
More Features
At any time, you can enable or disable most of the theme features by simply toggling an option on the theme customizer:
Added in version 1.1
Compatibility
LUOMO is compatible with all modern browsers and devices, including: Firefox, Chrome, Internet Explorer 9, Safari, iPhone, iPad and Android.
Log into your Tumblr account and head on to your dashboard.
Click on the “gear” icon at the top of the page, and once on the Settings page, select the blog you want to install the theme on from the list on the right, if you have more than one blog listed under your account.
Click on the Edit Theme button—you will be taken to the Theme Customizer.
Once on the customizer, click on the Edit HTML hyper-link.
Open the .zip archive you downloaded from ThemeForest, and on the “theme” folder, select either pixelmoxie-luomo-1.3.2.html or pixelmoxie-luomo-1.3.2.txt. The two files are identical, the only difference being the file extension. If you have trouble opening or editing the HTML file, go for the text file instead.
Open the file using your favorite HTML or a plain text editor. If you’re working with TextEdit on a Mac, you want to follow the steps outlined on this article so TextEdit is properly configured to work with HTML documents. Or you could download a copy of TextWrangler.
Select the file’s entire content and copy it, then paste it on Tumblr’s HTML editor, replacing the code of your previous theme entirely. Make sure the result looks similar to the image below. If you see some gibberish instead of those tags, the installation process won’t be successful.
Click on Update Preview, wait until the preview refreshes and click on Save. There’s a good chance the live preview won’t look quite right until you refresh your browser window, so do that and check the changes.
Scroll down to the bottom of the customizer and go into the Advanced options section. Make sure Use default mobile theme is off, unless you want to display Tumblr’s generic mobile layout on phones. Now it’s a good time to set the Posts per page option as well.
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 we 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 High-res or retina version of you logo.
Use the Logo and Logo HiDPI image fields to upload your logo images, and specify your logo’s dimensions using the text inputs Logo width and Logo height.
Important: if you decide not to upload the retina version of your logo, you need to “clear” the default one. To do so click on Logo HiDPI and select Remove.
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 toggle the option “Enable Extra Padding Around Logo” 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, select a typeface and enter the desired text—or if you have your logo in a raster or vector format already, place it on the document and center it. Trim any unnecessary transparent pixels but make sure to leave enough whitespace to give your logo some breathing space. Make sure to center the logo vertically and that the margins on the left and right are identical.
Repeat the same process for the retina version of you logo, or upscale logo.psd by 200% and save it as logo@2x.psd. Once you’re done, hide the background layer and export both files as PNG images with transparency using the “Save for web” command. You could process your images with Optimizilla to further optimize their size.
The font used on the included PSDs is called Mission Script by Lost Type.
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 |
| 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 Border | Color for the desktop filter top border | #cccccc |
| 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 |
| Desktop Filter Text Color | Color for the desktop filter text | #f5f5f5 |
| 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 | #40403f |
| Pagination Text | Text color of the footer pagination | #f5f5f5 |
| Disqus Thread Accent | Accent color for the Disqus thread—it will be applied to all hyperlinks | #00ccff |
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 simply tagging it with the dark or light words. The following variables control the posts generic palette.
| Variable name | Description | Default value |
|---|---|---|
| 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 hyperlink | #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 |
| Slider Control Nav Normal | Color of the photoset slider navigation controls | #333333 |
| Slider Control Nav Hover | Color of the photoset slider navigation controls when hovered | #f5f5f5 |
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 would look like this.
If you feel like none of the included colors is right for your content, 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 hyper-links, if a specific color is not set.
link_xxxxxx
Color of the post hyper-link text.
No matter what background color of your post, 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 you may prefer dark or light text against your chosen background. You can always “pin” a post as light or dark by using the dark and light tags. A post with the tag #dark will always have light text and icons, while a post with the tag #light will do the opposite.
For example, a post with the tags #bg_5ebdb8 #accent_ff1a40 #link_ffffff would 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. Use the Body Font Stack option to change it.
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, Ge neva, sans-serif; “Lucida Gra nde”, “Lucida San s Unicode”, “Lucida Sans”, Geneva, Verdana, sans- serif; Segoe, “Segoe UI”, “Helvetica Neue”, Arial, sans-serif; Calibri, Candara, Segoe, “Segoe UI”, Optima, Arial, sans-serif;
You can choose from Google’s vast library of fonts to style some of the theme elements—simply enter the font family name and weight into the corresponding text options. The following fonts options are available:
| Variable Name | Default/allowed values |
|---|---|
| Post Header Font Family | Open Sans |
| Post Header Font Weight | 600 |
| Post Header Text Transform | none|capitalize|uppercase|lowercase |
| Post Filter Font Family | Open Sans Condensed |
| Post Filter Font Weight | 600 |
| Post Filter Font Size | 16 |
| Post Filter Text Transform | none|capitalize|uppercase|lowercase |
| Post Info Font Family | Open Sans Condensed |
| Post Info Font Weight | 700 |
| Footer Header Font Family | Open Sans |
| Footer Header Font Weight | 300 |
| Footer Header Text Transform | none|capitalize|uppercase|lowercase |
| Pagination Font Family | Open Sans |
| Pagination Font Weight | 400 |
In the example below, the font family name would be Dosis, and its weight 600.
Head over Google Fonts 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: Abel, Abril Fatface, Amaranth, Armata, Arvo, Asap, Cabin, Cutive, Dosis, Droid Sans, Glegoo, Gudea, Josefin Slab, Lato, PT Sans, Quattrocento Sans, Rokkitt, Source Sans Pro, Ubuntu, Varela.
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.
You can define font sizes for body text and headings for phones, tablets and desktop devices:
| Variable Name | Default values |
|---|---|
| Body Font Size Phone | 16 |
| Body Font Size Tablet | 18 |
| Body Font Size Desktop | 24 |
| Post Header Font Size Phone | 18 |
| Post Header Font Size Tablet | 27 |
| Post Header Font Size Desktop | 36 |
| Footer Font Size | 14 |
| Footer Header Font Size | 24 |
For your photoset posts, you can choose between a photoset-grid layout or an image slider. Photosets are displayed as sliders by default, but you can activate the photoset-grid layout site-wide by toggling the option Enable Photoset Grid Layout. You could also activate the photoset-grid layout for individual posts only by using the tag _photo_grid on said posts.
The Photoset Gutter option will set the gutter between cells on the photoset grid. The default value is 0, for a gapless grid. If you want some space between the cells, enter a greater number without units—a value of 10 will result on a 10px margin between images, for example.
When displaying photosets as sliders, you have a few more options to control its behavior:
Enable Slider Autostart
Whether or not the slideshow will start automatically on page load. We recommend you turn this option off if your slider images are not all of the same size, as this will make the contents below the slider jump up and down when the slider transitions between images.
Slider Animation
You can enter fade or slide.
Slider Animation Speed
Transition speed in milliseconds, defaults to 500.
Slider Slideshow Speed
When autostart is enabled, this is the interval between each slide transition, in milliseconds. Defaults to 5000, or five seconds.
Show Slider Captions
When displaying a photoset as an image slider, the individual images’ captions aren’t shown by default, to keep the slider look uncluttered. Enabling this option will push the slider pager dots underneath the slides to make room for the caption, which will inherit the post’s background color.
If you ever feel your content gets too wide, you can disable media queries as you see fit, making the desktop version of your site closer in look to the mobile version. Media queries should be disabled sequentially, toggling the corresponding options in the following order:
Enable 1440px Media Query Enable 1280px Media Query Enable 1024px Media Query
The menu underneath the logo allows visitors to filter your posts by tags matching Tumblr post types. To make your posts filterable, simply tag them according to their type (use the tags text, photo, quote, link, chat, audio, video and answer).
You can enable or disable the menu icons for any individual post type by toggling the options Enable Post Filter [Post Type] (Answer is unchecked by default.)
As of version 1.2, LUOMO allows you to define both the “label” and the “slug” to be used with each one of the post filter menu items. That means that you can keep using the same icons as always, but having them point to another 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 title.
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 switch on the option Enable Text Based Post Filter.
When using this option, you can define both the text to be shown for each filter (the label) and the actual tag the filter should point to (the slug).
You’re not longer limited to the Tumblr post types either, you have 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 specify custom tags for the filter, the option Enable Text Based Post Filter must be on. Those items won’t show up if the option is off.
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 filter menu gets too wide, you can enable the mobile version of the filter for the wider layouts. The following options must 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
The following variables apply to the new filter menu functionality, introduced in version 1.2:
| Variable Name | Description |
|---|---|
| Filter Custom Label [1-10] | User defined labels for the post filter. |
| Filter Label Text | Label for the “Text” post type. Will be shown on the mobile menu and on the desktop menu tooltip. |
| Filter Label Photo | Label for the “Photo” post type. |
| Filter Label Quote | Label for the “Quote” post type. |
| Filter Label Link | Label for the “Link” post type. |
| Filter Label Chat | Label for the “Chat” post type. |
| Filter Label Audio | Label for the “Audio” post type. |
| Filter Label Video | Label for the “Video” post type. |
| Filter Label Answer | Label for the “Answer” post type. |
| Filter Slug Text | The “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 Photo | The “slug” (last segment on the URL the menu item points to) for the “Photo” post type. |
| Filter Slug Quote | The “slug” (last segment on the URL the menu item points to) for the “Quote” post type. |
| Filter Slug Link | The “slug” (last segment on the URL the menu item points to) for the “Link” post type. |
| Filter Slug Chat | The “slug” (last segment on the URL the menu item points to) for the “Chat” post type. |
| Filter Slug Audio | The “slug” (last segment on the URL the menu item points to) for the “Audio” post type. |
| Filter Slug Video | The “slug” (last segment on the URL the menu item points to) for the “Video” post type. |
| Filter Slug Answer | The “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 Layout | Display 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 Icons | Useful when using a dark color for the menu items background. |
Toggle the Enable HTML5 Audio PLayer option to use a modern player compatible with most modern browsers to reproduce audio files hosted by Tumblr—MP3 files you upload from your computer or devices.
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.
You can disable the blog’s footer columns and widgets individually, and move widgets to alternate locations other than the default ones. These are the relevant options:
| Variable Name | What It Does |
|---|---|
| Enable Footer Copyright | Enable the footer copyright notice |
| Enable Footer Credits | Enable the footer theme credits |
| Enable Footer First Column | Enable the footer first column |
| Enable Footer Second Column | Enable the footer second column |
| Enable Footer Third Column | Enable the footer third column |
| Enable About Widget | Enable the footer About Widget |
| Enable Dribbble Widget | Enable the footer Dribbble Widget |
| Enable Flickr Widget | Enable the footer Flickr Widget |
| Enable Instagram Widget | Enable the footer Instagram Widget |
| Enable Navigation Widget | Enable the footer Navigation Widget |
| Enable Twitter Widget | Enable 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 |
To display your tweets, you first need to authorize Tumblr to access your Twitter account information. Go to the Settings page (the “gear” icon at the top), select your blog from the right sidebar if you have more than one, and click on the Share on Twitter button. You will be asked to “Authorize Tumblr to use your account”. Click on Authorize app and you will be taken back to your dashboard. You’ll see a Share posts on your Twitter switch—turn this on only if you want each published post to be shared on Twitter.
Make sure the widget is enabled (Enable Twitter Widget) and set the number of tweets to display (Twitter Count). You can change the widget title (Twitter Widget Title) and and toggle the visibility of your Twitter avatar (Enable Twitter Avatar).
If you’d rather display Twitter’s own Embedded Timeline, you need to enable the option Enable Twitter Embedded Timeline and enter the code for your timeline (Twitter Embedded Timeline Code).
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.
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 (Enable Flickr Widget). You can use an individual or group pool ID, but if pooling from a group, you need to toggle the option Enable Flickr Group Feed to switch to the right API. Set the number of images to retrieve in the Flickr Count field. You can also change the title of the widget (Flickr Widget Title).
Displaying shots from your Dribbble account is just as easy. Make sure the Dribble widget is enabled (Enable Dribbble Widget) and enter you Dribbble Username. Edit the fields Dribbble Count and Dribbble Widget Title to control the numbers of shots to display and the title for the widget.
Displaying your Instagram feed requires an extra piece of info. Besides your Instagram User ID, you’ll need an Instagram Access Token. Go to jQInstaPics homepage, scroll down and press the Retrieve my details bro! button to get your details. After signing in to Instagram you should be redirected back to jQInstaPics homepage, and your details should be displayed in the following format:
Your User ID is: 309546888 Your Access Token is: 309546888.674061d.879f8f19f2a94b29ad5d9fb7135bb658
Edit the Instagram Count and Instagram Widget Title if needed.
| Variable Name | Description | Default value |
|---|---|---|
| Ask Label | Label for the “ask me anything” link on the blog footer | Ask me anything |
| Submit Label | Label for the “submit a post” link on the blog footer | Submit a post |
| Categories Dropdown Title | Displayed on the mobile version of the post filter | Categories |
| About Widget Title | Title for the footer About Widget | About Me |
| Dribbble Widget Title | Title for the footer Dribbble Widget | Dribbble Shots |
| Flickr Widget Title | Title for the footer Flickr Widget | Latest From Flickr |
| Instagram Widget Title | Title for the footer Instagram Widget | Instagram |
| Twitter Widget Title | Title for the footer Twitter Widget | Latest Tweets |
Your social icons will be displayed on your blog’s header. Make sure to enter the URL for each service you want to display using the options URL [Service Name], and make sure to include the http:// portion at the beginning of the URL!. The option Enable Social Links needs to be on.
Icons are available for the following services: Behance, Blogger, Dribbble, Facebook, Flickr, Google+, deviantART, Instagram, LastFM, LinkedIn, MySpace, Picasa, Pinterest, Quora, SoundCloud, Twitter, Vimeo, YouTube and 500px.
Google Analytics ID
The tracking code for your Google Analytics account.
AddThis Profile ID
Enter your AddThis Profile ID to have access to analytics reports.
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 Centered Logo
Keeps the logo and social media icons centered at any screen size.
Enable Click Through Photos
Clicking on photos takes you to the full-size image or a user defined target.
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 HTML5 Audio PLayer
Swaps the default Flash audio player for an HTML5 compatible one.
Enable Image Feed Alt Styling
Alternative styling for the footer’s image feeds, with extra spacing
Enable Linkable Quotes
If this is checked, quotations text will act as a permalink to the full post.
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 Twitter Avatar
Show or hide the twitter user avatar on the Twitter Feed.
Enable RSS Button
Toggle the visibility of the “RSS” menu item on the footer navigation.
Enable Archive Button
Toggle the visibility of the “Archive” menu item on the footer navigation.
Enable Search Button
Toggle the visibility of the “Search” button on the blog’s header.
Posts Per Page
Set the number of posts per page to display (Under the “Advanced options” section).
Add custom CSS
Add your own CSS rules to modify the look of your site without touching the source code—for advanced users only!
If 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, and social_icons@2x.psd.
Make any changes you need in Photoshop and export the normal and high DPI sprites as PNG images with transparency using the “Save for web” command, then use the following image upload fields on the customizer to use the new files: LUOMO UI Icons, LUOMO UI Icons HiDPI, LUOMO Social Icons, and LUOMO Social Icons HiDPI.
Thank you for purchasing LUOMO, we truly appreciate your business!
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 via the contact form on 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 be applied—so it won’t look pretty, but content should be 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 — 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/
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
