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