Schritt 1 von: Facelifting Login-Screen

Ich habe jetzt einfach mal einen neuen Login-Screen gemacht. Das ist nichts Endgültiges.
Nur, damit ihr mal ein Gefühl dafür bekommt und als Diskussionsgrundlage.
Später will ich die Tabellen aus dem Layout verbannen und den CSS-Code in eine Login.css auslagern.
Da Logo (auch noch ein Thema) wird hier etwas kleiner gerendert als es ist.
In Opera werden die runden Ecken nicht angezeigt. Das mache ich noch, falls nicht jemand
gänzlich gegen runde Ecken ist. :-)

diff --git a/css/lx-office-erp.css b/css/lx-office-erp.css
index b647950..1e84002 100644 (file)
--- a/css/lx-office-erp.css
+++ b/css/lx-office-erp.css
@@ -29,7 +29,7 @@ td {
   font-weight: normal;
 }
 td.hover:hover {
-       color: black;
+  color: black;
 /*          background-color: #FFFFCC;
           font-size: 8pt;
           text-decoration: none;
@@ -52,15 +52,20 @@ th {
   font-family: Verdana, Arial, Helvetica;
 }
 body.login {
-  background: #b8d1f3;
+  background: #ccc;
   color: #A0A0A0;
 }
-h1.login {
+/* h1.login {
   font-size: 18pt;
-}
+}*/
 table.login {
-  background-color: #efedde;
   padding: 20px;
+  border-style: solid;
+  border-width: 2px;
+  border-color: #B5B5B5;
+  background-color: #fff;
+  -moz-border-radius: 11;
+  -webkit-border-radius: 11;
 }
 td.login {
   text-align: center;
@@ -83,84 +88,84 @@ body.menu {
 
 .message_ok {
     font-size: 12pt;
-       padding:5px;
-       background-color: lightgreen;
-       color: black;
-       font-weight: bolder;
-       text-align:center;
-       border-style:solid;
-       border-width:thin;
+    padding:5px;
+    background-color: lightgreen;
+    color: black;
+    font-weight: bolder;
+    text-align:center;
+    border-style:solid;
+    border-width:thin;
 }
 
 .message_error {
     font-size: 12pt;
-       padding:5px;
-       background-color: #FFAAAA;
-       color: black;
-       font-weight: bolder;
-       text-align:center;
-       border-style:solid;
-       border-width:thin;
+    padding:5px;
+    background-color: #FFAAAA;
+    color: black;
+    font-weight: bolder;
+    text-align:center;
+    border-style:solid;
+    border-width:thin;
 }
 
 /*
-       Überschriftsbalken
+    Überschriftsbalken
 */
 .listtop {
-       background-color: rgb(236,233,216);
-       text-align:left;
-       padding:5px;
-       font-size: 10pt;
-       color: black;
-       font-weight: bolder;
-       border-style:dashed;
-       border-width:thin;
+    background-color: rgb(236,233,216);
+    text-align:left;
+    padding:5px;
+    font-size: 10pt;
+    color: black;
+    font-weight: bolder;
+    border-style:dashed;
+    border-width:thin;
 }
 
 
 .listelement {
-       background-image: url("../image/fade2.png");
-       background-repeat:repeat-x;
-       border-style:dashed;
-       border-width:thin;
+    background-image: url("../image/fade2.png");
+    background-repeat:repeat-x;
+    border-style:dashed;
+    border-width:thin;
 }
 
 .listelement2 {
-       background-image: url("../image/fade2.png");
-       background-repeat:repeat-x;
-       border-style:dashed;
-       border-width:thin;
+    background-image: url("../image/fade2.png");
+    background-repeat:repeat-x;
+    border-style:dashed;
+    border-width:thin;
 }
 
 .listheading, .listheading th {
-       font-size: 9pt;
-       padding:3px;
-       background-color:
-       rgb(236,233,216);
-       color: black;
-       font-weight: bolder;
-       text-align:left;
-       background-image: url("../image/fade.png");
-       border-style:dotted;
-       border-width:thin;
+    font-size: 9pt;
+    padding:3px;
+    background-color:
+    rgb(236,233,216);
+    color: black;
+    font-weight: bolder;
+    text-align:left;
+    background-image: url("../image/fade.png");
+    border-style:dotted;
+    border-width:thin;
 }
 
 .listheadingcontent {
-       font-size: 9pt;
-       background-color:
-       rgb(236,233,216);
-       color: black;
-       font-weight: bolder;
-       text-align:left;
+    font-size: 9pt;
+    background-color:
+    rgb(236,233,216);
+    color: black;
+    font-weight: bolder;
+    text-align:left;
 }
 
 .accountlistheading {
-       font-size: 10pt;
-       padding:3px;
-       color: white;
-       font-weight: bold;
-       text-align:left;
-       background-color:rgb(133,132,129);
+    font-size: 10pt;
+    padding:3px;
+    color: white;
+    font-weight: bold;
+    text-align:left;
+    background-color:rgb(133,132,129);
 }
 
 .subsubheading {
@@ -170,20 +175,20 @@ body.menu {
 }
 
 .optionen {
-       border:dashed;
-/*     padding-top:10px;
-       padding-bottom:10px;
-       padding-left:10px;
+    border:dashed;
+/*  padding-top:10px;
+    padding-bottom:10px;
+    padding-left:10px;
 */
-       border-width:1px;
-       background:#efedde;
+    border-width:1px;
+    background:#efedde;
 }
 
 
 .listrow1 {
-       background-color: rgb(208,207,201);
-       color: black;
-       vertical-align: top;
+    background-color: rgb(208,207,201);
+    color: black;
+    vertical-align: top;
 }
 
 .listrow0 { background-color: rgb(236,233,216); color: black; vertical-align: top; }

diff --git a/templates/webpages/login/login_screen.html b/templates/webpages/login/login_screen.html
index 0b298c7..84feb7f 100644 (file)
--- a/templates/webpages/login/login_screen.html
+++ b/templates/webpages/login/login_screen.html
@@ -2,10 +2,12 @@
 [% USE HTML %]<body class="login" onLoad="document.loginscreen.login.focus()">
 
  <center>
-  <table class="login" border="3" cellpadding="20">
+ <p>&nbsp;</p>
+ <p>&nbsp;</p>
+  <table class="login" border="0" cellpadding="0">
    <tr>
     <td class="login" align="center">
-     <a href="http://www.lx-office.org" target="_top"><img src="image/lx-office-erp.png" border="0"></a>
+     <a href="http://www.lx-office.org" target="_top"><img src="image/lx-office-erp.png" border="0" width="150"></a>
      <h3 class="login" align="center">[% 'Lx-Office' | $T8 %] [% version %]</h3>
 
      [% IF error_message %]
@@ -18,26 +20,16 @@
 
        <input type="hidden" name="show_dbupdate_warning" value="1">
 
-       <table width="100%">
+       <table width="100%" border=0>
         <tr>
          <td align="center">
-          <table>
-           <tr>
-            <th align="right">[% 'Login Name' | $T8 %]</th>
-            <td><input class="login" name="login" size="30" tabindex="1"></td>
-           </tr>
-           <tr>
-            <th align="right">[% 'Password' | $T8 %]</th>
-            <td><input class="login" type="password" name="password" size="30" tabindex="2"></td>
-           </tr>
+          <table border=0>
+           <tr><th align="left">[% 'Login Name' | $T8 %]</th><td><input class="login" name="login" size="20" tabindex="1" title="[% 'Login Name' | $T8 %]"></td></tr>
+           <tr><th align="left">[% 'Password' | $T8 %]</th><td><input class="login" type="password" name="password" size="20" tabindex="2" title="[% 'Password' | $T8 %]"></td></tr>
+           <tr><th align="left"></th><td><input type="hidden" name="action" value="login"><input type="submit" value="[% 'Login' | $T8 %]" tabindex="3" title="[% 'User Login' | $T8 %]"></td></tr>
+           <tr><th align="left"></th><td align="right"><a href="admin.pl" style="font-size: 0.66em;" title="[% 'Administration' | $T8 %]">[% 'Administration' | $T8 %]</a></td></tr>
           </table>
-
-          <br>
-          <input type="hidden" name="action" value="login">
-          <input type="submit" value="[% 'Login' | $T8 %]" tabindex="3">
-
-         </td>
-        </tr>
+         </tr>
        </table>
 
       </form>