Customization
Milo has plenty of options to allow you to personalize your blog to your heart’s content. The downside is that sometimes finding the relevant options may not be so easy. Tumblr doesn’t allows us theme authors to group our options in a more logical manner—options are grouped together accordingly to their type. We encourage you to use your browser’s search function on the customizer to navigate to the relevant options with ease.
Header options
You can display a full-blown header or a more minimal one, depending on the options you choose to enable.
Title
Enter a title for your blog. This will be shown on the header, when enabled.
Display title
Sometimes you want the title shown on the header to be different from actual blog title, or maybe a shorter version. Type your desired title here.
Description
Enter your blog’s description. The blob of text will be shown on the header and/or sidebar, when enabled.
Header image
Use this option to upload an image to be displayed on the header. Landscape images—images with a 16:6 aspect ratio and even wider—work best. The header image doesn’t have to be too tall to be effective. The ones shown on the demos are about 1440x360 pixels, for example.
Avatar
Use this option to upload a custom portrait to replace the one Tumblr assigned to your blog by default.
Avatar shape
Choose your avatar shape: circle or square.
Show [header image|avatar|title|description]:
Use these options to toggle the visibility of the header image, avatar, blog title and description on the header.
Logo, Logo retina
Use these options to upload the standard and retina versions of your logo. The retina—or high-res—version of the logo is completely optional, and it should be exactly twice as big as the standard one. When the option Image logo is enabled, these images will replace the blog title on the header.
Image logo
Enable this option to replace the blog title in the header with the image you uploaded for Logo and, optionally, Logo retina.
Header bg pattern
Use the option to upload a seamlessness pattern image to be used as the header’s background. This image will be tiled, so make sure it repeats seamlessly. A selection of PNG image patterns with transparency is included with the theme (look in the ‘patterns’ folder inside ‘extras’). Having transparency, the images will let the header background color show through. Some of the included patterns have light and dark variations, and different opacity levels—experiment to see which ones look best against your background color.
Header social icons Toggle the visibility of the social icons on the header.
Navigation options
Header navigation
Toggle the visibility of the main navigation on the header.
Pages dropdown
Enable this option to group all the static pages you have created on the customizer into a dropdown menu.
Pages dropdown label
Enter the label to be shown on the pages dropdown. Defaults to Pages.
Categories dropdown
Enable this option to display a dropdown menu with custom categories (these are actually tags used to filter your posts).
Categories dropdown label
Enter the label to be shown on the categories dropdown. Defaults to Categories.
Categories
Enter the actual categories to be displayed on the categories dropdown, separated by commas. These categories will be used to filter your posts by tags, so make sure they match the actual tags you used on your posts exactly. For example: music, videos, photography, illustration, send me asks.
[Home|Archive|RSS|Random|Ask|Submit] button
Use these options to toggle the visibility of the Home, Archive, RSS, Random, Ask and Submit buttons on the man navigation.
Sidebar options
Besides the relevant color options, the following options controls the behavior and appearance of the sidebar—or aside.
Aside position
Position the sidebar to the left or right.
Aside trigger style
This option changes the appearance of the sidebar toggle icon (hamburger, ziggy lines, or nested list).
Aside social icons
Toggle the visibility of the social icons on the sidebar. When enabled, these will be shown inside the About widget.
Widgets
Milo includes several widgets that can be displayed on the sidebar: About, Navigation, Browse, Flickr, Dribbble, Instagram, Twitter and Likes widget.
The order in which the widgets are shown on the sidebar can be altered using the selects labeled as [Widget name] widget order. The widget order can be left blank, in which case the order will remain unaffected, or you can select a number between 1 and 7.
To toggle the visibility of the widgets in the sidebar, use the switches labeled as Show [widget name] widget.
About widget
The About widget will display your Avatar and blog Description. Enter the desired widget title on the About widget title field (defaults to About me). Enable the option Aside social icons if you wish to display your social links inside the widget.
Navigation widget
The Navigation widget mimics the structure of the header’s main menu, minus the categories (user defined tags). Set the desired title via the Navigation widget title option (defaults to Navigate).
Browse widget
The Browse widget functions as a sort of ‘tag cloud’. It will use the tags you defined in Categories to filter your posts. It serves the same purpose as the Categories Dropdown on the header’s main menu. Set the widget title via the Browse widget title option (defaults to Browse posts).
Flickr widget
To enable the Flickr widget make sure Show flickr widget is on and then enter your Flickr ID. Go to idGettr and enter the address of your photostream to find your Flickr ID number. Use Flickr count to set the number of images to be displayed and enter the widget title into the Flickr widget title field. The photostream will be displayed as a grid by default—enable Flickr widget is slider to display it as an slider instead.
Dribbble widget
To enable the Dribbble widget make sure Show dribbble widget is on and then enter your Dribbble username. Use Dribbble count to set the number of images to be displayed and enter the widget title into the Dribbble widget title field. The photostream will be displayed as a grid by default—enable Dribbble widget is slider to display it as an slider instead.
Instagram widget
To enable the Instagram widget make sure Show instagram widget is on and then enter your Instagram access token. Go to the jQInstaPics homepage to retrieve your access token. Scroll down the page and click on the Retrieve my details bro! button. Once you’ve authorized the application, you will be taken back to the jQInstaPics homepage and be presented with your token in the following format:
Your Access Token is:
309546888.674061d.879f8f19f2a94b29ad5d9fb7135bb658
Use Instagram count to set the number of images to be displayed and enter the widget title into the Instagram widget title field. The photostream will be displayed as a grid by default—enable Instagram widget is slider to display it as an slider instead.
Twitter widget
To enable the Twitter widget make sure Show twitter widget. To show your latest tweets, you need to authorize Tumblr to use Twitter on your behalf. Go to the Settings page for your blog and scroll down until you see the Share on Twitter button. After authorizing the application Tumblr will be able to read the tweets from your timeline. Use the option Twitter count to limit the number of retrieved tweets, and set the widget’s title vis the option Twitter widget title.
Likes widget
This widget will display the last five posts you liked on the sidebar. Make sure Show likes widget is on, and set the title via the Likes widget title option (defaults to Stuff I like).
Social icons
Your social icons can be displayed both on the header and sidebar if you enable the options Header social icons and Sidebar social icons. You need to enter the complete URL for each service, including the http:// or https:// portion at the beginning. The options are labeled URL [service name].
For example:
URL Bandcamp http://telefuturenow.bandcamp.com/
URL Twitter https://twitter.com/pixelmoxie
The Social icons style will allow you to change the social icons background to colored, monochrome or transparent.
Depending on your chosen color scheme, you may want to change the Social icons glyphs from light to dark.
Selecting a color scheme
Milo includes seven built-in color schemes: asphalt, clouds, cream, dashboard, frost, midnight orange and monochrome. Select your desired color scheme via the Color scheme dropdown. Unless Override accent colors and/or Override base colors are enabled, the color options set on the customizer will have no effect over your blog’s appearance.
Custom colors
The color options set on the customizer will have effect only when Override accent colors or Override base colors are enabled.
Accent colors
Sometimes you may be happy with the base colors of your selected color scheme, but wish to change the accent colors. To do so, you need to enable the option Override accent colors—then the following color options will override the values set by the color scheme. Beside the accent color values, you may need to edit the colors for the hover states of links and buttons to complement the theme base colors.
| Variable name | Description | Default value |
|---|---|---|
| Accent | Main accent color—applies to several theme elements | #35bb8e |
| Text post accent | Accent color for Photo posts | #32b8a4 |
| Photo post accent | Accent color for Text posts | #35bb8e |
| Quote post accent | Accent color for Quote posts | #38bc7a |
| Link post accent | Accent color for Link posts | #4aba68 |
| Chat post accent | Accent color for Chat posts | #7993e6 |
| Audio post accent | Accent color for Audio posts | #5e9bd4 |
| Video post accent | Accent color for Video posts | #49a3d0 |
| Answer post accent | Accent color for Answer posts | #39b1c0 |
| Logo text | Text color for the blog title | #35bb8e |
| Logo text hover | Text color for the blog title, on hover | #40c99b |
| Link | Base color for links, overriden by post type accents | #35bb8e |
| Link hover | Color for links, on hover | #ffffff |
| Button bg hover | Buttons background color, on hover | #35bb8e |
| Button border hover | Buttons border color, on hover | #32b388 |
| Button text hover | Buttons text color, on hover | #ffffff |
| Pagination bg hover | Pagination buttons background color, on hover | #35bb8e |
| Pagination border hover | Pagination buttons border color, on hover | #32b388 |
| Pagination text hover | Pagination buttons text color, on hover | #ffffff |
| Footer link | Text color for links on the footer | #35bb8e |
| Footer link hover | Text color for links on the footer, on hover | #ffffff |
| Aside link hover | Text color for links on the sidebar, on hover | #35bb8e |
| Aside tag bg hover | Sidebar tags background color, on hover | #35bb8e |
| Aside tag border hover | Sidebar tags border color, on hover | #32b388 |
| Aside tag text hover | Sidebar tags text color, on hover | #ffffff |
| Aside trigger fill | Fill color for the sidebar toggle icon | #35bb8e |
| Aside trigger fill hover | Fill color for the sidebar toggle icon, on hover | #40c99b |
Base colors
To be able to override the rest of the selected color schemes values, you have to enable the option Override base colors. With this option enabled, the following options will have precedence over the selected color scheme values. The default values for these options correspond to the asphalt color scheme.
| Variable name | Description | Default value |
|---|---|---|
| Body bg | Body background color | #2d2f34 |
| Selection bg | Background color for selected text | #343537 |
| Selection text | Text color for selected text | #e5e5e6 |
| Header bg | Header background color | #292c30 |
| Header border | Header border color | #24272b |
| Footer bg | Footer background color | #292c30 |
| Footer border | Footer border color | #24272b |
| Footer text | Footer text color | #646a75 |
| Elevator fill | ‘Scroll to top’ button fill color | #979aa1 |
| Navi text | Navigation text color (also applies to the header description) | #979aa1 |
| Navi text hover | Navigation text color, on hover | #ffffff |
| Dropdown bg | Navigation dropdowns background color | #2d2f34 |
| Dropdown border | Navigation dropdowns border color | #32363b |
| Mobile nav bg | Mobile navigation background color | #232529 |
| Mobile nav subs bg | Mobile navigation sub-sections background color | #202225 |
| Mobile nav text | Mobile navigation text color | #979aa1 |
| Mobile nav icon | Mobile navigation plus icon fill color | #575a60 |
| Post bg | Individual post main background color | #3b3e45 |
| Post date text | Post date text color (also applies to post type icon fill) | #3b3e45 |
| Post media bg | Post media background color | #36393f |
| Post media border | Post media bottom border color | #31343a |
| Post media shape fill | Fill color for the icons inside post media (quotes, links, chat, etc.) | #303338 |
| Post shadow | Color for individual posts box-shadow | #1e2024 |
| Post text | Color for individual posts text | #979aa1 |
| Post title | Color for posts headings | #a4abb6 |
| Post slider dot | Fill color for the slider pagination controls (for photosets) | #535962 |
| Button bg | Buttons background color (individual post accents override this) | #31343a |
| Button border | Buttons border color | #2d2f34 |
| Button text | Buttons text color | #797d86 |
| Pagination bg | Pagination buttons background color | #3b3e45 |
| Pagination border | Pagination buttons border color | #3b3e45 |
| Pagination text | Pagination buttons text color | #797d86 |
| Aside bg | Sidebar background color | #212327 |
| Aside text | Sidebar text color | #979aa1 |
| Aside title | Sidebar headings color | #a4abb6 |
| Aside link | Sidebar links color | #b7b9be |
| Aside tag bg | Sidebar tags background color | #1b1d20 |
| Aside tag border | Sidebar tags border color | #16181a |
| Aside tag text | Sidebar tags text color | #797d86 |
| Aside trigger bg | Background color for the sidebar toggle | #212327 |
| Aside scrollbar | Color for the sidebar scrollbar handle | #303338 |
| Aside slider dot | Fill color for the sidebar sliders pagination controls (for photostreams) | #3e4249 |
| Search input bg | Search input background color | #1c1e21 |
| Search input text | Search input text color | #979aa1 |
| Tweet time bg | Background color for the Twitter widget timestamp | #1c1e21 |
| Widget border | Separation between widgets | #2d2f34 |
| Share widget bg | Share widget (modal popup) background color | #232529 |
| Share widget text | Share widget (modal popup) text and icon color | #7e838b |
| CTA icon fill | Call-to-action icon fill color | #b9bcc0 |
| CTA icon fill hover | Call-to-action icon fill color, on hover | #d4d6d8 |
| CTA like bg | Call-to-action like button bg color | #b54940 |
| CTA reblog bg | Call-to-action reblog button bg color | #435d7f |
| CTA share bg | Call-to-action share button bg color | #34373d |
If you want to edit the accent and base colors using some other built-in color scheme as a basis, check out the Color schemes dissected section on the apendix.
Background patterns
Use the Body bg pattern, Header bg pattern and Media bg pattern options to upload a seamlessness pattern image to be used as a background for the body, header, and individual post media wells, respectively.
This image will be tiled, so make sure it repeats seamlessly. A selection of PNG image patterns with transparency is included with the theme (look in the ‘patterns’ folder inside ‘extras’). Having transparency, the images will let the elements background color show through. Some of the included patterns have light and dark variations, and different opacity levels—experiment to see which ones look best against your background color.
Loading posts with Ajax
When the Click to load option is disabled, the standard pagination links will appear above the footer to navigate to older or newer content. Switch this option on to enable loading posts on demand—a “Load more posts” button will replace the standard pagination links. Clicking on this button will load the next page worth of posts dynamically. In addition to that, if you enable the option Endless scroll, posts will load automatically when you scroll past the end of the feed, without the need for user interaction.
When Click to load is enabled, the following options can be set for the pagination labels:
Load more posts label
The label for the “load on demand” button. Defaults to Load more posts.
Loading label
The label for the “load on demand” button while posts are loading. Defaults to Loading.
No more posts label
The label for the “load on demand” button after all posts are loaded. Defaults to No more posts.
Sticky load more button
Enable this option to make the “load more button” persists after all posts have been loaded. If disabled, the button will fade away after an interval.
Disqus comments
To enable Disqus threaded comments on permalink pages and comment counts, enable the option Show comments and make sure to enter the correct Disqus shortname. The option Note count and comments conj sets the conjunction between the notes and comments counts on each post header. If your blog language is English, the default value of and will do just fine, but if your blog is in a different language you might want to change it accordingly.
Google fonts
Google Fonts options are available for body text and headings, in addition to the logo (blog title) and typographic accents (post meta, buttons, etc).
For each Google font you wish to use, you have to enter the font family name and weight in the corresponding fields.The font family name should respect the capitalization shown on Google Fonts—for example Lato instead of lato—otherwise the font won’t be rendered.
These are the available font options and their default values.
| Option name | Description | Default value |
|---|---|---|
| Body font family | Font family to be used for body text | Source Sans Pro |
| Body font weight | Normal font weight for body text | 400 |
| Body font weight bold | Bold font weight for body text | 600 |
| Headings font family | Font family to be used on headings and titles | Varela Round |
| Headings font weight | Font weight for headings and titles | 400 |
| Logo font family | Font family for the blog title | inherits from Headings font family |
| Logo font weight | Font weight for the blog title | inherits from Headings font weight |
| Accent font family | Font family used on typographic accents (buttons, post meta, author name, pagination, etc.) |
Open Sans Condensed |
| Accent font weight | Font weight for typographic accents | 700 |
Other options
Fullwidth post tags
On large enough devices, the tags on individual posts will be shown floated to the right, if the post has a description or caption. Enable this option to force the tags to span the full width of the posts, below the caption/description. If you don’t want this setting to affect all of your posts, leave this option off, and add the _fullwidth-tags tag only to those posts you want to target.
Photosets are sliders
When this option is disabled photosets will display as photoset grids, and the images will be arranged the way you set them on the dashboard. Enabling this option will make the theme render all photosets as sliders. If you only want certain posts rendered as sliders, leave this option off and add the tag _is-slider to the posts in question.
Show post author
Enable this option to display the post author name and avatar on each individual post footer. This is specially useful for group blogs. Keep in mind that the information displayed will be the one corresponding to your primary blog, even if you are posting on a secondary one. If your blog is in a language other than English, you can use the Posted by label option to set the label before the author name, which default to Posted by.
Prevent image upscaling
When this option is enabled images in Photo post won’t be resized beyond their natural width, to prevent blurriness or pixelation. This setting will only work on single image posts. Use the Photoset max width option to limit the width of photosets instead.
Limit content width to 820px and Limit content width to 620px
These options will make the individual posts narrower on desktops, limiting the size of the media (images, video and audio players) to 700 and 500 pixels respectively.
Sometimes you may want to limit the media on individual posts instead—let’s say the images on a Photo post aren’t wider than 500 pixels and you don’t want them to look blurry. You can use the tags _media700 and _media500 on individual posts to this effect.
Use system fonts
Enable this option to disregard Google Web Fonts and render the page using the fonts available on the visitor’s system instead. The following font stack will be used:
"Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif
Disable post drop shadows and Disable media drop shadows
This options will disable the box-shadows around individual posts and the drop shadows on the posts media (images, video and audio players) respectively, resulting on a flatter look.
Blog title min font size and Blog title max font size
Use this options to control the minimum (on phones and small tablets) and maximum (on large desktop screens) font size for the blog title on the header. These values will largely depend on the length of your blog title, so check your site at various screen sizes and experiment. The default values are 36 and 72. If you title is really short (like Milo) you could bump the minimum font size to 60, for example.
Photoset max width
Limit all photosets media to a certain width. Useful if you know your sets are always composed of relatively small images. Enter the maximum width as an integer without units. A value of 700 will limit all sets to a width of 700 pixels, for example.
Photoset gutter
The gap between images in a photoset. Should be an integer value without units. Defaults to 20.
Copyright text
Use this field to replace the default copyright notice on the footer with a custom one.
Credits text
Use this field to replace the theme credits on the footer with a custom message. Enter a single space to hide it.
Google Analytics ID
Enter the tracking ID for your Google Analytics Property here to start tracking your stats. The ID should have the following format: UA-XXXXXXXX-X. Keep in mind that sometimes it takes a couple of days for the data to start showing on your dashboard.