Added styled Checkbox, Radio & Select list

data/css/style.css

@@ -179,6 +179,8 @@ h2 { font-size: 13px; color: #FFF; text-decoration: none;}
 h3 { font-size: 12px; color: #FFF; text-decoration: none;}
 h4 { font-size: 10px; color: #FFF; text-decoration: none;}
 
+p { margin-top: 8px; margin-bottom: 8px; }
+
 p.indented { margin-top: 20px; margin-bottom: 20px; font-size: 12px; }
 p.center { text-align: center; font-size: 18px; }
 .smalltext2 { font-size: 12px; margin-left: 45px; }
@@ -529,7 +531,38 @@ text-shadow: 1px 1px 0px rgb(87,160,0);
 }
 
 .table_wrapper { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; width: 100%; background-color: #313131; position: relative; min-height: 50px; clear: both; _height: 302px; zoom: 1; }
-/*All inputs in the main content 
+/*All inputs in the main content */
+
+.checkbox,
+.radio {
+	width: 19px;
+	height: 25px;
+	padding: 0 5px 0 0;
+	background: url(../images/checkbox.png) no-repeat;
+	display: block;
+	clear: left;
+	float: left;
+}
+
+.radio
+{
+	background: url(../images/radio.png) no-repeat;
+}
+
+.select{
+	position: absolute;
+	width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. */
+	height: 21px;
+	padding: 0 24px 0 8px;
+	color: #000;
+	font-weight: bold;
+	text-shadow: 1px 1px 0px rgb(170,170,170);
+	font-size: 12px/21px;
+	line-height: 19px;
+	background: url(../images/select.png) no-repeat;
+	overflow: hidden;
+	background-color: #272727;
+}
 
 /*Tooltip*/
 .tooltip
@@ -586,8 +619,8 @@ text-shadow: 1px 1px 0px rgb(87,160,0);
     background-image: -ms-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
 }
 
-form input[type="radio"],
+.submit,
-form input[type='submit'] 
+input[type="submit"]
 {
     border: 1px solid #000;
     border-radius: 3px;
@@ -595,12 +628,14 @@ form input[type='submit']
     font-weight: bold;
     padding: 3px 6px 3px 6px;
 	background-image: linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
-background-image: -o-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
+	background-image: -o-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
-background-image: -moz-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
+	background-image: -moz-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
-background-image: -webkit-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
+	background-image: -webkit-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
-background-image: -ms-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
+	background-image: -ms-linear-gradient(bottom, rgb(117,117,117) 0%, rgb(156,156,156) 100%);
-text-shadow: 1px 1px 0px rgb(180,180,180);
+	text-shadow: 1px 1px 0px rgb(180,180,180);
 }
+.text-pass,
+.text-field,
 input[type="password"],
 input[type="text"]
 {

data/interfaces/default/base.html

@@ -31,7 +31,9 @@
 	
 	<!-- Script by Brinken -->
 		<script type="text/javascript" src="js/FancyScript.js"></script>
-	
+		<!-- Custom Form elements-->
+		<script type="text/javascript" src="js/custom-form-elements.js" ></script>
+		<link type="text/css" href="css/custom-form-elements.css" rel="stylesheet" />
 		<!-- jScrollPane -->
 			<!-- styles needed by jScrollPane -->
 			<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
@@ -85,7 +87,7 @@
   						<option value="artist">Artist</option>
   						<option value="album">Album</option>
 					</select>
-                    <input type="submit" value="GO"/>
+                    <input class="submit" type="submit" value="GO"/>
                 </form>
             </div>
 			<div class="clear" />

data/interfaces/default/config.html

@@ -40,14 +40,19 @@
                 </td>
 
                 <td>
-                      <h3>HTTP Password:</h3>
+					<p>
-                      <input type="password" name="http_password" value="${config['http_pass']}" size="30" maxlength="40" />
+						<h3>HTTP Password:</h3>
+						<input type="password" name="http_password" value="${config['http_pass']}" size="30" maxlength="40" />
+					</p>
                 </td>
             </tr>
 
             <tr>
                 <td>
-                    <h3>Launch Browser on Startup: <input type="checkbox" name="launch_browser" value="1" ${config['launch_browser']} /></h3>
+                    <p>
+						Launch Browser on Startup:
+						<input class="styled" type="checkbox" name="launch_browser" value="1" ${config['launch_browser']} />
+					</p>
                 </td>
             </tr>
         </table>
@@ -102,7 +107,10 @@
             
             <tr>
                 <td>
-                    <h3>Use Black Hole: <input type="checkbox" name="blackhole" value=1 ${config['use_blackhole']} /></h3>
+					<p>
+						Use Black Hole: 
+						<input class="styled" type="checkbox" name="blackhole" value="1" ${config['use_blackhole']} />
+					</p>
                 </td>
 
                 <td>
@@ -115,7 +123,9 @@
 
             <tr>
                 <td>
-                    <h3>Usenet Retention:<input type="text" name="usenet_retention" value="${config['usenet_retention']}" size="20" maxlength="40"></h3>
+                    <h3>Usenet Retention:
+						<input type="text" name="usenet_retention" value="${config['usenet_retention']}" size="20" maxlength="40">
+					</h3>
                 </td>
             </tr>
             
@@ -146,8 +156,12 @@
                 <td>
                     <h3>Music Download Directory:</h3><input type="text" name="download_torrent_dir" value="${config['download_torrent_dir']}" size="40" />
 
-                    <div class="tooltip"><span>Full path to the directory where your torrent client downloads your music
+                    <div class="tooltip">
-                    i.e. /Users/name/Downloads/music</span></div>
+						<span>
+							Full path to the directory where your torrent client downloads your music
+							i.e. /Users/name/Downloads/music
+						</span>
+					</div>
                 </td>
 
                 <td></td>
@@ -164,7 +178,9 @@
             </tr>
             <tr>
                 <td id="middle">
-                    <h3>NZBMatrix: <input type="checkbox" name="nzbmatrix" value="1" ${config['use_nzbmatrix']} /></h3>
+                    <h3>NZBMatrix: 
+						<input class="styled" type="checkbox" name="nzbmatrix" value="1" ${config['use_nzbmatrix']} />
+					</h3>
                 </td>
 
                 <td>
@@ -180,7 +196,9 @@
 
             <tr>
                 <td id="middle">
-                    <h3>Newznab: <input type="checkbox" name="newznab" value="1" ${config['use_newznab']} /></h3>
+                    <h3>Newznab: 
+						<input class="styled" type="checkbox" name="newznab" value="1" ${config['use_newznab']} />
+					</h3>
                 </td>
 
                 <td>
@@ -197,7 +215,9 @@
 
             <tr>
                 <td id="middle">
-                    <h3>NZBs.org: <input type="checkbox" name="nzbsorg" value="1" ${config['use_nzbsorg']} /></h3>
+                    <h3>NZBs.org: 
+						<input class="styled" type="checkbox" name="nzbsorg" value="1" ${config['use_nzbsorg']} />
+					</h3>
                 </td>
 
                 <td>
@@ -217,7 +237,9 @@
 			
 			<tr>
                 <td id="middle">
-                    <h3>Newzbin: <input type="checkbox" name="newzbin" value="1" ${config['use_newzbin']} /></h3>
+                    <h3>Newzbin: 
+						<input class="styled" type="checkbox" name="newzbin" value="1" ${config['use_newzbin']} />
+					</h3>
                 </td>
 
                 <td>
@@ -241,17 +263,25 @@
 
 		<tr>
 		    <td id="middle">
-                    <h3>Isohunt: <input type="checkbox" name="use_isohunt" value="1" ${config['use_isohunt']} /></h3><br />
+                    <h3>Isohunt: 
+						<input class="styled" type="checkbox" name="use_isohunt" value="1" ${config['use_isohunt']} />
+					</h3>
+					<br />
                 </td>
 
 		    <td id="middle">
-                    <h3>Mininova: <input type="checkbox" name="use_mininova" value="1" ${config['use_mininova']} /></h3><br />
+                    <h3>Mininova: 
+						<input class="styled" type="checkbox" name="use_mininova" value="1" ${config['use_mininova']} />
+					</h3>
+					<br />
                 </td>
             </tr>
 
 		<tr>
 		    <td id="middle">
-                    <h3>Kick Ass Torrents: <input type="checkbox" name="use_kat" value="1" ${config['use_kat']} /></h3>
+                    <h3>Kick Ass Torrents: 
+						<input class="styled" type="checkbox" name="use_kat" value="1" ${config['use_kat']} />
+					</h3>
                 </td>
             </tr>
         </table>
@@ -261,24 +291,60 @@
 
         <table class="configtable" summary="Quality & Post Processing">
             <tr>
-                <td>
+                <td width="200">
                 	<h2>Album Quality:</h2><br />
-                   	  <h4><input type="radio" name="preferred_quality" value="0" ${config['pref_qual_0']} /> Highest Quality excluding Lossless</h4>
+					<p>
-                      <h4><input type="radio" name="preferred_quality" value="1" ${config['pref_qual_1']} /> Highest Quality including Lossless</h4>
+						<input class="styled" type="radio" name="preferred_quality" value="0" ${config['pref_qual_0']} />
-                      <h4><input type="radio" name="preferred_quality" value="3" ${config['pref_qual_3']} /> Lossless Only</h4>
+						Highest Quality excluding Lossless
-                      <h4><input type="radio" name="preferred_quality" value="2" ${config['pref_qual_2']} /> Preferred Bitrate:
+					</p>
-    					<input type="text" name="preferred_bitrate" value="${config['pref_bitrate']}" size="3" maxlength="5" />kbps</h4>
+					<p>
-                      	<i class="smalltext2"><input type="checkbox" name="detect_bitrate" value="1" ${config['detect_bitrate']} />Auto-Detect Preferred Bitrate </i>
+						<input class="styled" type="radio" name="preferred_quality" value="1" ${config['pref_qual_1']} /> 
+						Highest Quality including Lossless
+					</p>
+					<p>
+						<input class="styled" type="radio" name="preferred_quality" value="3" ${config['pref_qual_3']} /> 
+						Lossless Only
+					</p>
+					<p>
+						<input class="styled" type="radio" name="preferred_quality" value="2" ${config['pref_qual_2']} /> 
+						Preferred Bitrate:
+						<input type="text" name="preferred_bitrate" value="${config['pref_bitrate']}" size="3" maxlength="5" />kbps
+					</p>
+					<p>
+						<input class="styled" type="checkbox" name="detect_bitrate" value="1" ${config['detect_bitrate']} />
+						Auto-Detect Preferred Bitrate 
+					</p>
                 </td>
                 <td>
                       <h2>Post-Processing:</h2>
-                      	<h4><input type="checkbox" name="move_files" value="1" ${config['move_files']} /> Move downloads to Destination Folder</h4>
+                      	<p>
-                      	<h4><input type="checkbox" name="rename_files" value="1" ${config['rename_files']} /> Rename files</h4>
+							<input class="styled" type="checkbox" name="move_files" value="1" ${config['move_files']} /> 
-                        <h4><input type="checkbox" name="correct_metadata" value="1" ${config['correct_metadata']} /> Correct metadata</h4>
+							Move downloads to Destination Folder
-                        <h4><input type="checkbox" name="cleanup_files" value="1" ${config['cleanup_files']} /> Delete leftover files (.m3u, .nfo, .sfv, .nzb, etc.)</h4>
+						</p>
-                      	<h4><input type="checkbox" name="add_album_art" value="1" ${config['add_album_art']}> Add album art as 'folder.jpg' to album folder</h4>
+                      	<p>
-                      	<h4><input type="checkbox" name="embed_album_art" value="1" ${config['embed_album_art']}> Embed album art in each file</h4>
+							<input class="styled" type="checkbox" name="rename_files" value="1" ${config['rename_files']} />
-                      	<h4><input type="checkbox" name="embed_lyrics" value="1" ${config['embed_lyrics']}> Embed lyrics</h4>
+							Rename files
+						</p>
+                        <p>
+							<input class="styled" type="checkbox" name="correct_metadata" value="1" ${config['correct_metadata']} /> 
+							Correct metadata
+						</p>
+                        <p>
+							<input class="styled" type="checkbox" name="cleanup_files" value="1" ${config['cleanup_files']} />
+							Delete leftover files (.m3u, .nfo, .sfv, .nzb, etc.)
+						</p>
+                      	<p>
+							<input class="styled" type="checkbox" name="add_album_art" value="1" ${config['add_album_art']} /> 
+							Add album art as 'folder.jpg' to album folder
+						</p>
+                      	<p>
+							<input class="styled" type="checkbox" name="embed_album_art" value="1" ${config['embed_album_art']} /> 
+							Embed album art in each file
+						</p>
+                      	<p>
+							<input class="styled" type="checkbox" name="embed_lyrics" value="1" ${config['embed_lyrics']} /> 
+							Embed lyrics
+						</p>
                 </td>
             </tr>
 
@@ -286,8 +352,11 @@
                 <td>
                     <br />
 
-                    <h3>Path to Destination folder:</h3><input type="text" name="destination_dir" value="${config['dest_dir']}" size="40" />
+                    <h3>
-                      <div class="tooltip">
+						Path to Destination folder:
+					</h3>
+					<input type="text" name="destination_dir" value="${config['dest_dir']}" size="40" />
+                    <div class="tooltip">
 						<span>
 							i.e. /Users/name/Music/iTunes or /Volumes/share/music
 						</span>
@@ -304,20 +373,39 @@
                 <td>
                 	<h2>Renaming Options:</h2>
 					<br />
-                    <h3>Folder Format:</h3><input type="text" name="folder_format" value="${config['folder_format']}" size="43" />
+                    <h3>
-                      <div class="tooltip"><span>Use: artist, album, year, releasetype and first (first letter in artist name)
+						Folder Format:
-                      				E.g.: first/artist/album [year] = G/Girl Talk/All Day [2010]</span></div>
+					</h3>
+					<input type="text" name="folder_format" value="${config['folder_format']}" size="43" />
+                    <div class="tooltip">
+						<span>
+							Use: artist, album, year, releasetype and first (first letter in artist name)
+                      		E.g.: first/artist/album [year] = G/Girl Talk/All Day [2010]
+						</span>
+					</div>
                     <br /><br />
-                    <h3>File Format:</h3><input type="text" name="file_format" value="${config['file_format']}" size="43" />
+                    <h3>
-                      <div class="tooltip"><span>Use: tracknumber, title, artist, album and year</span></div>
+						File Format:
+					</h3>
+						<input type="text" name="file_format" value="${config['file_format']}" size="43" />
+                    <div class="tooltip">
+						<span>
+							Use: tracknumber, title, artist, album and year
+						<span>
+					</div>
                 </td>
                 <td>
                       <h2>Miscellaneous:</h2>
 						<br />
-                      	<h3><input type="checkbox" name="include_extras" value="1" ${config['include_extras']} />Automatically Include Extras When Adding an Artist</h3>
+                      	<p>
+							<input class="styled" type="checkbox" name="include_extras" value="1" ${config['include_extras']} />
+							Automatically Include Extras When Adding an Artist
+						</p>
                       <div class="tooltip"><span>(EPs, Compilations, Live Albums, Remix Albums and Singles)</span></div>
 					<br /><br />
-					<h3>Interface: <select name="interface"><h3>
+					<h3>
+						Interface: <select class="styled" name="interface">
+					<h3>
 					%for interface in config['interface_list']:
 						<%
 							if interface == headphones.INTERFACE:
@@ -329,34 +417,46 @@
 					%endfor
 					</select>
 					<br /><br />
-                    <h3>Log Directory:</h3><input type="text" name="log_dir" value="${config['log_dir']}" size="40">
+                    <h3>Log Directory:</h3>
+					<input type="text" name="log_dir" value="${config['log_dir']}" size="40" />
                 </td>
             </tr>
             <tr>
                 <td>
-                      <h2>Re-Encoding Options:</h2>
+					<div class="tooltip">
-					  <div class="tooltip"><span>Note: this option requires the lame or ffmpeg encoder</span></div>
+						<span>
-						<br />
+							Note: this option requires the lame or ffmpeg encoder
-                      	<h3><input type="checkbox" name="encode" id="encode" value="1" ${config['encode']}/> Re-encode downloads during postprocessing</h3>
+						</span>
-                    	<br />
+					</div>
-                    <div id="encoderoptions">
+                    <h2>Re-Encoding Options:</h2>
-                      	<h4><input type="checkbox" name="encoderlossless" value="1" ${config['encoderlossless']}/> Only re-encode lossless files (.flac)</h4>                      
+					
 					<br />
-					<%
+                    <p>
-						if config['encoder'] == 'lame':
+						<input class="styled" type="checkbox" name="encode" id="encode" value="1" ${config['encode']} /> 
-							lameselect = 'selected="selected"'
+						Re-encode downloads during postprocessing
-							ffmpegselect = ''
+					</p>
-						else:
+                    <br />
-							lameselect = ''
+                    <div id="encoderoptions">
-							ffmpegselect = 'selected="selected"'
+                      	<h4>
-					%>
+							<input class="styled" type="checkbox" name="encoderlossless" value="1" ${config['encoderlossless']} /> 
-					<h4>Encoder: <select name="encoder">
+							Only re-encode lossless files (.flac)
-						<option value="lame" ${lameselect}>lame</option>
+						</h4>                      
-						<option value="ffmpeg" ${ffmpegselect}>ffmpeg</option>
+						<br />
-					</select>
+						<%
+							if config['encoder'] == 'lame':
+								lameselect = 'selected="selected"'
+								ffmpegselect = ''
+							else:
+								lameselect = ''
+								ffmpegselect = 'selected="selected"'
+						%>
+						<h4>Encoder: <select class="styled" name="encoder">
+							<option value="lame" ${lameselect}>lame</option>
+							<option value="ffmpeg" ${ffmpegselect}>ffmpeg</option>
+						</select>
 
-					Format: <select name="encoderoutputformat">
+						Format: <select name="encoderoutputformat">
-					%for x in ['mp3', 'ogg', 'm4a']:
+						%for x in ['mp3', 'ogg', 'm4a']:
 						<%
 							if config['encoderoutputformat'] == x:
 								outputselect = 'selected'
@@ -364,25 +464,30 @@
 								outputselect = ''
 						%>
 						<option value=${x} ${outputselect}>${x}</option>
-					%endfor
+						%endfor
-					</select></h4>
+						</select>
-					<br />
+						</h4>
+						<br />
 					
-					<h3>Audio Properties:</h3>
+						<h3>
-					<br />
+							Audio Properties:
-					<h4>VBR/CBR: <select name="encodervbrcbr">
+						</h3>
-					%for x in ['cbr', 'vbr']:
+						<br />
-						<%
+						<h4>
-							if config['encodervbrcbr'] == x:
+							VBR/CBR: 
-								outputselect = 'selected'
+							<select name="encodervbrcbr">
-							else:
+							%for x in ['cbr', 'vbr']:
-								outputselect = ''
+								<%
-						%>
+									if config['encodervbrcbr'] == x:
-						<option value=${x} ${outputselect}>${x}</option>
+										outputselect = 'selected'
-					%endfor
+									else:
-					</select>
+										outputselect = ''
+								%>
+								<option value=${x} ${outputselect}>${x}</option>
+							%endfor
+							</select>
 
-					Quality: <select name="encoderquality">
+					Quality: <select class="styled" name="encoderquality">
 					%for x in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]:
 						<%
 							if config['encoderquality'] == x:
@@ -395,7 +500,7 @@
 					</select></h4>
 
 					<br />
-					<h4>Bitrate: <select name="bitrate">
+					<h4>Bitrate: <select class="styled" name="bitrate">
 					%for x in [64, 128, 192, 256, 320]:
 						<%
 							if config["bitrate"] == x:
@@ -415,7 +520,7 @@
 							freq44100 = ''
 							freq48000 = 'selected="selected"'
 					%>
-					Sampling: <select name="samplingfrequency">
+					Sampling: <select class="styled" name="samplingfrequency">
 						<option value=44100 ${freq44100}>44.1 kHz</option>
 						<option value=48000 ${freq48000}>48.0 kHz</option>
 					</select></h4>
@@ -431,18 +536,33 @@
                 	</div>
                 </td>
 		        <td>
-                      <h2>Prowl Notification:</h2><br />
+                    <h2>
-                      <h3><input type="checkbox" name="prowl_enabled" id="prowl" value="1" ${config['prowl_enabled']} />Enable Prowl Notifications</h3><br />
+						Prowl Notification:
+					</h2>
+                    <p>
+						<input class="styled" type="checkbox" name="prowl_enabled" id="prowl" value="1" ${config['prowl_enabled']} />
+						Enable Prowl Notifications
+					</p>
                       <div id="prowloptions">
-		      	        <h3>API key:</h3><input type="text" name="prowl_keys" value="${config['prowl_keys']}" size="40"><br /><br />
+		      	        <h3>
-                      	<h3><input type="checkbox" name="prowl_onsnatch" value="1" ${config['prowl_onsnatch']} />Notify on snatch?</h3><br />
+							API key:
-                      	<h3>Priority (-2,-1,0,1 or 2):</h3><input type="text" name="prowl_priority" value="${config['prowl_priority']}" size="2">
+						</h3>
+						<input type="text" name="prowl_keys" value="${config['prowl_keys']}" size="40"><br /><br />
+                      	<p>
+							<input class="styled" type="checkbox" name="prowl_onsnatch" value="1" ${config['prowl_onsnatch']} />
+							Notify on snatch?
+						</p>
+						<br />
+                      	<h3>
+							Priority (-2,-1,0,1 or 2):
+						</h3>
+						<input type="text" name="prowl_priority" value="${config['prowl_priority']}" size="2">
                       </div>
 		        </td>
             </tr>
             <tr>
 				<td>
-					<h3>Muscbrainz Mirror: <select name="mirror"><h3>
+					<h3>Muscbrainz Mirror: <select class="styled" name="mirror"><h3>
 					%for mirror in config['mirror_list']:
 						<%
 							if mirror == headphones.MIRROR:
@@ -454,14 +574,16 @@
 							else:
 								mirrortext = ''
 						%>
-						<option value="${mirror}" ${selected}>${mirror} ${mirrortext}</option>
+						<option class="styled" value="${mirror}" ${selected}>${mirror} ${mirrortext}</option>
 					%endfor
 					</select>
         </table>
     </div>
 
-        <p class="center"><input type="submit" value="Save Changes"><br />
+        <p class="center">
-        (Web Interface changes require a restart to take effect)</h3>
+			<input class="submit" type="submit" value="Save Changes" />
+			<br />
+        (Web Interface changes require a restart to take effect)</p>
       </form>
 </%def>
 

data/interfaces/default/manage.html

@@ -19,6 +19,10 @@
 		<h1>Scan Music Library</h1><br />
 		<p>
 			Where do you keep your music?<br /><br />
+		</p>
+		<form action="musicScan" method="GET">
+		%if headphones.MUSIC_DIR:
+			<input type="text" value="${headphones.MUSIC_DIR}" name="path" size="60" />
 			<div class="tooltip">
 				<span>
 					You can put in any directory, and it will scan for audio files in that folder
@@ -26,17 +30,19 @@
 					For example: '/Users/name/Music'
 				</span>
 			</div>
-		</p>
-		<br /><br />
-		<form action="musicScan" method="GET">
-		%if headphones.MUSIC_DIR:
-			<input type="text" value="${headphones.MUSIC_DIR}" name="path" size="70" />
 		%else:
-			<input type="text" value="Enter a Music Directory to scan" onfocus="if (this.value==this.defaultValue) this.value='';" name="path" size="70" />
+			<input type="text" value="Enter a Music Directory to scan" onfocus="if (this.value==this.defaultValue) this.value='';" name="path" size="60" />
+			<div class="tooltip">
+				<span>
+					You can put in any directory, and it will scan for audio files in that folder
+					(including all subdirectories)<br />
+					For example: '/Users/name/Music'
+				</span>
+			</div>
 		%endif
 		<br />
 		<br />
-		<input type="checkbox" name="autoadd" value="1" ${checked(headphones.ADD_ARTISTS)}> Automatically add new artists
+		<input class="styled" type="checkbox" name="autoadd" value="1" ${checked(headphones.ADD_ARTISTS)}> Automatically add new artists
 		<br />
 		<br />
 		<input type="submit" />

data/js/custom-form-elements.js

@@ -0,0 +1,144 @@
+/*
+
+CUSTOM FORM ELEMENTS
+
+Created by Ryan Fait
+www.ryanfait.com
+
+The only things you may need to change in this file are the following
+variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26)
+
+The numbers you set for checkboxHeight and radioHeight should be one quarter
+of the total height of the image want to use for checkboxes and radio
+buttons. Both images should contain the four stages of both inputs stacked
+on top of each other in this order: unchecked, unchecked-clicked, checked,
+checked-clicked.
+
+You may need to adjust your images a bit if there is a slight vertical
+movement during the different stages of the button activation.
+
+The value of selectWidth should be the width of your select list image.
+
+Visit http://ryanfait.com/ for more information.
+
+*/
+
+var checkboxHeight = "25";
+var radioHeight = "25";
+var selectWidth = "190";
+
+
+/* No need to change anything after this */
+
+
+document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');
+
+var Custom = {
+	init: function() {
+		var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
+		for(a = 0; a < inputs.length; a++) {
+			if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
+				span[a] = document.createElement("span");
+				span[a].className = inputs[a].type;
+
+				if(inputs[a].checked == true) {
+					if(inputs[a].type == "checkbox") {
+						position = "0 -" + (checkboxHeight*2) + "px";
+						span[a].style.backgroundPosition = position;
+					} else {
+						position = "0 -" + (radioHeight*2) + "px";
+						span[a].style.backgroundPosition = position;
+					}
+				}
+				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
+				inputs[a].onchange = Custom.clear;
+				if(!inputs[a].getAttribute("disabled")) {
+					span[a].onmousedown = Custom.pushed;
+					span[a].onmouseup = Custom.check;
+				} else {
+					span[a].className = span[a].className += " disabled";
+				}
+			}
+		}
+		inputs = document.getElementsByTagName("select");
+		for(a = 0; a < inputs.length; a++) {
+			if(inputs[a].className == "styled") {
+				option = inputs[a].getElementsByTagName("option");
+				active = option[0].childNodes[0].nodeValue;
+				textnode = document.createTextNode(active);
+				for(b = 0; b < option.length; b++) {
+					if(option[b].selected == true) {
+						textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
+					}
+				}
+				span[a] = document.createElement("span");
+				span[a].className = "select";
+				span[a].id = "select" + inputs[a].name;
+				span[a].appendChild(textnode);
+				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
+				if(!inputs[a].getAttribute("disabled")) {
+					inputs[a].onchange = Custom.choose;
+				} else {
+					inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
+				}
+			}
+		}
+		document.onmouseup = Custom.clear;
+	},
+	pushed: function() {
+		element = this.nextSibling;
+		if(element.checked == true && element.type == "checkbox") {
+			this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
+		} else if(element.checked == true && element.type == "radio") {
+			this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
+		} else if(element.checked != true && element.type == "checkbox") {
+			this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
+		} else {
+			this.style.backgroundPosition = "0 -" + radioHeight + "px";
+		}
+	},
+	check: function() {
+		element = this.nextSibling;
+		if(element.checked == true && element.type == "checkbox") {
+			this.style.backgroundPosition = "0 0";
+			element.checked = false;
+		} else {
+			if(element.type == "checkbox") {
+				this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
+			} else {
+				this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
+				group = this.nextSibling.name;
+				inputs = document.getElementsByTagName("input");
+				for(a = 0; a < inputs.length; a++) {
+					if(inputs[a].name == group && inputs[a] != this.nextSibling) {
+						inputs[a].previousSibling.style.backgroundPosition = "0 0";
+					}
+				}
+			}
+			element.checked = true;
+		}
+	},
+	clear: function() {
+		inputs = document.getElementsByTagName("input");
+		for(var b = 0; b < inputs.length; b++) {
+			if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
+				inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
+			} else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
+				inputs[b].previousSibling.style.backgroundPosition = "0 0";
+			} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
+				inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
+			} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
+				inputs[b].previousSibling.style.backgroundPosition = "0 0";
+			}
+		}
+	},
+	choose: function() {
+		option = this.getElementsByTagName("option");
+		for(d = 0; d < option.length; d++) {
+			if(option[d].selected == true) {
+				document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
+			}
+		}
+	}
+}
+window.onload = Custom.init;