audiozue: show the world what's got you grooving

articles / Make your own soundtrack skin

Creating your own soundtrack skin is pretty simple.

First, select the sountrack skin called “Plain”. This is a feed of albums with no styling applied.

The feed is just a JavaScript function that writes a list of links and image tags as follows:

<a href="(iTunes Link)">

<img src="http://audiozue.com/includes/imageresize.php?src=../images/albums/PeterGabrielSo.jpg&wmax=75&hmax=75&quality=100" alt="Peter Gabriel - So"/>
</a>

	
<a href="(iTunes Link)">
<img src="http://audiozue.com/includes/imageresize.php?src=../images/albums/SnowPatrolEyesOpen.jpg&wmax=75&hmax=75&quality=100" alt="Snow Patrol - Eyes Open"/>
</a>

The best option would be surround this with a <div> tag as follows:

<div id="audiozue">
<script type="text/javascript" 
src="http://audiozue.com/zue/user/a_band/syndicate/plainfeed/">
</script>

</div>

Then create a style for your soundtrack. Somthing like this would work:

	
#audiozue{
border-style: solid;
border-width: 1px;
border-color: gray;
padding: 1px;
background-color: white;
}
	
#audiozue img{
border-style: solid;
border-width: 1px;
border-color: gray;
padding: 1px;
width: 75px;
height: 75px;
background-image: url(http://audiozue.com/static/images/unknownalbum.jpg);
background-position: 1px 1px;
background-repeat: no-repeat;
}

The end result being:

<style type="text/css">
	
#audiozue{
border-style: solid;
border-width: 1px;
border-color: gray;
padding: 1px;
background-color: white;
}
	
#audiozue img{
border-style: solid;
border-width: 1px;
border-color: gray;
padding: 1px;
width: 75px;
height: 75px;
background-image: url(http://audiozue.com/static/images/unknownalbum.jpg);
background-position: 1px 1px;
background-repeat: no-repeat;
}
</style>
<div id="audiozue">
<script type="text/javascript" 
src="http://audiozue.com/zue/user/a_band/syndicate/plainfeed/">
</script>

</div>

Of course you can adjust these styles to match your site. Or if you don’t like the way the plain feed is structured, let us know and maybe we’ll add a feed for you.

Have fun!