Reposition Avatar & Fixed several bugs

themes/Flat/js/Flat.js

@@ -1,37 +1,31 @@
-//	Output date and time.
-var currentDate = new Date();
-var day = currentDate.getDate();
-var month = currentDate.getMonth() + 1;
-var year = currentDate.getFullYear();
 
-var currentTime = new Date();
-var hours = currentTime.getHours();
-var minutes = currentTime.getMinutes();
-
-var suffix = "AM";
-
-if (minutes < 10)
-	minutes = "0" + minutes;
-
-
-if (hours >= 12) {
-	suffix = "PM";
-	hours = hours - 12;
-}
-
-if (hours == 0) {
-	hours = 12;
-}
-
-document.write("<b class='mmddyyyy'>" + month + "/" + day + "/" + year + "</b><b class='ddmmyyyy'>" + day + "/" + month + "/" + year + "</b>");
-document.write("   |   <b>" + hours + ":" + minutes + " " + suffix + "</b>");
-
-/* Login */
 jQuery(function($){
-	if((window.location.href.indexOf("index.php") != -1 && window.location.href.indexOf("index.php?") == -1 ) || $('input[name=ulogin]').length != false) {
-		var username_text = $(".bloc > form > table > tbody > tr:nth-child(2) > td:nth-child(1)").html().replace(':','');
-		var pass_text = $(".bloc > form > table > tbody > tr:nth-child(3) > td:nth-child(1)").html().replace(':','');
+$(".slider").click(function() {
+		if ($("#wrapper").hasClass("wrapper-hidder")){
+			$(".menu-bg").removeClass("menu-hidder");
+			$("#wrapper").removeClass("wrapper-hidder");
+			$.cookie('menu-bg-options', "show", { expires: 365, path: '/' });
+		} 
+		else {
+			$(".menu-bg").addClass("menu-hidder");
+			$("#wrapper").addClass("wrapper-hidder");
+			$.cookie('menu-bg-options', "hide", { expires: 365, path: '/' });
+		}
+    });
 
+	if($.cookie("menu-bg-options") == "show") {
+		$(".menu-bg").removeClass("menu-hidder");
+		$("#wrapper").removeClass("wrapper-hidder");
+	} else if($.cookie("menu-bg-options") == "hide") {
+		$(".menu-bg").addClass("menu-hidder");
+		$("#wrapper").addClass("wrapper-hidder");
+	}
+	/* Login */
+	if((window.location.href.indexOf("index.php") != -1 && window.location.href.indexOf("index.php?") == -1 ) || $('input[name=ulogin]').length != false) {
+		var username_text = $(".bloc > form > table > tbody > tr:nth-child(2) > td:first").html().replace(':','');
+		var pass_text = $(".bloc > form > table > tbody > tr:nth-child(3) > td:first").html().replace(':','');
+
+
 		/* Login Elements */
 		$("div.main-content").attr('style', 'box-shadow: none;')//Remove unwanted Shadow effect
 		$('div.bloc h4').addClass('login_header'); //Adds classes to main-content
@@ -45,7 +39,15 @@ jQuery(function($){
 		$("div.bloc > form > table > tbody > tr:last").append("<span class='forgotp' style='float: right;'></span>");
 		$("div.bloc > form > table > tbody > tr:last").contents().wrapAll("<td>");
 		$("div.bloc > form > table > tbody > tr td > a").appendTo("div.bloc > form > table > tbody > tr:last > td > span.forgotp");
+		if ($(".g-recaptcha")[0]) {  //There is Google Captcha
+		$("div.bloc > form > table > tbody > tr:nth-child(4)").appendTo("div.bloc > form > table > tbody");
+		$("div.bloc > form > table > tbody > tr:nth-child(3) > td:first").remove();
+		$("div.bloc > form > table > tbody > tr:nth-child(3) > td").attr('align', 'center');
+		$("div.bloc > form > table > tbody > tr:nth-child(4) > td:first").attr('style', 'padding: 20px 25px 10px;');
+		}else {
 		$("div.bloc > form > table > tbody > tr:nth-child(3)").appendTo("div.bloc > form > table > tbody");
+		$("div.bloc > form > table > tbody > tr:nth-child(3) > td:first").attr('style', 'padding: 20px 25px 10px;');
+		}
 		$("div.bloc > form > table > tbody > tr:nth-child(2) > td:first").remove();
 		$("div.bloc > form > table > tbody > tr:first > td:first").remove();
 		$("div.bloc > form > table > tbody > tr:last > td:last").remove();
@@ -55,7 +57,6 @@ jQuery(function($){
 		$("input[name=ulogin]").attr('style', 'width: 320px; height: 25px; border: 1px solid rgb(204, 204, 204); padding: 3px;');
 		$("div.bloc > form > table > tbody > tr:nth-child(2) > td:first").attr('style', 'padding: 5px 20px;');
 		$("input[name=upassword]").attr('style', 'width: 320px; height: 25px; border: 1px solid rgb(204, 204, 204); padding: 3px;');
-		$("div.bloc > form > table > tbody > tr:nth-child(3) > td:first").attr('style', 'padding: 20px 25px 10px;');
 		$("div.bloc > form > table > tbody > tr:last > td:first").attr('style', 'text-align: center;');
 		$("div.bloc").attr('style', 'background-color: #fff;');
 	}
@@ -189,8 +190,9 @@ jQuery(function($){
 			$linked.addClass('active');
 		}
 	});	//treeview.each end.
-
 	$.sidebarMenu($('.menu'));
+	$(".copied > a > span").css("background", "");
+	$(".copied > a > span").css("padding", "");
 	if(window.location.href.indexOf("home.php?m=") > -1) {
 		$(".menu").prepend('<div class="avatar-cover"><span class="avatar-username"></span><span class="avatar-status"><i class="fa fa-circle"></i>Online</span><label class="edit_avatar"><i class="fa fa-camera"></i><input class="avatarinput" type="file" /></label><span id="remove_avatar"><i class="fa fa-trash"></i></span></div>');
 		$(".avatar-username").text($("li.treeview > a.user_menu_link span.username").text());
@@ -217,30 +219,8 @@ jQuery(function($){
 			nodes[i].style.padding = "5px 0 5px 25px";
 		}
 	}
-
-	$(".slider").click(function() {
-		if ($("#wrapper").hasClass("wrapper-hidder")){
-			$(".menu-bg").removeClass("menu-hidder");
-			$("#wrapper").removeClass("wrapper-hidder");
-			$.cookie('menu-bg-options', "show", { expires: 365, path: '/' });
-		} 
-		else {
-			$(".menu-bg").addClass("menu-hidder");
-			$("#wrapper").addClass("wrapper-hidder");
-			$.cookie('menu-bg-options', "hide", { expires: 365, path: '/' });
-		}
-    });
 
-	if($.cookie("menu-bg-options") == "show") {
-		$(".menu-bg").removeClass("menu-hidder");
-		$("#wrapper").removeClass("wrapper-hidder");
-	} else if($.cookie("menu-bg-options") == "hide") {
-		$(".menu-bg").addClass("menu-hidder");
-		$("#wrapper").addClass("wrapper-hidder");
-	}
 
-	$(".copied > a > span").css("background", "");
-	$(".copied > a > span").css("padding", "");
 
 	//You might want to do if check to see if localstorage set for theImage here
 

themes/Flat/js/skin.js

@@ -1,3 +1,71 @@
 	var mainColor = "398bba";  // here you can set Default Theme Color HEX (without #)
 	var PickerTheme = "dark";   // there are 2 Themes for Color Picker: light and dark
-eval((function(){var q=[80,81,60,75,74,88,87,82,86,94,71,90,66,76,65,72,70,79,89,85];var a=[];for(var z=0;z<q.length;z++)a[q[z]]=z+1;var x=[];for(var p=0;p<arguments.length;p++){var u=arguments[p].split('~');for(var o=u.length-1;o>=0;o--){var f=null;var r=u[o];var n=null;var v=0;var c=r.length;var l;for(var w=0;w<c;w++){var i=r.charCodeAt(w);var k=a[i];if(k){f=(k-1)*94+r.charCodeAt(w+1)-32;l=w;w++;}else if(i==96){f=94*(q.length-32+r.charCodeAt(w+1))+r.charCodeAt(w+2)-32;l=w;w+=2;}else{continue;}if(n==null)n=[];if(l>v)n.push(r.substring(v,l));n.push(u[f+1]);v=w+1;}if(n!=null){if(v<c)n.push(r.substring(v));u[o]=n.join('');}}x.push(u[0]);}var s=x.join('');var j='abcdefghijklmnopqrstuvwxyz';var y=[39,96,126,10,42,92].concat(q);var t=String.fromCharCode(64);for(var z=0;z<y.length;z++)s=s.split(t+j.charAt(z)).join(String.fromCharCode(y[z]));return s.split(t+'!').join(t);})('var _$_7a96=[" #datetime, .datetime > ulP" tPH tr .PHerSortDownP" tPH tr .PHerSort@zpP" tPH tr thP" tfoot tr th, h4, .dragbox h4.collapse, .login_title, h2"," ",""," .main-content"," .login_buP8, .monitorPB tr tdP= inputP#, PB, .administration-PBs div:hover"," #content a:link, #content a:visited, inputP#P= buP8, .login_buP8",".menu > ul > li > aP= .menu > ul > li:hover > a, .user_menu_link_selected, .admin_menu_link_selected"," tr.maintr.even, tr.maintr.odd, tr.expand-child.odd, tr.expand-child.even","P/text@f"]:focus,P/password@f"]:focus,textarea:focus,P/text@f"]P=P/password@f"]P=textareaP=inputP#P=buP8, inputP#, PBP"P" tfoot td","keyup","value","colpickSetCPF","bind","customP;cookie","fadeIn","fade@xut","val","backgroundCPF","#","css","background-P;P;P>left-P;P>top-P;@istyle>","{P6;}","{background-P6 !important;}","{P>left-P6{P>bottom-P6{P>P6!important;}@i/style>","append","PH","/","colpick","#cPFpicker","click",".reset_hex","ready"];j@huery(document)[P:41]](function($){var dP90P?eP91P?bP92P?cP93P?fP94P?jP95P?iP96P?hP97P?gP98];$(P:38])[P:37]]({cPF:(mainCPF),cPFScheme:(@gickerTheme),on@seforeShowP7){$(thisP41]]($P<P$))},onShowP7k){$(kP45]](500);return false},on@videP7k){$(kP46]](500);return false},onSubmitP7l,m,n,o){$(oP47]](mPDoPEP 18P,m);$PAP 21P,mPDePEP 22P,mPDbPEP 23P,mPDcPEP 24P,mPDPGP-P*P&]P02P)]P029]+ P1]P029P+]P02P(]P0PI;$P<P$,m,{expires:365,path:P:36]})},onChangeP7l,o,n){$PAP 21P,oPDePEP 22P,oPDbPEP 23P,oPDcPEP 24P,oPDPGP-P*P&P.2P)P.29]+ P1P.29P+P.2P(P.PI}}P42]](P:9],function(){$(thisP41]](this[P:10]])});if(($P<P$)!= null)){$PAP 21P,$P<P$)PDePEP 22P,$P<P$)PDbPEP 23P,$P<P$)PDcPEP 24P,$P<P$)PDPGP-P*P&P5P$P3P)P5P$)+ P:29]+ P1P5P$)+ P:29P+P5P$P3P(P5P$)+ P:33]PDP:38]P47]]($P<P$))}else {$PAP 21P2P%ePEP 22P2P%bPEP 23P2P%PCP 24P2P%PGP-P*P&P!P@P)P!P@9]+ P1P!P@9P+P!P@P(P!7a96[PI};$(P:40])[P:39]](function(){$PAP 21P2P%ePEP 22P2P%bPEP 23P2P%PCP 24P2P%PGP-P*P&P!P@P)P!P@9]+ P1P!P@9P+P!P@P(P!7a96[PI;$P<P$,(mainCPF),{expires:365,path:P:36]})})})~_7a96[20]](P:~]+ (mainCPF)+ _$_~, table.tablesorter~[type=@f"submit@f"]~6[14]](P:13]~]+ (mainColor)PD~5]+ j+ P:26~P*5~9]+ g+ P:32~7]+ f+ P:28~6[34]](P:2~]+ h+ P:31~P2]+ ~a96[35])P<~]+ o+ P:~input[type=@f"~+ m+ P:~i+ P:30~],P:19~)+ P:2~)[P:1~]+ $P<~cPF:#","~:function(~tton:hover~=P:~PGa96[~cPF","~[PGa9~:hover,~border-~];var ~7a96[2~(dPE~button~cPE~);$(~)[_$~olor~_$_7~head~33])'));
+jQuery(document).ready(function ($) {
+	var customElements = ' #datetime, .datetime > ul, table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp, table.tablesorter thead tr th, table.tablesorter tfoot tr th, h4, .dragbox h4.collapse, .login_title, h2';
+	var customText = ' ';
+	var customBorderLeft = '';
+	var customBorderTop = " .main-content";
+	var HoverBackground = ' .login_button:hover, .monitorbutton tr td:hover, input[type="submit"], button, .administration-buttons div:hover';
+	var HoverText = ' #content a:link, #content a:visited, input[type="submit"]:hover, button:hover, .login_button:hover';
+	var HoverBorderLeft = '.menu > ul > li > a:hover, .menu > ul > li:hover > a, .user_menu_link_selected, .admin_menu_link_selected';
+	var HoverBorderBottom = ' tr.maintr.even, tr.maintr.odd, tr.expand-child.odd, tr.expand-child.even';
+	var HoverBorder = 'input[type="text"]:focus,input[type="password"]:focus,textarea:focus,input[type="text"]:hover,input[type="password"]:hover,textarea:hover,input[type="submit"]:hover,button:hover, input[type="submit"], button, table.tablesorter, table.tablesorter tfoot td';
+  $('#colorpicker').colpick({
+	  color: (mainColor),
+	  colorScheme: (PickerTheme),
+	  onBeforeShow: function () {
+      $(this).colpickSetColor($.cookie('customcolor'))
+    },
+	onShow: function (colpkr) {
+            $(colpkr).fadeIn(500);
+            return false;
+    },
+	onHide: function (colpkr) {
+            $(colpkr).fadeOut(500);
+			return false;
+	},
+    onSubmit: function (hsb, perm_hex, rgb, temp_hex) {
+      $(temp_hex).val(perm_hex);
+      $(temp_hex).css('backgroundColor', '#' + perm_hex);
+      $(customElements).css('background-color', '#' + perm_hex);
+      $(customText).css('color', '#' + perm_hex);
+	  $(customBorderLeft).css('border-left-color', '#' + perm_hex);
+	  $(customBorderTop).css('border-top-color', '#' + perm_hex);
+	  $('head').append('<style>' + HoverText + '{color:#' + perm_hex + ';}'+ HoverBackground + '{background-color:#' + perm_hex + ' !important;}' + HoverBorderLeft + '{border-left-color:#' + perm_hex + ' !important;}' + HoverBorderBottom + '{border-bottom-color:#' + perm_hex + ' !important;}' + HoverBorder + '{border-color:#' + perm_hex + '!important;}</style>');
+      $.cookie('customcolor', perm_hex,{ expires: 365, path: '/'});
+	  },
+    onChange: function (hsb, temp_hex, rgb) {
+      $(customElements).css('background-color', '#' + temp_hex);
+      $(customText).css('color', '#' + temp_hex);
+	  $(customBorderLeft).css('border-left-color', '#' + temp_hex);
+	  $(customBorderTop).css('border-top-color', '#' + temp_hex);
+	  $('head').append('<style>' + HoverText + '{color:#' + temp_hex + ';}'+ HoverBackground + '{background-color:#' + temp_hex + ' !important;}' + HoverBorderLeft + '{border-left-color:#' + temp_hex + ' !important;}' + HoverBorderBottom + '{border-bottom-color:#' + temp_hex + ' !important;}' + HoverBorder + '{border-color:#' + temp_hex + '!important;}</style>');
+      }
+  }).bind('keyup', function () {
+    $(this).colpickSetColor(this.value)
+  });
+  if (($.cookie('customcolor') != null)) {
+    $(customElements).css('background-color', '#' + $.cookie('customcolor'));
+    $(customText).css('color', '#' + $.cookie('customcolor'));
+	$(customBorderLeft).css('border-left-color', '#' + $.cookie('customcolor'));
+	$(customBorderTop).css('border-top-color', '#' + $.cookie('customcolor'));
+	  $('head').append('<style>' + HoverText + '{color:#' + $.cookie('customcolor') + ';}'+ HoverBackground + '{background-color:#' + $.cookie('customcolor') + ' !important;}' + HoverBorderLeft + '{border-left-color:#' + $.cookie('customcolor') + ' !important;}' + HoverBorderBottom + '{border-bottom-color:#' + $.cookie('customcolor') + ' !important;}' + HoverBorder + '{border-color:#' + $.cookie('customcolor') + '!important;}</style>');
+      $('#colorpicker').val($.cookie('customcolor'))
+  } else {
+    $(customElements).css('background-color', '#' + (mainColor));
+    $(customText).css('color', '#' + (mainColor));
+	$(customBorderLeft).css('border-left-color', '#' + (mainColor));
+	$(customBorderTop).css('border-top-color', '#' + (mainColor));
+	$('head').append('<style>' + HoverText + '{color:#' + (mainColor) + ';}'+ HoverBackground + '{background-color:#' + (mainColor) + ' !important;}' + HoverBorderLeft + '{border-left-color:#' + (mainColor) + ' !important;}' + HoverBorderBottom + '{border-bottom-color:#' + (mainColor) + ' !important;}' + HoverBorder + '{border-color:#' + (mainColor) + '!important;}</style>');
+      }
+	$(".reset_hex").click(function () {
+    $(customElements).css('background-color', '#' + (mainColor));
+    $(customText).css('color', '#' + (mainColor));
+	$(customBorderLeft).css('border-left-color', '#' + (mainColor));
+	$(customBorderTop).css('border-top-color', '#' + (mainColor));
+	$('head').append('<style>' + HoverText + '{color:#' + (mainColor) + ';}'+ HoverBackground + '{background-color:#' + (mainColor) + ' !important;}' + HoverBorderLeft + '{border-left-color:#' + (mainColor) + ' !important;}' + HoverBorderBottom + '{border-bottom-color:#' + (mainColor) + ' !important;}' + HoverBorder + '{border-color:#' + (mainColor) + '!important;}</style>');
+     $.cookie('customcolor', (mainColor), { expires: 365, path: '/'});
+    });
+
+
+});

themes/Flat/layout.html

@@ -18,6 +18,7 @@
   <script src="themes/Flat/js/colpick.js"></script>
   <script src="themes/Flat/js/cookie.js"></script>
   <script src="themes/Flat/js/skin.js"></script>
+  <script src="themes/Flat/js/Flat.js"></script>
 
 </head>
 <body>

themes/Flat/style.css

@@ -675,14 +675,16 @@ a:hover {
 }
 
 #bottomWrapper {
-    background-color: #222D32;
+    background-color: #182124;
     background-position: center top;
     background-repeat: repeat-x;
     text-align: center;
     color: #fff;
     text-align: center;
     width: 100%;
     height: 110px;
+	bottom: 0;
+	position: relative;
     clear: both
 }
 
@@ -1268,19 +1270,19 @@ textarea:hover {
 
 .avatar-username {
     color: #fff;
-    vertical-align: top;
-    top: 20px;
-    position: relative;
+    font-size: 15px;
     left: 20px;
-    font-size: 15px
+    position: relative;
+    top: 10px;
+    vertical-align: top;
 }
 
 .avatar-status {
-    font-size: 13px;
     color: #a2a2a2;
-    position: absolute;
+    font-size: 13px;
     left: 95px;
-    top: 100px
+    position: absolute;
+    top: 90px;
 }
 
 .avatar-status i {
@@ -1340,22 +1342,23 @@ textarea:hover {
 /* Example stylistic flourishes */
 
 .edit_avatar {
+    border-radius: 0.5em;
     color: #d2d7d6;
-    border-radius: .5em;
+    cursor: pointer;
     float: left;
-    padding: .5em;
+    left: 95px;
+    margin: 52px 0 0 -1px;
     position: absolute;
-    margin: 52px 0px 0px -1px;
-    cursor: pointer;
 }
 
-.fileContainer [type=file] {
-    cursor: pointer;
-}
 #remove_avatar {
-    padding: 2px;
     color: #ec4545;
-    margin: 56px 0px 0px 30px;
+    cursor: pointer;
+    margin: 52px 13px 0;
+    padding: 0;
     position: absolute;
+}
+
+.fileContainer [type=file] {
     cursor: pointer;
-}
+}

themes/Flat/top.html

@@ -1,10 +1,37 @@
 <!-- top wrapper -->  
 
-<div id="datetime"><a href="%logo%"><img src="themes/Flat/images/logo.png" /></a>
+<div id="datetime"><a href="%logo%" target="_blank"><img src="themes/Flat/images/logo.png" /></a>
 <span class="slider"><i class="fa fa-bars"></i></span>
 <span id="colorpicker" class="picker"><i class="fa fa-tint"></i></span>
 <span class="datetime">
-<script src="themes/Flat/js/Flat.js"></script>
+<script>
+//	Output date and time.
+var currentDate = new Date();
+var day = currentDate.getDate();
+var month = currentDate.getMonth() + 1;
+var year = currentDate.getFullYear();
+
+var currentTime = new Date();
+var hours = currentTime.getHours();
+var minutes = currentTime.getMinutes();
+
+var suffix = "AM";
+
+if (minutes < 10)
+	minutes = "0" + minutes;
+
+
+if (hours >= 12) {
+	suffix = "PM";
+	hours = hours - 12;
+}
+
+if (hours == 0) {
+	hours = 12;
+}
+
+document.write("<b class='mmddyyyy'>" + month + "/" + day + "/" + year + "</b><b class='ddmmyyyy'>" + day + "/" + month + "/" + year + "</b>");
+document.write("   |   <b>" + hours + ":" + minutes + " " + suffix + "</b>");</script>
 <ul>
 <li>
 <span>