1 reply [Last post]
Kez
Kez's picture
Offline
newbie
Last seen: 8 years 22 weeks ago
Timezone: GMT+1
Joined: 2012-04-11
Posts: 2
Points: 3

Hey there, I am trying to tweak a tumblr theme so that I have two options for an audio player.

on the tag pages I am happy with the 'circle' style (which I found is a standard timeline style audio player that has been squashed down in size using css)

However on the permalink pages I would like to GET RID of the circle player in the middle of the artwork and have a more conventional timeline style audio player so the listener can jump to different points in the song. It would be positioned like this:

In order to do this I tried to create a second div in the css for this second audio player, but because my coding experience is very limited I am having trouble executing it correctly.

my html looks like this:

{block:Audio}
			  <div class="album-art">
				<div class="audio-circle"><div class="the-audio hideflash">{AudioPlayerBlack}</div></div>
				{block:AlbumArt}<img src="{AlbumArtURL}" class="the-album-art" alt="" />{/block:AlbumArt}
 
			  </div>
              <ul class="audio-meta">
 
    			<li class="trackname">{block:Artist}
{Artist}
{/block:Artist}{block:TrackName}{TrackName}{/block:TrackName}</li>
 
			  </ul>  {/block:Audio}
 
              {block:PermalinkPage}
 
				{block:Artist}
{Artist}
{/block:Artist}{block:TrackName}{TrackName}{/block:TrackName}</li>
 
 
              <div class="audio-bar"><div class="the-audio-bar hideflash">{AudioPlayerBlack}</div></div>
 
			  </div>
    		  <ul class="audio-meta-bar">
			  </ul>
			  {/block:PermalinkPage}
			  {/block:Audio}

and my css looks like this

.audio-circle{margin:-27px 0 0 -28px;background-color:#000;-webkit-border-radius:28px;-moz-border-radius:28px;border-radius:28px;position:absolute;top:50%;left:50%;opacity:.75;z-index:300}.the-audio{height:27px;width:28px;overflow:hidden;margin:14px}.audio-meta{width:240px;margin:0}.audio-meta li{margin-bottom:5px;padding:5px;list-style-type:none}#permalink .audio-bar{margin:0px 0 0 0px;background-color:#000;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;position:absolute;top:50%;left:50%;opacity:.75;z-index:300}.the-audio-bar{height:27px;width:207px;overflow:hidden;margin:0px}.audio-meta-bar{width:240px;margin:0}

the html and css before I started messing with it looked like this:

  {block:Audio}
			  <div class="album-art">
				<div class="audio-circle"><div class="the-audio hideflash">{AudioPlayerBlack}</div></div>
				{block:AlbumArt}<img src="{AlbumArtURL}" class="the-album-art" alt="" />{/block:AlbumArt}
 
			  </div>
              <ul class="audio-meta">
 
    			<li class="trackname">{block:Artist}
{Artist}
{/block:Artist}{block:TrackName}{TrackName}{/block:TrackName}</li>
 
			  </ul>
              {block:PermalinkPage}
    		  <ul class="audio-meta">
				block:Artist}
{Artist}
{/block:Artist}{block:TrackName}{TrackName}{/block:TrackName}</li>
 
 
                 {AudioEmbed-250}
 
			  </ul>
			  {/block:PermalinkPage}
			  {/block:Audio}

.audio .caption,.album-art,.audio-meta{float:left}.audio .caption{width:230px;margin:0;padding:0 5px}.album-art{width:240px;height:240px;position:relative}.album-art img{width:100%!important;height:100%!important}.audio-circle{margin:-27px 0 0 -28px;background-color:#000;-webkit-border-radius:28px;-moz-border-radius:28px;border-radius:28px;position:absolute;top:50%;left:50%;opacity:.75;z-index:300}.the-audio{height:27px;width:28px;overflow:hidden;margin:14px}.audio-meta{width:240px;margin:0}.audio-meta li{margin-bottom:5px;padding:5px;list-style-type:none}#permalink

I haven't actually uploaded a .css file to the server, I am currently using web developer tools for firefox to preview css changes which is why you wont see my modifications in the css file linked in the html.

Thanks,

Kez

Kez
Kez's picture
Offline
newbie
Last seen: 8 years 22 weeks ago
Timezone: GMT+1
Joined: 2012-04-11
Posts: 2
Points: 3

Could someone kindly point

Could someone kindly point out where I am going wrong and make suggestions / corrections? Thanks Puzzled