by trickydick » Fri Jul 01, 2011 4:30 am
I love the idea, but I had to modify it just a little to make it work seamlessly with each theme.
Here is how:
I am currently working on all the player colors for each theme,but for now you will have to copy the silver or black images to the root\icons\theme folders. Don;t rename them (the shouldn't overwrite any originals.
Next you will have to modiify each css file for each theme in subsonic.. Just add this to the bottom:
/* Player images*/
a#rewind1 {
background-image:url("../icons/midnight/rewind1.png");background-position: 0px 0px; background-repeat:no-repeat; height: 24px; width: 23px; display:block;text-indent: -9999px;}
a#forward1 {
background-image:url("../icons/midnight/forward1.png");background-position: 0px 0px; background-repeat:no-repeat; height: 24px; width: 23px; display:block;text-indent: -9999px;}
a#clear1 {
background-image:url("../icons/midnight/clear1.png");background-position: 0px 0px; background-repeat:no-repeat; height: 24px; width: 23px; display:block;text-indent: -9999px;
}
a#shuffle {
background-image:url("../icons/midnight/shuffle.png");background-position: 0px 0px; background-repeat:no-repeat; height: 24px; width: 23px; display:block;text-indent: -9999px;}
a#repeat_on {
background-image:url("../icons/midnight/repeat_on.png");background-position: 0px 0px; background-repeat:no-repeat; height: 24px; width: 23px; display:block;text-indent: -9999px;}
a#repeat_off {
background-image:url("../icons/midnight/repeat_off.png");background-position: 0px 0px; background-repeat:no-repeat; height: 24px; width: 23px; display:block;text-indent: -9999px;}
a#undo {
background-image:url("../icons/midnight/undo.png");background-position: 0px 0px; background-repeat:no-repeat; height: 24px; width: 23px; display:block;text-indent: -9999px;}
a#settings1 {
background-image:url("../icons/midnight/settings1.png");background-position: 0px 0px; background-repeat:no-repeat; height: 24px; width: 23px; display:block;text-indent: -9999px;}
Next....open playlist.jsp and replace the playes section with this:
<c:if test="${model.player.web}">
<td style="white-space:nowrap;"><a href="javascript:noop()" onClick="onPrevious()" id="rewind1">Rewind</a></td>
<td style="white-space:nowrap;"><a href="javascript:noop()" onClick="onNext(false)" id="forward1">Forward</a></td>
</c:if>
<td style="white-space:nowrap;">
<a href="javascript:noop()" onClick="onClear()" id="clear1">Clear</a>
</td>
<td style="white-space:nowrap;"><a href="javascript:noop()" onClick="onShuffle()" id="shuffle">Shuffle</a></td>
<c:if test="${model.player.web or model.player.jukebox or model.player.external}">
<td style="white-space:nowrap;"><span id="bobcontent1-title" class="handcursor"></span><div id="bobcontent1" class="switchgroup1"></div>
<script type="text/javascript">
// MAIN FUNCTION: new switchcontent("class name", "[optional_element_type_to_scan_for]") REQUIRED
// Call Instance.init() at the very end. REQUIRED
var bobexample=new switchcontent("switchgroup1", "div") //Limit scanning of switch contents to just "div" elements
bobexample.setStatus('<a href="javascript:noop()" onClick="onToggleRepeat()" id="repeat_on" /> ', '<a href="javascript:noop()" onClick="onToggleRepeat()" id="repeat_off" /> ')
bobexample.setColor('darkred', 'black')
bobexample.setPersist(true)
bobexample.collapsePrevious(true) //Only one content open at any given time
bobexample.init()
</script></a></td>
</c:if>
<td style="white-space:nowrap;"><a href="javascript:noop()" onClick="onUndo()" id="undo">undo</a></td>
<c:if test="${model.user.settingsRole}">
<td style="white-space:nowrap;"><a href="playerSettings.view?id=${model.player.id}" target="main" id="settings1">settings</a></td>
</c:if>
Thats it, now no matter what theme your users select they will get the correct player colors.
Soon i will provide source images for each theme (they are slightly different colors). Enjoy
Tricky