hi G! i'm in the process of creating my own theme thanks to your wonderful tutorials. :) but i seem to be stuck right now... how do you stylize audio posts? i have looked at other tutorials, but i haven't had any luck. i would certainly appreciate the help!
hello there friend ( i hope you don’t mind me posting this publicly but – ) GOOD QUESTION. styling music players/audio posts is like styling any other post - it’s a little tricky to give you a single way to do it, as it’s really all based on personal preference for style etc.
HOWEVER - that being said, there are a few basic things that you can style so i’ll run through them and hopefully it will help :3
the tutorial below will show you step by step, how to go from an audio post like this -
to something like this -
the full code is included in the tutorial…
make sure to check out the tumblr theme documentation for audio players - this will give you an idea of what kind of thing you can have as a default and any extras you could add in.
a standard audio player block in your theme might start out looking something like this…
with a basic code a bit like this…
{block:Audio}{block:AudioPlayer}{AudioPlayerGrey}{block:Caption}{Caption}{/block:Caption}{/block:AudioPlayer}{/block:Audio}
now i’m going to add in some of the extra options from that tumblr theme documentation so that i can see some of the default info about my music post! i’ll add in the blocks for ‘track name’, ‘artist’, ‘album’ and ‘play count’.
{block:Audio}{block:AudioPlayer}{AudioPlayerGrey}{block:TrackName}{TrackName}{/block:TrackName}{block:Artist}{Artist}{/block:Artist}{block:Album}{Album}{/block:Album}{block:PlayCount}{PlayCount}{/block:PlayCount}{block:Caption}{Caption}{/block:Caption}{/block:AudioPlayer}{/block:Audio}
and you can see that the extra info goes in by default just above my caption. now all that’s left to do is add in some styling for those blocks with css…
lets start with styling the ugly grey bar… ( it will also default to a 500px width, so if your posts are any other size, then it’ll overflow! ) - i’ll resize it so that it’s just a play button, rather than a full bar - so we need a css section that will hide the overflow…
.playbutton { width:33px; height:30px; overflow:hidden;}
and then we need to wrap the ‘grey player’ in the div -
{block:Audio}{block:AudioPlayer}
{AudioPlayerGrey}
{block:TrackName}{TrackName}{/block:TrackName}{block:Artist}{Artist}{/block:Artist}{block:Album}{Album}{/block:Album}{block:PlayCount}{PlayCount}{/block:PlayCount}{block:Caption}{Caption}{/block:Caption}{/block:AudioPlayer}{/block:Audio}
and now we have a nice small play button that will not overflow the post width. we can add in the album art too… again it’s in the tumblr theme documentation -
{block:Audio}{block:AudioPlayer}
{AudioPlayerGrey}
{block:AlbumArt}{/block:AlbumArt}{block:TrackName}{TrackName}{/block:TrackName}{block:Artist}{Artist}{/block:Artist}{block:Album}{Album}{/block:Album}{block:PlayCount}{PlayCount}{/block:PlayCount}{block:Caption}{Caption}{/block:Caption}{/block:AudioPlayer}{/block:Audio}
which gives us… this freakishly large thing…
so again, all we need to do is add in another css section to resize and style the album art block. ( NB/ remember this is an image, so we need to make sure the css section styles the image by adding in the img suffix )
.albumart img { height:120px; width:120px;}
and then wrapping the albumart block in our new albumart css div
{block:Audio}{block:AudioPlayer}
{AudioPlayerGrey}
{block:AlbumArt}
{/block:AlbumArt}{block:TrackName}{TrackName}{/block:TrackName}{block:Artist}{Artist}{/block:Artist}{block:Album}{Album}{/block:Album}{block:PlayCount}{PlayCount}{/block:PlayCount}{block:Caption}{Caption}{/block:Caption}{/block:AudioPlayer}{/block:Audio}
which gives us something a little more sensible…
now it’s just a case of adding in more css to style the different sections and shuffling them around…
.playbutton { position:relative; margin-top:45px; margin-left:44px; z-index:9; width:33px; height:30px; overflow:hidden;}
.albumart img { position:relative; margin-top:-75px; margin-left:0px height:120px; width:120px;}
a little tweak to the positioning of our two css sections and we get a player button overlaying the album art.
now you can add in more css to style and position the track information… here’s the css -
.trackinfo { position:relative; margin-left:120px; height:120px; margin-top:-120px;}
and the html to go with it…
{block:Audio}{block:AudioPlayer}
{AudioPlayerGrey}
{block:AlbumArt}
{/block:AlbumArt}
{block:TrackName}{TrackName}{/block:TrackName}{block:Artist}{Artist}{/block:Artist}{block:Album}{Album}{/block:Album}{block:PlayCount}{PlayCount}{/block:PlayCount}
{block:Caption}{Caption}{/block:Caption}{/block:AudioPlayer}{/block:Audio}
and now the info is sitting nicely alongside the player and album art…
all that’s left to do now is style the actual text itself…
i added a few more text styles for each block of info, a little bit of extra styling ( border radius ) on the image - and a general block to position the info… so the complete css is…
.playbutton { position:relative; margin-top:45px; margin-left:44px; z-index:9; width:33px; height:30px; overflow:hidden;}
.albumart img { position:relative; margin-top:-75px; margin-left:0px height:120px; width:120px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px;}
.trackinfo { margin-bottom:10px; background:#000; color:#eee; top:-4px; position:relative; margin-left:120px; height:120px; margin-top:-120px; -webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomright: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px;}
.trackname { position:relative; padding-top:30px; text-align:center; font-size:14px; text-transform:uppercase; font-weight: bold; letter-spacing:2px;}
.artist { text-align:center; font-size:12px; text-transform:uppercase; letter-spacing:4px;}
.album { text-align:center; font-style: italic; letter-spacing:4px;}
.playcount { font-weight: bold; margin-top:5px; text-align:center; letter-spacing:2px;}
and the complete html -
{block:Audio}{block:AudioPlayer}
{AudioPlayerGrey}
{block:AlbumArt}
{/block:AlbumArt}
{block:TrackName}{TrackName}{/block:TrackName}
{block:Artist}{Artist}{/block:Artist}
{block:Album}{Album}{/block:Album}
{block:PlayCount}Played: {PlayCount} times{/block:PlayCount}
{block:Caption}{Caption}{/block:Caption}{/block:AudioPlayer}{/block:Audio}
resulting in…
and that’s about it! this is just one example - you can, of course, style the info sections and image any way you like!
notes:
in the theme preview/tumblr editor, the alignment will look a little ‘off’ - make sure to check on your live blog and all elements should like up as per this example ( that’s what the ‘top:-4px;’ is for in the ‘trackinfo’ css ).
if you are copy/pasting code directly from this post, you WILL need to retype all of the quotation “ marks, as tumblr doesn’t copy them correctly from the dash to the theme editor so the code won’t work if you don’t retype!
you are welcome to use this code in any theme you make for both private and public use. credit is greatly appreciated, but not necessary!
if this helps at all, or you would like to use the code - a ‘like’ or a ‘reblog’ would be lovely :3
thanks - g x
