theme setting update

app/assets/javascripts/orbitdesktop.js

@@ -292,8 +292,10 @@ var orbitDesktop = function(dom){
 		o.currenthtml = target;
 		o.currentface = "settings";
 		var bindHandlers = function(){
-			$("select#change_theme").change(function(){
-				o.changeTheme($(this).val());	
+			$(".theme_list > li").click(function(){
+				o.changeTheme($(this).find('.theme_name').text());
+				$(".theme_list > li").removeClass('thmc1').data('clicked',null);
+				$(this).addClass('thmc1').data('clicked',true);
 			});
 
 			$('.tinycanvas').each(function(){
@@ -312,9 +314,9 @@ var orbitDesktop = function(dom){
 					var target = $(this).attr('href');
 
 					$anchor
-						.removeClass('thmc2 thmtxt admtxt')
-						.addClass('admtxt');
-					$(this).toggleClass('thmc2 thmtxt admtxt');
+						.removeClass('thmc2 thmtxt admtxt admbg')
+						.addClass('admtxt admbg');
+					$(this).toggleClass('thmc2 thmtxt admtxt admbg');
 					$tabcontent.hide();
 					$(target).show();
 					$('.tinycanvas').tinyscrollbar_update();
@@ -330,6 +332,23 @@ var orbitDesktop = function(dom){
 				
 			});
 
+			$('.theme_list li').hover(function(){
+				$(this)
+					.addClass('thmc1')
+					.find('.theme_name')
+					.addClass('thmtxt');
+			}, function(){
+				var c = 'thmc1',
+					t = 'thmtxt';
+				if( $(this).data('clicked') ){
+					t = '', c = '';
+				}
+				$(this)
+					.removeClass(c)
+					.find('.theme_name')
+					.removeClass(t);
+			});
+
 		}
 		// if(!o.desktopData[o.currentface]){
 			$(o.contentHolder).empty().load("/desktop/"+target,function(){

app/assets/stylesheets/desktopmain.css

@@ -1,4 +1,3 @@
-@import url(http://fonts.googleapis.com/css?family=Cuprum);
 /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
@@ -247,10 +246,24 @@ a:focus { outline: none; }
 .s_tab ul { overflow: hidden; }
 .s_tab li { float: left; }
 .s_tab a { display: block; }
+.s_tab .admbg { background-color: #f0f0f0; }
 .st_c { display: none; }
 .st_c:first-child { display: block; }
 
 /* Setting Page */
+.theme_list {}
+.theme_list li { 
+	display: inline-block;
+	vertical-align: top;
+	margin: 0 0 24px 0;
+	padding: 6px 0px;
+	width: 132px;
+	text-align: center;
+	cursor: pointer
+	}
+.theme_thumb { border: solid 1px #fff; width: 120px; margin: 0 auto; }
+.theme_thumb img { display: block; }
+.theme_name { font-size: 15px; padding: 8px 6px; display: block; }
 .theme_preview { width: 528px; height: 150px; line-height: 36px; font-size: 15px; }
 .theme_plate { overflow: hidden; }
 .theme_plate > div { float: left; margin-right: 12px; }

app/assets/stylesheets/jquery.miniColors.css

@@ -19,8 +19,8 @@
 }
 
 .miniColors-selector.black {
-	background: #000;
-	border-color: #000;
+	background: #222;
+	border-color: #222;
 }
 
 .miniColors-colors {

app/assets/stylesheets/style.css.erb

@@ -1,3 +1,4 @@
+@import url(http://fonts.googleapis.com/css?family=Cuprum);
 @font-face{ 
 	font-family: 'WebSymbolsRegular';
 	src: url(<%= asset_path 'websymbols-regular-webfont.eot' %>);