customCSSJS.pspr is a .js file (normal text file), which is renamed to .pspr for convenience. It is used to override the original style you get with first installation. It has many uses but we will concentrate on just putting images and information together for now.

Below is the minimum content of customCSSJS.pspr needed to get you started and you have to be familiar with CSS and Javascript to edit it.

 Code:
var playerSkin_CSS = {
	
		//{BR} is substituted with the value of BitRate/1000 and {SR} is substituted the value of SamplingRate/1000 in 'streaminfo_format'  later.
		//For example below expression may look like '128kbps / 44.1kHz' in the stream info <div>
		streaminfo_format : '{BR}kbps / {SR}kHz',

		//default values below display when stream information is not available
		stationinfo_default : "KK's PSP Radio (killzone_kid@hotmail.co.uk)",
		songinfo_default : "Song information is unavailable",
		streaminfo_default : "0kbps / 0kHz",
	
		toString : function () {
		
			css = '';

			//CSS for backgroundIMG.pspr image placement
			css += '.backgroundimg {position:fixed; top:0px; left:0px; visibility:visible;}';

			//CSS for animationIMG.pspr image placement
			css += '.animationimg {position:fixed; top:24px; left:363px; visibility:hidden;}';

			//CSS for station title information 'div' (should be over the title area of backgroundIMG.pspr)
			css += '.stationinfo {position:fixed; font-size:10px; top:1px; left:3px; width:474px; height:15px; color:#ffffff;}';

			//CSS for song name 'div'
			css += '.songinfo {position:fixed; font-size:10px; top:25px; left:11px; width:339px; height:15px; color:#dddddd;}';

			//CSS for stream bitrate 'div'
			css += '.streaminfo {position:fixed; font-size:10px; top:56px; left:247px; width:103px; height:15px; color:#dddddd; text-align:right;}';
			
			return css;
			delete css;
		}
	};



This code is commented with explanations so it should be self evident what needs to be changed.

You might also want to calculate the width of the stream info 'div' depending on the format you decide for it. The song and station info would automatically adjust to their 'div' widths.

So have fun and don't forget to share your designs!


Top