Changing the color of Tumblr Audio player
Posted by adrengski on Thursday, September 29th, 2011Tagged as: advance tutorials
Tumblr allows us to change our audio player into three different colors Black, white and Grey. To do that, enable custom HTML, look for the codes {AudioPlayerBlack} or {AudioPlayerWhite} or {AudioPlayerGrey} depending on your current audio player’s color. Delete that and replace it with any of those other codes. Fox example, id you want to make your audio player white, replace the codes with
{AudioPlayerWhite}
If you want it grey, change it to
{AudioPlayerGrey}
Note: Changing the color part in the codes other than white, black and Grey wouldn’t do anything.
But there are are times when your aesthetic eyes doesn’t like those default colors and would rather have green perhaps for an audio player. So here’s how to change this audio player,
Into any color you want like this:
Now, let’s skip all the jibber jabber and get on how to do this.
First, Go to Customize page, click on the Theme Tab and enable the “Use custom HTML” option.
After that, a bunch of codes would appear. But don’t let that intimidate you.All you have to do with that is press Ctrl+F and look for these codes:
{AudioPlayerBlack} or {AudioPlayerGrey} or {AudioPlayerWhite}
depending on your theme’s original audio player color.
Next, copy these codes and paste it below that code:
<script type="text/javascript" language="javascript" src="http://assets.tumblr.com/javascript/tumblelog.js?7"></script>
<script type="text/javascript" src="/api/read/json?id={PostID}"></script>
<script type="text/javascript">
var color = "Your_color_here";
var player = tumblr_api_read['posts'][0]['audio-player'].replace("color=FFFFFF", "color=" + color);
replaceIfFlash(9, "audio_player_{PostID}", player);
</script>
Replace Your_color_here with a hexadecimal color. You can use your Photoshop color picker to do that or if you don’t have Photoshop, you can pick colors here. Don’t forget to remove the “#” sign before the color. For example, if your color is #3b3b3b, you only have to put 3b3b3b.
So that’s it. The color wouldn’t change in your customize page but it would in your blog. So don’t panic if it doesn’t change. Try uploading an audio file and test it if it worked.
Again, for questions, don’t hesitate to drop something on my ask box.
