Add new images to login and changed login

pandora_console/general/login_page.php

@@ -62,44 +62,47 @@ if (!empty($config['login_background'])) {
 	$login_body_style = "style=\"background-image: url('$background_url');\"";
 }
 echo '<div id="login_body" ' . $login_body_style . '></div>';
-echo '<div id="login_outer">';
+echo '<div class="login_page"><div id="login_outer">';
 echo '<div class="databox_login" id="login">';
 echo '<div id="login_inner">';
 
-echo '
-	<div id="login_in">
-		<form method="post" action="' . ui_get_full_url('index.php'.$url) . '" >';
+echo '<div id="login_in">';
+	echo '<div class="version_login"><div style="padding-top: 2px; color: #FFF;">' . $pandora_version . '</div></div>';
+	echo '<form method="post" action="' . ui_get_full_url('index.php'.$url) . '" >';
 	
 	//TODO: Put branding in variables (external file) or database
 	/* CUSTOM BRANDING STARTS HERE */
 	
 	// Replace the following with your own URL and logo.
 	// A mashup of the Pandora FMS logo and your companies highly preferred
-	echo '<table id="login_layout"><tr><td rowspan=2 style="width: 200px;">';
-	
-	echo '<a href="' . $logo_link . '">';
-	if (defined ('METACONSOLE')) {
-		html_print_image ("enterprise/meta/images/pandora_login_enterprise.png", false, array ("class" => "login_logo", "alt" => "logo", "border" => 0, "title" => $logo_title), false, true);
-	}
-	else if (defined ('PANDORA_ENTERPRISE')) {
-		html_print_image ($config['homeurl'] . "/images/pandora_login_enterprise.png", false, array ("class" => "login_logo", "alt" => "logo", "border" => 0, "title" => $logo_title), false, true);
-	}
-	else {
-		html_print_image ($config['homeurl'] . "/images/pandora_login.png", false, array ("class" => "login_logo", "alt" => "logo", "border" => 0, "title" => $logo_title), false, true);
-	}
-	echo '</a>';
-	
-	// This prints the current pandora console version.
-	// For stable/live function it might be wise to comment it out
-	
-	/* CUSTOM BRANDING ENDS HERE */
-	echo '</td><td>';
+	echo '<table id="login_layout">';
+	echo'<tr style="height:15px;"><td>';
 	echo '<div class="login_links">';
 	echo '<a href="http://wiki.pandorafms.com/" target="_blank">' . __('Help') . '</a>';
 	echo ' | ';
 	echo '<a href="http://forums.pandorafms.com/" target="_blank">' . __('Support') . '</a>';
 	echo '</div>';
-	echo '</td></tr><tr><td>';
+	echo '</td></tr>';
+	echo'<tr>
+		<td class="login_border" rowspan=2 style="width: 160px;">';
+	
+			echo '<a href="' . $logo_link . '">';
+			if (defined ('METACONSOLE')) {
+				html_print_image ("images/logo_login.png", false, array ("class" => "login_logo", "alt" => "logo", "border" => 0, "title" => $logo_title), false, true);
+			}
+			else if (defined ('PANDORA_ENTERPRISE')) {
+				html_print_image ("images/logo_login.png", false, array ("class" => "login_logo", "alt" => "logo", "border" => 0, "title" => $logo_title), false, true);
+			}
+			else {
+				html_print_image ("images/logo_login.png", false, array ("class" => "login_logo", "alt" => "logo", "border" => 0, "title" => $logo_title), false, true);
+			}
+			echo '</a>';
+			
+			// This prints the current pandora console version.
+			// For stable/live function it might be wise to comment it out
+			
+			/* CUSTOM BRANDING ENDS HERE */
+	echo '</td><td style="padding-top: 30px;">';
 	
 	switch ($login_screen) {
 		case 'login':
@@ -108,20 +111,17 @@ echo '
 					html_print_input_hidden ($key, $value);
 				}
 			}
-			echo '<div class="login_nick_text">';
-			echo __('User') . '<br>';
-			echo '</div>';
+			
 			echo '<div class="login_nick">';
+			html_print_image ("/images/usuario_login.png", false);
 			html_print_input_text_extended ("nick", '', "nick", '', '', '' , false, '', 'class="login login_user"');
-			echo '</div>';
-			echo '<div class="login_pass_text">';
-			echo __('Password') . '<br>';
-			echo '</div>';
+			echo '</div><br />';
 			echo '<div class="login_pass">';
+			html_print_image ("/images/candado_login.png", false);
 			html_print_input_text_extended ("pass", '', "pass", '', '', '' ,false, '', 'class="login login_password"', false, true);
 			echo '</div>';
 			echo '<div class="login_button">';
-			html_print_submit_button(__("Login") . '&nbsp;&nbsp;>', "login_button", false, 'class="sub next_login"');
+			html_print_submit_button(__("Login"), "login_button", false, 'class="sub next_login"');
 			echo '</div>';
 			break;
 		case 'logout':
@@ -165,10 +165,11 @@ echo '</form>
 	</div>
 </div>
 </div>
+</div>
 </div>';
 
 if (defined ('METACONSOLE')) {
-	echo '<div id="ver_num" style="text-align: center;">';
+	echo '<div id="ver_num">';
 }
 else {
 	echo '<div id="ver_num">';

pandora_console/include/styles/pandora.css

@@ -368,22 +368,10 @@ div#foot {
 #login_body {
 	/* Set rules to fill background */
 	min-height: 100%;
-	min-width: 960px;
-
-	/* Set up proportionate scaling */
+	min-width: 1024px;
 	width: 100%;
-	height: auto;
-
-	/* Set up positioning */
-	position: fixed;
-	top: 0;
-	left: 0;
-	z-index: -999;
-
-	background-color: #DDD;
-	background-image: url(../../images/login_background.jpg);
-	background-repeat: repeat;
-	background-position: center;
+	z-index: -9999;
+	position: absolute;
 }
 
 @media screen and (max-width: 1024px) { /* Specific to this particular image */
@@ -392,6 +380,34 @@ div#foot {
 		margin-left: -512px;   /* 50% */
 	}
 }
+@media screen and (max-width: 1100px) { /* Specific to this particular image */
+	#login_body {
+		background-image: url("../../images/backgrounds/fondo_madera_bn_1100.jpg");
+		background-repeat: repeat;
+		background-position: center center;
+	}
+}
+@media screen and (max-width: 1400px) { /* Specific to this particular image */
+	#login_body {
+		background-image: url("../../images/backgrounds/fondo_madera_bn_1400.jpg");
+		background-repeat: repeat;
+		background-position: center center;
+	}
+}
+@media screen and (max-width: 2000px) { /* Specific to this particular image */
+	#login_body {
+		background-image: url("../../images/backgrounds/fondo_madera_bn_2000.jpg");
+		background-repeat: repeat;
+		background-position: center center;
+	}
+}
+@media screen and (max-width: 2500px) { /* Specific to this particular image */
+	#login_body {
+		background-image: url("../../images/backgrounds/fondo_madera_bn_2500.jpg");
+		background-repeat: repeat;
+		background-position: center center;
+	}
+}
 
 p.log_in {
 	padding: 0px 10px;
@@ -402,10 +418,9 @@ h1#log_f {
 	padding-bottom: 3px;
 }
 div#login {
-	border-left: solid 1px #000;
-	border-top: solid 1px #000;
-	border-bottom: solid 2px #000;
-	border-right: solid 2px #000;
+	border-width: 2px 2px 2px 2px;
+	border-style: solid;
+	border-color: #000;
 	font-size: 12px !important;
 }
 div#login_in, #login_f {
@@ -414,57 +429,55 @@ div#login_in, #login_f {
 }
 
 .databox_login, .databox_logout {
-	border: none !important;
-	padding: 4px;
-	border-radius: 11px;
-	height: 227px;
+	border-radius: 5px;
+	height: 200px;
 }
 
 #login_inner {
 	width: 100%;
 	height: 100%;
-	border-radius: 4px;
-	overflow: hidden;
-
+	border-radius: 5px;
 	/* Browser without multibackground support */
-	background: #ffffff !important;
-    /* Safari 4-5, Chrome 1-9 */
-    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#E9E9E9)) !important;
-    /* Safari 5.1+, Chrome 10+ */
-	background: -webkit-linear-gradient(top, #ffffff, #E9E9E9) !important;
-    /* Firefox 3.6+ */
-    background: -moz-linear-gradient(top, #ffffff, #E9E9E9) !important;
-    /* Opera 11.10+ */
-    background: -o-linear-background(top, #ffffff, #E9E9E9) !important;
-    /* IE 10 */
-    background: -ms-linear-background(top, #ffffff, #E9E9E9) !important;
-    /* estándar */
-    background: linear-background(top, #ffffff, #E9E9E9) !important;
+	background-color: #373737 !important;
+
 }
 #login_outer {
-	-moz-box-shadow: 8px 8px 30px #777;
-	-webkit-box-shadow: 8px 8px 30px #777;
-	box-shadow: 8px 8px 30px #777;
-	padding: 3px;
 	border-radius: 11px;
-	width: 431px !important;
-	margin: 100px auto;
-	background-color: #3f3f3f;
+	background-color: #000;
+	width: 500px !important;
+	color: #FFF !important;
+	margin: 0px auto;
 }
 
+.version_login{
+	transform: rotate(36deg);
+	float: right;
+	margin-top: 18px;
+	width: 80px;
+	height: 0px;
+	border-right: 13px solid transparent;
+	border-left: 25px solid transparent;
+	border-bottom: 18px solid #80BA27;
+	left: 16px;
+	position: relative;
+}
+
+
 #login_outer * {
 	font-family: Nunito, "Arial Rounded MT", Arial, Helvetica, sans-serif;
 	font-weight: bold;
 }
-
+.login_border{
+	border-right: 1px solid #FFF;
+	text-align: center;
+}
 table#login_layout {
-	width: 100%;
-	height: 213px;
+	width: 30%;
+	height: 160px;
+	position: absolute;
 }
 
 div#error_login {
-	#margin: 0 auto;
-	#margin-top: -10px;
 	text-align: center;
 	margin-top: 5px;
 	margin-left: 5px;
@@ -489,22 +502,40 @@ div#login_f {
 	margin-bottom: 25px;
 }
 
-IMG.login_logo {
-	border: 0px;
-	width: 140px;
-	margin-top: 15px;
-	margin-bottom: 15px;
-}
-
 a:focus, input:focus, button:focus {
 	utline-width: 0;
 	outline: 0;
 }
 
-DIV.login_button, DIV.login_links {
+DIV.login_links {
+	margin: 10px 0px 0px;
+	color: #FFF;
+	text-align: center;
+}
+
+DIV.login_links>a {
+	color: #FFF;
+}
+
+DIV.login_button{
 	text-align:right;
-	width: 191px;
-	margin: 16px 0px 17px 0px;
+	width: 68%;
+	margin-top: 15px;
+}
+
+DIV.login_button>input{
+	background-color: #373737 !important;
+	border: 0px none;
+	background-image: url("../../images/input_go.png") !important;
+	padding-right: 25px !important;
+}
+
+.login_page{
+	height: 200px;
+	padding-top: 10%;
+	text-align: center;
+	width: 100%;
+	position: absolute;
 }
 
 input.next_login {
@@ -519,7 +550,17 @@ input.next_login {
 }
 
 DIV.login_nick, DIV.login_pass {
-	text-align: left;
+	text-align:left;
+	padding-left: 15px;
+}
+
+DIV.login_nick>input, DIV.login_pass>input {
+	height: 25px;
+	border-radius:0px;
+	margin-left: 10px;
+}
+DIV.login_nick>img, DIV.login_pass>img {
+	vertical-align: middle;
 }
 
 DIV.login_links a {
@@ -556,7 +597,6 @@ DIV.login_pass {
 
 input.login {
 	border: 0px none;
-	background-color: #ebebeb !important;
 	margin: 0px 0px;
 	width: 135px;
 	height: 18px;
@@ -567,7 +607,7 @@ input.login {
 
 input.login_user {
 	/* Browser without multibackground support */
-	background-color: #e2e2e2 !important;
+	color: #373737 !important;
 	padding-left: 8px;
 	width: 179px;
 	color: #222;
@@ -593,15 +633,12 @@ input.login_password {
 }
 
 #ver_num {
-	color: #000;
-	font-size: xx-small;
-	background: white;
-	margin-top: 32px;
-	margin: 0 auto;
-	width: 100px;
+	margin: 0px auto;
+	width: 100%;
 	position: absolute;
 	bottom: 10px;
-	right: 0px;
+	color: #FFF;
+	text-align: center;
 }
 
 input:-webkit-autofill {