various update

app/assets/javascripts/orbitdesktop.js

@@ -178,7 +178,7 @@ var orbitDesktop = function(dom){
 	};
 	this.tempFunc = function(){
 		//o.notify("This is test notification!!","alert",2)
-		$.post("/desktop/save_desktop_settings",{"id":o.desktopId,"theme":$("#change_theme").val()},function(){
+		$.post("/desktop/save_desktop_settings",{"id":o.desktopId,"theme":$('.theme_name').text()},function(){
 			o.notify("Settings Saved!!","success");
 		})
 	}
@@ -294,8 +294,17 @@ var orbitDesktop = function(dom){
 		var bindHandlers = function(){
 			$(".theme_list > li").click(function(){
 				o.changeTheme($(this).find('.theme_name').text());
-				$(".theme_list > li").removeClass('thmc1').data('clicked',null);
+				$(".theme_list > li")
-				$(this).addClass('thmc1').data('clicked',true);
+					.removeClass('thmc1')
+					.data('clicked',null)
+					.find('.theme_name')
+					.removeClass('thmtxt');
+				$(this)
+					.addClass('thmc1')
+					.data('clicked',true)
+					.find('.theme_name')
+					.addClass('thmtxt');
+				od.tempFunc();
 			});
 
 			$('.tinycanvas').each(function(){
@@ -332,6 +341,7 @@ var orbitDesktop = function(dom){
 				
 			});
 
+			$('.theme_list li:first-child').data('clicked',true); // this line just for demo
 			$('.theme_list li').hover(function(){
 				$(this)
 					.addClass('thmc1')

app/assets/stylesheets/desktopmain.css

@@ -70,7 +70,7 @@ a:focus { outline: none; }
 	}
 #side { 
 	width: 156px;
-	height: 540px;
+	height: 516px;
 	position: absolute;
 	top: 120px;
 	left: 0;
@@ -79,7 +79,7 @@ a:focus { outline: none; }
 #holder {
 	/*overflow: hidden;
 	overflow-x: auto;*/
-	height: 540px;
+	height: 516px;
 	width: auto;
 	position: relative;
 	}
@@ -176,7 +176,7 @@ a:focus { outline: none; }
 	z-index: 2;
 	padding-bottom: 12px;
 	}
-.holder_f {
+.holder_f .appholder {
 	position: absolute;
 	width: 100%;
 	height: 100%;
@@ -184,6 +184,7 @@ a:focus { outline: none; }
 	left: 0;
 	top: 0;
 	}
+.holder_f .appname { display: none; }
 .dtitle { 
 	font-size: 30px;
 	line-height: 60px;

app/views/desktop/desktop.html.erb

@@ -32,13 +32,13 @@
 				                <li class="element w2 h2 hp vp" data-category="widget" data-content='weather'>
 				                    <span class="tile thmc2 op09"></span>
 				                    <h1 class="appname thmtxt">Weather</h1>
-				                    <div class="appholder holder_f">
+				                    <div class="appholder">
 							</div>
 				                </li>
-				                <li class="element w2 h1 hp vp" data-category="widget" data-content='clock'>
+				                <li class="element w2 h1 hp vp holder_f" data-category="widget" data-content='clock'>
 				                	<span class="tile thmc1 op08"></span>
 				                    <h1 class="appname thmtxt">Clock</h1>
-				                	<div class="appholder holder_f">test content</div>
+				                	<div class="appholder">test content</div>
 				                </li>
 				                <li class="element w2 h1 hp vp" data-category="widget" data-content="school_events">
 				                	<span class="tile thmc1 op08"></span>

app/views/desktop/settings.html.erb

@@ -30,11 +30,11 @@
 							<div class="overview">
 								<div id="st1" class="st_c">
 									<ul class="theme_list">
-										<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">default</span></li>
+										<li class="thmc1"><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name thmtxt">default</span></li>
 										<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">snake</span></li>
 										<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">sexy</span></li>
 										<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">vintage</span></li>
-										<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Woodstock westwood allenwood</span></li>
+										<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">natural</span></li>
 										<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">chris</span></li>
 										<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
 										<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>

public/desktop_themes/natural/css/natural.css

@@ -0,0 +1,45 @@
+/* 
+Theme Color
+
+random apply to:
+.widget_fn - on hover status
+#search_app .submit
+.tile
+
+*/
+.thmc1 { background: #B6662C; }
+.thmc2 { background: #34520C; }
+
+/*
+sub1 Theme Color
+
+apply to:
+#search_app
+
+*/
+.thmc3 { background: #FFFFFF; }
+
+/*
+sub1 Theme Color
+
+apply to:
+#rwidget
+
+*/
+.thmc4 { background: #5CA360; }
+
+
+/* Theme Text Color */
+.thmtxt, .thmtxt:hover { color: #fff; }
+.thmtxth { color: #fff; }
+
+/* Group Seprate Color */
+.g_sep { border-color: #fff; }
+
+/*
+theme bg image 
+
+#thmbackground img - background
+#bgover - upon #thmbackground
+
+*/

public/desktop_themes/natural/settings/natural.json

@@ -0,0 +1,39 @@
+{
+	"css":"natural.css",
+	"background":"background.jpg",
+	"tilecolor":["thmc1","thmc2"],
+	"icons":{
+		"home":"d_home.png",
+		"app_manager":"d_app_manager.png",
+		"sections":"d_sections.png",
+		"settings":"d_settings.png",
+		"publication":"d_publication.png",
+		"journal_p":"d_journal_p.png",
+		"seminar_p":"d_seminar_p.png",
+		"books":"d_books.png",
+		"research":"d_research.png",
+		"research_d":"d_research_d.png",
+		"research_p":"d_research_p.png",
+		"patents":"d_patents.png",
+		"labs":"d_labs.png",
+		"experience":"d_experience.png",
+		"working":"d_working.png",
+		"education":"d_education.png",
+		"honors":"d_honors.png",
+		"activities":"d_activities.png",
+		"clubs":"d_clubs.png",
+		"landt":"d_landt.png",
+		"courses":"d_courses.png",
+		"homework":"d_homework.png",
+		"certification":"d_certification.png",
+		"personal":"d_personal.png",
+		"mypage":"d_mypage.png",
+		"blog":"d_blog.png",
+		"album":"d_album.png",
+		"calendar":"d_calendar.png",
+		"files":"d_files.png",
+		"orbit":"d_orbit.png",
+		"connection":"d_connection.png",
+		"appstore":"d_appstore.png"
+		}
+	}

public/desktop_widgets/clock/clock.css

@@ -1,6 +1,6 @@
 .clock{
 	/* The .clock div. Created dynamically by jQuery */
-	background-color:#252525;
+	/*background-color:#252525;*/
 	height:200px;
 	width:200px;
 	position:relative;
@@ -25,7 +25,7 @@
 .clock .bg, .clock .front{
 	width:100px;
 	height:200px;
-	background-color:#252525;
+	/*background-color:#252525;*/
 	position:absolute;
 	top:0;
 }

public/desktop_widgets/clock/index.html.erb

@@ -1,7 +1,8 @@
+<link href="http://fonts.googleapis.com/css?family=Rationale|Orbitron" rel="stylesheet" type="text/css">
 <style>
 .clock{
 	/* The .clock div. Created dynamically by jQuery */
-	background-color:#252525;
+	/*background-color:#252525;*/
 	height:75px;
 	width:75px;
 	position:relative;
@@ -26,7 +27,7 @@
 .clock .bg, .clock .front{
 	width:50px;
 	height:75px;
-	background-color:#252525;
+	/*background-color:#252525;*/
 	position:absolute;
 	top:0;
 }
@@ -35,16 +36,14 @@
 	/* Holds the number of seconds, minutes or hours respectfully */
 	position:absolute;
 	width:75px;
-	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
+	font-family: Orbitron, sans-serif;
 	z-index:20;
 	color:#F5F5F5;
-	font-size:22.5px;
+	font-size:21px;
 	text-align:center;
 	top:27.5px;
 	left:0;
 	
-	/* CSS3 text shadow: */
-	text-shadow:4px 4px 5px #333333;
 }
 
 /* The left part of the background: */
@@ -68,7 +67,13 @@
 	left:0;
 	z-index:10;
 }
-
+#fancyClock {
+	position: absolute;
+	overflow: hidden;
+	top: 50%;
+	left: 50%;
+	margin: -36px 0 0 -114px;
+}
 </style>
 <div id="fancyClock"></div>
 <script>