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 b64795057e0d7271cf945b00fa312f6af0cc2bbe..1e84002965ffa4c30756ce860ad28b5d11828cb0 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 0b298c75044e328f2e6ac447ef0730a48410f3f3..84feb7fccbf66531bf8970aa5973055596981b8c 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>