Tutorial: Change the color of Tumblr’s New Audio player
Hi guys, so you may have noticed Tumblr has a brand new audio player and I, personally, am very happy with the color it has, especially when it just doesn’t match with the theme’s color scheme.
So, this is what your audio player originally looks like:
First, you have to install jQuery to your theme. If you haven’t already, add this snippet before the </head> tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Then, all you need to do is add this code before the </body> tag: (remember to change color hex to whatever color you want!)
<script> $(document).ready(function() { // audio player var $audio = $('iframe.tumblr_audio_player'); $audio.load(function() { $(this).contents().find('head').append('<style type="text/css">' + '.audio-player { background: #bdc2e8; color: #fff !important; }' + '.audio-player .audio-info .track-artist { color: #fff !important; }' + '</style>'); }); }); </script>
By the way, if there appears to have a huge gap under your audio player, all you need to do is add a css style to your audio player like this:
iframe.tumblr_audio_player { height: 85px; }
Hopefully this could give your blog better audio posts!
For theme makers who use static previews for their themes:
The script only works when your site’s domain is the same as the iframe’s domain. That means, if the blog url of your static preview page is different from the blog url where you copy your code from, it’s not gonna work on your static preview page. So how do we fix this?
First, create a demo audio post on your preview blog (where your static preview page is located). You can make it a private post if you want.
Then, go to the post’s permalink, and copy the post ID number:
Finally, go to your static preview page’s code. Find your audio post in the code, change the url in your audio post to your preview blog’s url, and change the post ID number to the one you just copied.
gummygunk
2087
yousharknotpass
pixelskylines
stormborns
theartofmadeline
