#*iotheme

io by mercurythms

preview 1 | preview 2 | download

features:

adjustable post width and height

full height sidebar with adjustible width

adjustable post margins

customized audio player in posts

credits: 

base code - @seyche

system uicons - corey ginnivan and @glenthemes

responsive videos - @nouvae

css photosets - @annasthms and @eggdesign​

mobile photoset fix 3.0 - @glenthemes

custom like and reblog button inspired by @shythemes

custom audio player - @annasthms

minimal soundcloud player - @shythemes ​

tippy.js tooltips - atomiks

fade in effect - cory laviska

remove tumblr redirects - @magnusthemes

smooth scroll - gblazex

customization tips:

Font choices can be found on google fonts. All you need to do is type the font you want in the theme customization panel.

Icon shapes can be found on the system uicons webpage. All you need to do is type the name of the icon in the theme customization panel.

It's in the customization tips of the post for that theme :)

Hi there! I'm glad you are enjoying the theme! You'll need to delete the icon, the icon styling and then set the controls to 100% opacity and move the margins a bit.

So, first: find and delete

.tmblr-iframe-compact .tmblr-iframe--unified-controls { z-index: 999999!important; margin-right: 3em; margin-top: 10px; opacity: 0; visibility: hidden; transform: scale(0.7); transform-origin: 100% 0; -webkit-transform: scale(0.7); -webkit-transform-origin: 100% 0; -o-transform: scale(0.7); -o-transform-origin: 100% 0; -moz-transform: scale(0.7); -moz-transform-origin: 100% 0; -ms-transform: scale(0.7); -ms-transform-origin: 100% 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } body.controls-click .tmblr-iframe { position: fixed; opacity: 0.6; visibility: visible; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

And replace it with:

.tmblr-iframe-compact .tmblr-iframe--unified-controls { z-index: 999999!important; margin-right: 10px; margin-top: 10px; transform: scale(0.7); transform-origin: 100% 0; -webkit-transform: scale(0.7); -webkit-transform-origin: 100% 0; -o-transform: scale(0.7); -o-transform-origin: 100% 0; -moz-transform: scale(0.7); -moz-transform-origin: 100% 0; -ms-transform: scale(0.7); -ms-transform-origin: 100% 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

And lastly delete these sections

#controls { position: fixed; top: 15px; right: 15px; padding: 0 5px; border-radius: 5px; z-index: 999999; }

Hi! You'll want to replace the pagination section of the html with this. Basically just moving the "Next Page" and "Previous Page" blocks so the button only appears when those pages exist :)

Hi! In the theme editor there is a toggle that allows you to hide or show tags. Turn it to the off position to make your tags visible :)

Hi! Yes it is possible.

Find this piece of code:

article { position: relative; margin: {text:post margin}px auto; width: {select:post width}; }

And replace it with:

article { position: relative; margin: {text:post margin}px auto {text:post margin}px 100px; width: {select:post width}; }