Quick and Dirty Tumblr Audio Player Fix
Tested on IE, Firefox, Opera, Chrome & Safari
Alright, so Tumblr messed around with the audio player today, and rendered lots of themes broken and tutorials useless, plus given theme makers a puppy load of work to do. Sooo I just wanted to provide a couple snippets of code as a base, for any theme makers who donāt really have the time to delve into the frustration that is styling the playerā¦And also anyone whoās got a broken theme (this isnāt hard to do, I promise).
All you need to do is insert this code between your <style></style> tags. Preferably delete any styling previously associated with the Audio block, if you can.
And replace the contents of your {Audio} {/Audio} block with this code.
Youāll get something formatted like the picture above. Thereās no styling, so itāll adopt the colours, fonts, etc of your theme automatically, and will fill your post container regardless of size (this is a 250px example, but the code will adjust for 400px, 500px, etc)
If you want to make the song titles bold or anything like that, everything you need to edit is in the trackdetails div.
If you want to change the colour of the player (I used white, obviously) just change {AudioPlayerWhite} to {AudioPlayerBlack} or {AudioPlayerGrey} instead, BUT donāt forget to adjust the background-colour of .playerbuttonbg.
If youād like to make the image larger or smaller:
Change the width and height of .audioimgwrapper to whatever you want
Change the left margin (margin-left) of .trackdetails accordingly (audioimgwrapper width + 10px works nicely)
Reposition .playerbuttonbg accordingly to make it sit in the middle of the image again.
Anyway. Yes. I donāt think I have anyone following me that makes themes but oh well. There you guys go. Feel free to use and abuse as you want. No credit required. :D