Projekt

Allgemein

Profil

« Zurück | Weiter » 

Revision cfce8ceb

Von Sven Donath vor etwa 14 Jahren hinzugefügt

  • ID cfce8ceb55223d04b2f0248be8b31116fb7faaf8
  • Vorgänger ee9f9f9a
  • Nachfolger 04706c06

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. :-)

Unterschiede anzeigen:

css/lx-office-erp.css
29 29 
  font-weight: normal;
30 30 
}
31 31 
td.hover:hover {
32 
	color: black;
32 
  color: black;
33 33 
/*          background-color: #FFFFCC;
34 34 
          font-size: 8pt;
35 35 
          text-decoration: none;
......
52 52 
  font-family: Verdana, Arial, Helvetica;
53 53 
}
54 54 
body.login {
55 
  background: #b8d1f3;
55 
  background: #ccc;
56 56 
  color: #A0A0A0;
57 57 
}
58 
h1.login {
58 
/* h1.login {
59 59 
  font-size: 18pt;
60 
}
60 
}*/
61 61 
table.login {
62 
  background-color: #efedde;
63 62 
  padding: 20px;
63 
  border-style: solid;
64 
  border-width: 2px;
65 
  border-color: #B5B5B5;
66 
  background-color: #fff;
67 
  -moz-border-radius: 11;
68 
  -webkit-border-radius: 11;
64 69 
}
65 70 
td.login {
66 71 
  text-align: center;
......
83 88 

  		




  84
  89
  
    
.message_ok {


  		




  85
  90
  
    
    font-size: 12pt;


  		




  86
  
  
    
	padding:5px;


  		




  87
  
  
    
	background-color: lightgreen;


  		




  88
  
  
    
	color: black;


  		




  89
  
  
    
	font-weight: bolder;


  		




  90
  
  
    
	text-align:center;


  		




  91
  
  
    
	border-style:solid;


  		




  92
  
  
    
	border-width:thin;


  		




  
  91
  
    
    padding:5px;


  		




  
  92
  
    
    background-color: lightgreen;


  		




  
  93
  
    
    color: black;


  		




  
  94
  
    
    font-weight: bolder;


  		




  
  95
  
    
    text-align:center;


  		




  
  96
  
    
    border-style:solid;


  		




  
  97
  
    
    border-width:thin;


  		




  93
  98
  
    
}


  		




  94
  99
  
    

  		




  95
  100
  
    
.message_error {


  		




  96
  101
  
    
    font-size: 12pt;


  		




  97
  
  
    
	padding:5px;


  		




  98
  
  
    
	background-color: #FFAAAA;


  		




  99
  
  
    
	color: black;


  		




  100
  
  
    
	font-weight: bolder;


  		




  101
  
  
    
	text-align:center;


  		




  102
  
  
    
	border-style:solid;


  		




  103
  
  
    
	border-width:thin;


  		




  
  102
  
    
    padding:5px;


  		




  
  103
  
    
    background-color: #FFAAAA;


  		




  
  104
  
    
    color: black;


  		




  
  105
  
    
    font-weight: bolder;


  		




  
  106
  
    
    text-align:center;


  		




  
  107
  
    
    border-style:solid;


  		




  
  108
  
    
    border-width:thin;


  		




  104
  109
  
    
}


  		




  105
  110
  
    

  		




  106
  111
  
    
/*


  		




  107
  
  
    
	?berschriftsbalken


  		




  
  112
  
    
    ?berschriftsbalken


  		




  108
  113
  
    
*/


  		




  109
  114
  
    
.listtop {


  		




  110
  
  
    
	background-color: rgb(236,233,216);


  		




  111
  
  
    
	text-align:left;


  		




  112
  
  
    
	padding:5px;


  		




  113
  
  
    
	font-size: 10pt;


  		




  114
  
  
    
	color: black;


  		




  115
  
  
    
	font-weight: bolder;


  		




  116
  
  
    
	border-style:dashed;


  		




  117
  
  
    
	border-width:thin;


  		




  
  115
  
    
    background-color: rgb(236,233,216);


  		




  
  116
  
    
    text-align:left;


  		




  
  117
  
    
    padding:5px;


  		




  
  118
  
    
    font-size: 10pt;


  		




  
  119
  
    
    color: black;


  		




  
  120
  
    
    font-weight: bolder;


  		




  
  121
  
    
    border-style:dashed;


  		




  
  122
  
    
    border-width:thin;


  		




  118
  123
  
    
}


  		




  119
  124
  
    

  		




  120
  125
  
    

  		




  121
  126
  
    
.listelement {


  		




  122
  
  
    
	background-image: url("../image/fade2.png");


  		




  123
  
  
    
	background-repeat:repeat-x;


  		




  124
  
  
    
	border-style:dashed;


  		




  125
  
  
    
	border-width:thin;


  		




  
  127
  
    
    background-image: url("../image/fade2.png");


  		




  
  128
  
    
    background-repeat:repeat-x;


  		




  
  129
  
    
    border-style:dashed;


  		




  
  130
  
    
    border-width:thin;


  		




  126
  131
  
    
}


  		




  127
  132
  
    

  		




  128
  133
  
    
.listelement2 {


  		




  129
  
  
    
	background-image: url("../image/fade2.png");


  		




  130
  
  
    
	background-repeat:repeat-x;


  		




  131
  
  
    
	border-style:dashed;


  		




  132
  
  
    
	border-width:thin;


  		




  
  134
  
    
    background-image: url("../image/fade2.png");


  		




  
  135
  
    
    background-repeat:repeat-x;


  		




  
  136
  
    
    border-style:dashed;


  		




  
  137
  
    
    border-width:thin;


  		




  133
  138
  
    
}


  		




  134
  139
  
    

  		




  135
  140
  
    
.listheading, .listheading th {


  		




  136
  
  
    
	font-size: 9pt;


  		




  137
  
  
    
	padding:3px;


  		




  138
  
  
    
	background-color:


  		




  139
  
  
    
	rgb(236,233,216);


  		




  140
  
  
    
	color: black;


  		




  141
  
  
    
	font-weight: bolder;


  		




  142
  
  
    
	text-align:left;


  		




  143
  
  
    
	background-image: url("../image/fade.png");


  		




  144
  
  
    
	border-style:dotted;


  		




  145
  
  
    
	border-width:thin;


  		




  
  141
  
    
    font-size: 9pt;


  		




  
  142
  
    
    padding:3px;


  		




  
  143
  
    
    background-color:


  		




  
  144
  
    
    rgb(236,233,216);


  		




  
  145
  
    
    color: black;


  		




  
  146
  
    
    font-weight: bolder;


  		




  
  147
  
    
    text-align:left;


  		




  
  148
  
    
    background-image: url("../image/fade.png");


  		




  
  149
  
    
    border-style:dotted;


  		




  
  150
  
    
    border-width:thin;


  		




  146
  151
  
    
}


  		




  147
  152
  
    

  		




  148
  153
  
    
.listheadingcontent {


  		




  149
  
  
    
	font-size: 9pt;


  		




  150
  
  
    
	background-color:


  		




  151
  
  
    
	rgb(236,233,216);


  		




  152
  
  
    
	color: black;


  		




  153
  
  
    
	font-weight: bolder;


  		




  154
  
  
    
	text-align:left;


  		




  
  154
  
    
    font-size: 9pt;


  		




  
  155
  
    
    background-color:


  		




  
  156
  
    
    rgb(236,233,216);


  		




  
  157
  
    
    color: black;


  		




  
  158
  
    
    font-weight: bolder;


  		




  
  159
  
    
    text-align:left;


  		




  155
  160
  
    
}


  		




  156
  161
  
    

  		




  157
  162
  
    
.accountlistheading {


  		




  158
  
  
    
	font-size: 10pt;


  		




  159
  
  
    
	padding:3px;


  		




  160
  
  
    
	color: white;


  		




  161
  
  
    
	font-weight: bold;


  		




  162
  
  
    
	text-align:left;


  		




  163
  
  
    
	background-color:rgb(133,132,129);


  		




  
  163
  
    
    font-size: 10pt;


  		




  
  164
  
    
    padding:3px;


  		




  
  165
  
    
    color: white;


  		




  
  166
  
    
    font-weight: bold;


  		




  
  167
  
    
    text-align:left;


  		




  
  168
  
    
    background-color:rgb(133,132,129);


  		




  164
  169
  
    
}


  		




  165
  170
  
    

  		




  166
  171
  
    
.subsubheading {


  		




  ......




  170
  175
  
    
}


  		




  171
  176
  
    

  		




  172
  177
  
    
.optionen {


  		




  173
  
  
    
	border:dashed;


  		




  174
  
  
    
/*	padding-top:10px;


  		




  175
  
  
    
	padding-bottom:10px;


  		




  176
  
  
    
	padding-left:10px;


  		




  
  178
  
    
    border:dashed;


  		




  
  179
  
    
/*  padding-top:10px;


  		




  
  180
  
    
    padding-bottom:10px;


  		




  
  181
  
    
    padding-left:10px;


  		




  177
  182
  
    
*/


  		




  178
  
  
    
	border-width:1px;


  		




  179
  
  
    
	background:#efedde;


  		




  
  183
  
    
    border-width:1px;


  		




  
  184
  
    
    background:#efedde;


  		




  180
  185
  
    
}


  		




  181
  186
  
    

  		




  182
  187
  
    

  		




  183
  188
  
    
.listrow1 {


  		




  184
  
  
    
	background-color: rgb(208,207,201);


  		




  185
  
  
    
	color: black;


  		




  186
  
  
    
	vertical-align: top;


  		




  
  189
  
    
    background-color: rgb(208,207,201);


  		




  
  190
  
    
    color: black;


  		




  
  191
  
    
    vertical-align: top;


  		




  187
  192
  
    
}


  		




  188
  193
  
    

  		




  189
  194
  
    
.listrow0 { background-color: rgb(236,233,216); color: black; vertical-align: top; }


  		












  

    
      templates/webpages/login/login_screen.html
    
  





  2
  2
  
    
[% USE HTML %]<body class="login" onLoad="document.loginscreen.login.focus()">


  		




  3
  3
  
    

  		




  4
  4
  
    
 <center>


  		




  5
  
  
    
  <table class="login" border="3" cellpadding="20">


  		




  
  5
  
    
 <p>&nbsp;</p>


  		




  
  6
  
    
 <p>&nbsp;</p>


  		




  
  7
  
    
  <table class="login" border="0" cellpadding="0">


  		




  6
  8
  
    
   <tr>


  		




  7
  9
  
    
    <td class="login" align="center">


  		




  8
  
  
    
     <a href="http://www.lx-office.org" target="_top"><img src="image/lx-office-erp.png" border="0"></a>


  		




  
  10
  
    
     <a href="http://www.lx-office.org" target="_top"><img src="image/lx-office-erp.png" border="0" width="150"></a>


  		




  9
  11
  
    
     <h3 class="login" align="center">[% 'Lx-Office' | $T8 %] [% version %]</h3>


  		




  10
  12
  
    

  		




  11
  13
  
    
     [% IF error_message %]


  		




  ......




  18
  20
  
    

  		




  19
  21
  
    
       <input type="hidden" name="show_dbupdate_warning" value="1">


  		




  20
  22
  
    

  		




  21
  
  
    
       <table width="100%">


  		




  
  23
  
    
       <table width="100%" border=0>


  		




  22
  24
  
    
        <tr>


  		




  23
  25
  
    
         <td align="center">


  		




  24
  
  
    
          <table>


  		




  25
  
  
    
           <tr>


  		




  26
  
  
    
            <th align="right">[% 'Login Name' | $T8 %]</th>


  		




  27
  
  
    
            <td><input class="login" name="login" size="30" tabindex="1"></td>


  		




  28
  
  
    
           </tr>


  		




  29
  
  
    
           <tr>


  		




  30
  
  
    
            <th align="right">[% 'Password' | $T8 %]</th>


  		




  31
  
  
    
            <td><input class="login" type="password" name="password" size="30" tabindex="2"></td>


  		




  32
  
  
    
           </tr>


  		




  
  26
  
    
          <table border=0>


  		




  
  27
  
    
           <tr><th align="left">[% 'Login Name' | $T8 %]</th><td><input class="login" name="login" size="20" tabindex="1" title="[% 'Login Name' | $T8 %]"></td></tr>


  		




  
  28
  
    
           <tr><th align="left">[% 'Password' | $T8 %]</th><td><input class="login" type="password" name="password" size="20" tabindex="2" title="[% 'Password' | $T8 %]"></td></tr>


  		




  
  29
  
    
           <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>


  		




  
  30
  
    
           <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>


  		




  33
  31
  
    
          </table>


  		




  34
  
  
    

  		




  35
  
  
    
          <br>


  		




  36
  
  
    
          <input type="hidden" name="action" value="login">


  		




  37
  
  
    
          <input type="submit" value="[% 'Login' | $T8 %]" tabindex="3">


  		




  38
  
  
    

  		




  39
  
  
    
         </td>


  		




  40
  
  
    
        </tr>


  		




  
  32
  
    
         </tr>


  		




  41
  33
  
    
       </table>


  		




  42
  34
  
    

  		




  43
  35
  
    
      </form>


  		












Auch abrufbar als:  Unified diff