css-style police for the password strenght check ;-)

Author: redray

interface/web/admin/templates/users_user_edit.htm

@@ -13,9 +13,8 @@ <h2><tmpl_var name="list_head_txt"></h2>
         <input type="password" id="passwort" name="passwort" value="{tmpl_var name='passwort'}" size="15" maxlength="100" onkeyup="pass_check(this.value)">
       </span>
       <span class="wf_oneField">
-        <label class="wf_preField" style="float:left;">{tmpl_var name='password_strength_txt'}</label>
-        <div id="passBar" style="border: 1px solid rgb(0, 0, 0); width: 100px; height: 10px; float:left;"></div>
-        <span id="passText" style="margin-left: 10px;">&nbsp;</span>
+        <span class="wf_preField">{tmpl_var name='password_strength_txt'}</span>
+        <span class="wf_passwordStrength"><div id="passBar"></div><span id="passText">&nbsp;</span></span>
       </span>
       <span class="wf_oneField" style="clear:left">
         <span class="wf_label wf_preField">{tmpl_var name='modules_txt'}</span>                    

interface/web/client/templates/client_edit_address.htm

@@ -21,9 +21,8 @@ <h2><tmpl_var name="list_head_txt"></h2>
         <input type="password" id="password" name="password" value="{tmpl_var name='password'}" size="30" maxlength="255" class="wf_required" onkeyup="pass_check(this.value)"><span class="wf_reqMark">*</span><br>
       </span>
       <span class="wf_oneField">
-        <label class="wf_preField" style="float:left;">{tmpl_var name='password_strength_txt'}</label>
-        <div id="passBar" style="border: 1px solid rgb(0, 0, 0); width: 100px; height: 10px; float:left;"></div>
-        <span id="passText" style="margin-left: 10px;">&nbsp;</span>
+        <span class="wf_preField">{tmpl_var name='password_strength_txt'}</span>
+        <span class="wf_passwordStrength"><div id="passBar"></div><span id="passText">&nbsp;</span></span>
       </span>
       <span class="wf_oneField">
         <label for="language" class="wf_preField">{tmpl_var name='language_txt'}</label>

interface/web/mail/templates/mail_user_mailbox_edit.htm

@@ -14,9 +14,8 @@ <h2><tmpl_var name="list_head_txt"></h2>
         <input type="password" id="password" name="password" value="{tmpl_var name='password'}" size="30" maxlength="255" onkeyup="pass_check(this.value)">
       </span>
       <span class="wf_oneField">
-        <label class="wf_preField" style="float:left;">{tmpl_var name='password_strength_txt'}</label>
-        <div id="passBar" style="border: 1px solid rgb(0, 0, 0); width: 100px; height: 10px; float:left;"></div>
-        <span id="passText" style="margin-left: 10px;">&nbsp;</span>
+        <span class="wf_preField">{tmpl_var name='password_strength_txt'}</span>
+        <span class="wf_passwordStrength"><div id="passBar"></div><span id="passText">&nbsp;</span></span>
       </span>
       <span class="wf_oneField">
         <label for="quota" class="wf_preField">{tmpl_var name='quota_txt'}</label>

interface/web/sites/templates/database_edit.htm

@@ -37,9 +37,8 @@ <h2><tmpl_var name="list_head_txt"></h2>
         <input type="password" id="database_password" name="database_password" value="{tmpl_var name='database_password'}" size="30" maxlength="255" class="wf_required" onkeyup="pass_check(this.value)"><span class="wf_reqMark">*</span><br>
       </span>
       <span class="wf_oneField">
-        <label class="wf_preField" style="float:left;">{tmpl_var name='password_strength_txt'}</label>
-        <div id="passBar" style="border: 1px solid rgb(0, 0, 0); width: 100px; height: 10px; float:left;"></div>
-        <span id="passText" style="margin-left: 10px;">&nbsp;</span>
+        <span class="wf_preField">{tmpl_var name='password_strength_txt'}</span>
+        <span class="wf_passwordStrength"><div id="passBar"></div><span id="passText">&nbsp;</span></span>
       </span>
       <span class="wf_oneField">
         <label for="database_charset" class="wf_preField">{tmpl_var name='database_charset_txt'}</label>

interface/web/sites/templates/ftp_user_edit.htm

@@ -17,9 +17,8 @@ <h2><tmpl_var name="list_head_txt"></h2>
         <input type="password" id="password" name="password" value="{tmpl_var name='password'}" size="30" maxlength="255" onkeyup="pass_check(this.value)">
       </span>
       <span class="wf_oneField">
-        <label class="wf_preField" style="float:left;">{tmpl_var name='password_strength_txt'}</label>
-        <div id="passBar" style="border: 1px solid rgb(0, 0, 0); width: 100px; height: 10px; float:left;"></div>
-        <span id="passText" style="margin-left: 10px;">&nbsp;</span>
+        <span class="wf_preField">{tmpl_var name='password_strength_txt'}</span>
+        <span class="wf_passwordStrength"><div id="passBar"></div><span id="passText">&nbsp;</span></span>
       </span>
       <span class="wf_oneField">
         <label for="quota_size" class="wf_preField">{tmpl_var name='quota_size_txt'}</label>

interface/web/sites/templates/shell_user_edit.htm

@@ -17,9 +17,8 @@ <h2><tmpl_var name="list_head_txt"></h2>
         <input type="password" id="password" name="password" value="{tmpl_var name='password'}" size="30" maxlength="255" onkeyup="pass_check(this.value)">
       </span>
       <span class="wf_oneField">
-        <label class="wf_preField" style="float:left;">{tmpl_var name='password_strength_txt'}</label>
-        <div id="passBar" style="border: 1px solid rgb(0, 0, 0); width: 100px; height: 10px; float:left;"></div>
-        <span id="passText" style="margin-left: 10px;">&nbsp;</span>
+        <span class="wf_preField">{tmpl_var name='password_strength_txt'}</span>
+        <span class="wf_passwordStrength"><div id="passBar"></div><span id="passText">&nbsp;</span></span>
       </span>
       <span class="wf_oneField">
         <label for="chroot" class="wf_preField">{tmpl_var name='chroot_txt'}</label>

interface/web/themes/default/css/screen/content_ispc.css

@@ -82,6 +82,18 @@
 		font-size: 0.9em;
 	}
 
+	/* Password Strength */
+	#passBar {
+	  width: 101px; height: 10px;
+    background: url(../../images/meter_bg.gif) repeat-x bottom left;
+    margin: 2px 0;
+    float: left;
+  }
+	#passText {
+	  padding: 0 8px;
+    float: left;
+  }
+  
 	/* Lists */
 	table.list {
 		width: 100%;

interface/web/themes/default/css/screen/wforms.css

@@ -126,7 +126,25 @@
 		padding-left: 1em;
 		vertical-align: top;
 	}
-	
+
+	/* SPANS ======================================================================= */
+	.pnl_formsarea span.wf_preField {
+		display: -moz-inline-box;
+		display: inline-block;	
+		margin: 0 8px 0 0;
+		padding: 0 4px;
+		width: 30%;
+		text-align: right;
+		font-size: 90%;
+		float: left;
+	}
+	.wf_passwordStrength {
+		font-size: 1.0em; 
+		margin: 0 2px 0 0;
+		padding: 1px 0;
+		vertical-align: top;
+  }
+  
 	/* Buttons ======================================================================= */
 
 	form .pnl_formsarea .wf_actions {

interface/web/themes/default/images/meter_bg.gif

@@ -9,9 +9,8 @@ <h2><tmpl_var name="list_head_txt"></h2>
         <input type="password" id="passwort" name="passwort" value="{tmpl_var name='passwort'}" size="15" maxlength="100" onkeyup="pass_check(this.value)">
       </span>
       <span class="wf_oneField">
-        <label class="wf_preField" style="float:left;">{tmpl_var name='password_strength_txt'}</label>
-        <div id="passBar" style="border: 1px solid rgb(0, 0, 0); width: 100px; height: 10px; float:left;"></div>
-        <span id="passText" style="margin-left: 10px;">&nbsp;</span>
+        <span class="wf_preField">{tmpl_var name='password_strength_txt'}</span>
+        <span class="wf_passwordStrength"><div id="passBar"></div><span id="passText">&nbsp;</span></span>
       </span>
       <span class="wf_oneField">
         <label for="passwort2" class="wf_preField">{tmpl_var name='passwort_txt'}</label>