bug fixed: replace obsolet tn_width and tn_height language keys by their new

equivalent.

improvement: HTML properties forms rewritten to offer labelled Yes/No click
on checkboxes.

improvement: onblur onfocus attribute used on every HTML properties form.


git-svn-id: http://piwigo.org/svn/trunk@1129 68402e56-0260-453c-a942-63ccdbb3a9ee

11 files changed, 184 insertions, 112 deletions

diff --git a/admin/thumbnail.php b/admin/thumbnail.php
index d9b01f512..5c0bb0246 100644
--- a/admin/thumbnail.php
+++ b/admin/thumbnail.php
@@ -170,8 +170,6 @@ $template->assign_vars(array(
   'L_RESULTS'=>$lang['tn_results_title'],
   'L_PATH'=>$lang['path'],
   'L_FILESIZE'=>$lang['filesize'],
-  'L_WIDTH'=>$lang['tn_width'],
-  'L_HEIGHT'=>$lang['tn_height'],
   'L_GENERATED'=>$lang['tn_results_gen_time'],
   'L_THUMBNAIL'=>$lang['thumbnail'],
   'L_PARAMS'=>$lang['tn_params_title'],
diff --git a/language/en_UK.iso-8859-1/admin.lang.php b/language/en_UK.iso-8859-1/admin.lang.php
index 47145569b..465aed5a2 100644
--- a/language/en_UK.iso-8859-1/admin.lang.php
+++ b/language/en_UK.iso-8859-1/admin.lang.php
@@ -247,6 +247,8 @@ $lang['locked'] = 'Locked';
 $lang['manage category elements'] = 'manage category elements';
 $lang['manage sub-categories'] = 'manage sub-categories';
 $lang['manage'] = 'Manage';
+$lang['maximum height'] = 'maximum height';
+$lang['maximum width'] = 'maximum width';
 $lang['metadata_basic'] = 'basic';
 $lang['metadata_exif'] = 'EXIF';
 $lang['metadata_iptc'] = 'IPTC';
@@ -392,7 +394,6 @@ $lang['tn_dirs_title'] = 'Directories list';
 $lang['tn_err_height'] = 'height must be a number superior to';
 $lang['tn_err_width'] = 'width must be a number superior to';
 $lang['tn_format'] = 'for the file format';
-$lang['tn_height'] = 'height';
 $lang['tn_no_missing'] = 'No missing thumbnail';
 $lang['tn_no_support'] = 'Picture unreachable or no support';
 $lang['tn_params_GD'] = 'GD version';
@@ -407,7 +408,6 @@ $lang['tn_stats_min'] = 'min time';
 $lang['tn_stats_nb'] = 'number of miniaturized pictures';
 $lang['tn_stats_total'] = 'total time';
 $lang['tn_thisformat'] = 'for this file format';
-$lang['tn_width'] = 'width';
 $lang['unit mode'] = 'unit mode';
 $lang['unlocked'] = 'Unlocked';
 $lang['unset'] = 'unset';
diff --git a/language/fr_FR.iso-8859-1/admin.lang.php b/language/fr_FR.iso-8859-1/admin.lang.php
index 3f32119ec..e29f942e5 100644
--- a/language/fr_FR.iso-8859-1/admin.lang.php
+++ b/language/fr_FR.iso-8859-1/admin.lang.php
@@ -248,6 +248,8 @@ $lang['locked'] = 'Verrouillé';
 $lang['manage category elements'] = 'gérer les éléments de la catégorie';
 $lang['manage sub-categories'] = 'gérer les sous-catégories';
 $lang['manage'] = 'Gérer';
+$lang['maximum height'] = 'hauteur maximum';
+$lang['maximum width'] = 'largeur maximum';
 $lang['metadata_basic'] = 'basique';
 $lang['metadata_exif'] = 'EXIF';
 $lang['metadata_iptc'] = 'IPTC';
@@ -393,7 +395,6 @@ $lang['tn_dirs_title'] = 'Liste des répertoires';
 $lang['tn_err_height'] = 'la hauteur doit un entier supérieur à';
 $lang['tn_err_width'] = 'la largeur doit être un entier supérieur à';
 $lang['tn_format'] = 'pour le format de fichier';
-$lang['tn_height'] = 'hauteur';
 $lang['tn_no_missing'] = 'Aucune miniature ne manque';
 $lang['tn_no_support'] = 'Image innaccessible ou non supportée';
 $lang['tn_params_GD'] = 'version de GD';
@@ -408,7 +409,6 @@ $lang['tn_stats_min'] = 'temps minimal';
 $lang['tn_stats_nb'] = 'nombre de miniatures créées';
 $lang['tn_stats_total'] = 'temps total';
 $lang['tn_thisformat'] = 'pour ce format de fichier';
-$lang['tn_width'] = 'largeur';
 $lang['unit mode'] = 'mode unitaire';
 $lang['unlocked'] = 'déverrouillée';
 $lang['unset'] = 'vider';
diff --git a/template/yoga/admin/configuration.tpl b/template/yoga/admin/configuration.tpl
index fb9b0f590..a0578692d 100644
--- a/template/yoga/admin/configuration.tpl
+++ b/template/yoga/admin/configuration.tpl
@@ -14,44 +14,48 @@
 
   <ul>
     <li>
-      <label for="gallery_title"><strong>{lang:Gallery title}</strong></label>
-      <input type="text" maxlength="255" size="50" name="gallery_title" id="gallery_title" value="{general.CONF_GALLERY_TITLE}" />
+      <span class="property">
+        <label for="gallery_title">{lang:Gallery title}</label>
+      </span>
+      <input type="text" maxlength="255" size="50" name="gallery_title" id="gallery_title" value="{general.CONF_GALLERY_TITLE}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
     </li>
 
     <li>
-      <label for="page_banner"><strong>{lang:Page banner}</strong></label>
-      <textarea cols="50" rows="5" name="page_banner" id="page_banner">{general.CONF_PAGE_BANNER}</textarea>
+      <span class="property">
+        <label for="page_banner">{lang:Page banner}</label>
+      </span>
+      <textarea cols="50" rows="5" name="page_banner" id="page_banner" onfocus="this.className='focus';" onblur="this.className='nofocus';">{general.CONF_PAGE_BANNER}</textarea>
     </li>
 
     <li>
-      <label for="gallery_url"><strong>{lang:Gallery URL}</strong></label>
-      <input type="text" maxlength="255" size="50" name="gallery_url" id="gallery_url" value="{general.CONF_GALLERY_URL}" />
+      <span class="property">
+        <label for="gallery_url">{lang:Gallery URL}</label>
+      </span>
+      <input type="text" maxlength="255" size="50" name="gallery_url" id="gallery_url" value="{general.CONF_GALLERY_URL}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
     </li>
 
     <li>
-      <label><strong>{lang:History}</strong></label>
-      <input type="radio" class="radio" name="log" value="true" {general.HISTORY_YES} />{lang:Yes}
-      <input type="radio" class="radio" name="log" value="false" {general.HISTORY_NO} />{lang:No}
+      <span class="property">{lang:History}</span>
+      <label><input type="radio" class="radio" name="log" value="true" {general.HISTORY_YES} />{lang:Yes}</label>
+      <label><input type="radio" class="radio" name="log" value="false" {general.HISTORY_NO} />{lang:No}</label>
     </li>
 
     <li>
-      <label><strong>{lang:Lock gallery}</strong></label>
-      <input type="radio" class="radio" name="gallery_locked" value="true" {general.GALLERY_LOCKED_YES} />{lang:Yes}
-      <input type="radio" class="radio" name="gallery_locked" value="false" {general.GALLERY_LOCKED_NO} />{lang:No}
+      <span class="property">{lang:Lock gallery}</span>
+      <label><input type="radio" class="radio" name="gallery_locked" value="true" {general.GALLERY_LOCKED_YES} />{lang:Yes}</label>
+      <label><input type="radio" class="radio" name="gallery_locked" value="false" {general.GALLERY_LOCKED_NO} />{lang:No}</label>
     </li>
-  </ul>
-
-  <ul>
+    
     <li>
-      <label><strong>{lang:Rating}</strong></label>
-      <input type="radio" class="radio" name="rate" value="true" {general.RATE_YES} />{lang:Yes}
-      <input type="radio" class="radio" name="rate" value="false" {general.RATE_NO} />{lang:No}
+      <span class="property">{lang:Rating}</span>
+      <label><input type="radio" class="radio" name="rate" value="true" {general.RATE_YES} />{lang:Yes}</label>
+      <label><input type="radio" class="radio" name="rate" value="false" {general.RATE_NO} />{lang:No}</label>
     </li>
 
     <li>
-      <label><strong>{lang:Rating by guests}</strong></label>
-      <input type="radio" class="radio" name="rate_anonymous" value="true" {general.RATE_ANONYMOUS_YES} />{lang:Yes}
-      <input type="radio" class="radio" name="rate_anonymous" value="false" {general.RATE_ANONYMOUS_NO} />{lang:No}
+      <span class="property">{lang:Rating by guests}</span>
+      <label><input type="radio" class="radio" name="rate_anonymous" value="true" {general.RATE_ANONYMOUS_YES} />{lang:Yes}</label>
+      <label><input type="radio" class="radio" name="rate_anonymous" value="false" {general.RATE_ANONYMOUS_NO} />{lang:No}</label>
     </li>
   </ul>
 <!-- END general -->
@@ -61,20 +65,22 @@
 
   <ul>
     <li>
-      <label><strong>{lang:Comments for all}</strong></label>
-      <input type="radio" class="radio" name="comments_forall" value="true" {comments.COMMENTS_ALL_YES} />{lang:Yes}
-      <input type="radio" class="radio" name="comments_forall" value="false" {comments.COMMENTS_ALL_NO} />{lang:No}
+      <span class="property">{lang:Comments for all}</span>
+      <label><input type="radio" class="radio" name="comments_forall" value="true" {comments.COMMENTS_ALL_YES} />{lang:Yes}</label>
+      <label><input type="radio" class="radio" name="comments_forall" value="false" {comments.COMMENTS_ALL_NO} />{lang:No}</label>
     </li>
 
     <li>
-      <label for="nb_comment_page"><strong>{lang:Number of comments per page}</strong></label>
-      <input type="text" size="3" maxlength="4" name="nb_comment_page" id="nb_comment_page" value="{comments.NB_COMMENTS_PAGE}" />
+      <span class="property">
+        <label for="nb_comment_page">{lang:Number of comments per page}</label>
+      </span>
+      <input type="text" size="3" maxlength="4" name="nb_comment_page" id="nb_comment_page" value="{comments.NB_COMMENTS_PAGE}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
     </li>
 
     <li>
-      <label><strong>{lang:Validation}</strong></label>
-      <input type="radio" class="radio" name="comments_validation" value="true" {comments.VALIDATE_YES} />{lang:Yes}
-      <input type="radio" class="radio" name="comments_validation" value="false" {comments.VALIDATE_NO} />{lang:No}
+      <span class="property">{lang:Validation}</span>
+      <label><input type="radio" class="radio" name="comments_validation" value="true" {comments.VALIDATE_YES} />{lang:Yes}</label>
+      <label><input type="radio" class="radio" name="comments_validation" value="false" {comments.VALIDATE_NO} />{lang:No}</label>
     </li>
   </ul>
 <!-- END comments -->
@@ -83,8 +89,10 @@
 
   <ul>
     <li>
-      <label for="language"><strong>{lang:Language}</strong></label>
-      <select name="default_language" id="default_language">
+      <span class="property">
+        <label for="default_language">{lang:Language}</label>
+      </span>
+      <select name="default_language" id="default_language" onfocus="this.className='focus';" onblur="this.className='nofocus';">
         <!-- BEGIN language_option -->
         <option value="{default.language_option.VALUE}" {default.language_option.SELECTED}>{default.language_option.CONTENT}</option>
         <!-- END language_option -->
@@ -92,18 +100,24 @@
     </li>
 
     <li>
-      <label for="nb_image_line"><strong>{lang:Number of images per row}</strong></label>
-      <input type="text" size="3" maxlength="2" name="nb_image_line" value="{default.NB_IMAGE_LINE}" />
+      <span class="property">
+        <label for="nb_image_line">{lang:Number of images per row}</label>
+      </span>
+      <input type="text" size="3" maxlength="2" id="nb_image_line" name="nb_image_line" value="{default.NB_IMAGE_LINE}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
     </li>
 
     <li>
-      <label><strong>{lang:Number of rows per page}</strong></label>
-      <input type="text" size="3" maxlength="2" name="nb_line_page" value="{default.NB_ROW_PAGE}" />
+      <span class="property">
+        <label for="nb_line_page">{lang:Number of rows per page}</label>
+      </span>
+      <input type="text" size="3" maxlength="2" id="nb_line_page" name="nb_line_page" value="{default.NB_ROW_PAGE}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
     </li>
 
     <li>
-      <label><strong>{lang:Interface theme}</strong></label>
-      <select name="default_template" id="default_template">
+      <span class="property">
+        <label for="default_template">{lang:Interface theme}</label>
+      </span>
+      <select name="default_template" id="default_template" onfocus="this.className='focus';" onblur="this.className='nofocus';">
         <!-- BEGIN template_option -->
         <option value="{default.template_option.VALUE}" {default.template_option.SELECTED}>{default.template_option.CONTENT}</option>
         <!-- END template_option -->
@@ -111,30 +125,36 @@
     </li>
 
     <li>
-      <label for="recent_period"><strong>{lang:Recent period}</strong></label>
-      <input type="text" size="3" maxlength="2" name="recent_period" id="recent_period" value="{default.CONF_RECENT}" />
+      <span class="property">
+        <label for="recent_period">{lang:Recent period}</label>
+      </span>
+      <input type="text" size="3" maxlength="2" name="recent_period" id="recent_period" value="{default.CONF_RECENT}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
     </li>
 
     <li>
-      <label><strong>{lang:Expand all categories}</strong></label>
-      <input type="radio" class="radio" name="auto_expand" value="true" {default.EXPAND_YES} />{lang:Yes}
-      <input type="radio" class="radio" name="auto_expand" value="false" {default.EXPAND_NO} />{lang:No}
+      <span class="property">{lang:Expand all categories}</span>
+      <label><input type="radio" class="radio" name="auto_expand" value="true" {default.EXPAND_YES} />{lang:Yes}</label>
+      <label><input type="radio" class="radio" name="auto_expand" value="false" {default.EXPAND_NO} />{lang:No}</label>
     </li>
 
     <li>
-      <label><strong>{lang:Show number of comments}</strong></label>
-      <input type="radio" class="radio" name="show_nb_comments" value="true" {default.SHOW_COMMENTS_YES} />{lang:Yes}
-      <input type="radio" class="radio" name="show_nb_comments" value="false" {default.SHOW_COMMENTS_NO} />{lang:No}
+      <span class="property">{lang:Show number of comments}</span>
+      <label><input type="radio" class="radio" name="show_nb_comments" value="true" {default.SHOW_COMMENTS_YES} />{lang:Yes}</label>
+      <label><input type="radio" class="radio" name="show_nb_comments" value="false" {default.SHOW_COMMENTS_NO} />{lang:No}</label>
     </li>
 
     <li>
-      <label><strong>{lang:Maximum width of the pictures}</strong></label>
-      <input type="text" size="4" maxlength="4" name="default_maxwidth" value="{default.MAXWIDTH}" />
+      <span class="property">
+        <label for="default_maxwidth">{lang:Maximum width of the pictures}</label>
+      </span>
+      <input type="text" size="4" maxlength="4" id="default_maxwidth" name="default_maxwidth" value="{default.MAXWIDTH}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
     </li>
 
     <li>
-      <label><strong>{lang:Maximum height of the pictures}</strong></label>
-      <input type="text" size="4" maxlength="4" name="default_maxheight" value="{default.MAXHEIGHT}" />
+      <span class="property">
+        <label for="default_maxheight">{lang:Maximum height of the pictures}</label>
+      </span>
+      <input type="text" size="4" maxlength="4" id="default_maxheight" name="default_maxheight" value="{default.MAXHEIGHT}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
     </li>
   </ul>
 <!-- END default -->
diff --git a/template/yoga/admin/group_list.tpl b/template/yoga/admin/group_list.tpl
index 389bc1071..7b7dd67eb 100644
--- a/template/yoga/admin/group_list.tpl
+++ b/template/yoga/admin/group_list.tpl
@@ -4,8 +4,15 @@
 <form method="post" name="add_user" action="{F_ADD_ACTION}" class="properties">
   <fieldset>
     <legend>{lang:Add group}</legend>
-    <label>{lang:Group name}</label><input type="text" name="groupname" maxlength="50" size="20" />
-    <p><input type="submit" name="submit_add" value="{lang:Add}" {TAG_INPUT_ENABLED}/></p>
+
+    <span class="property">
+      <label for="groupname">{lang:Group name}</label>
+    </span>
+    <input type="text" id="groupname" name="groupname" maxlength="50" size="20" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
+
+    <p>
+      <input type="submit" name="submit_add" value="{lang:Add}" {TAG_INPUT_ENABLED}/>
+    </p>
   </fieldset>
 </form>
 
diff --git a/template/yoga/admin/thumbnail.tpl b/template/yoga/admin/thumbnail.tpl
index cd461be59..cf5345d43 100644
--- a/template/yoga/admin/thumbnail.tpl
+++ b/template/yoga/admin/thumbnail.tpl
@@ -65,27 +65,35 @@
 
     <ul>
       <li>
-        <label><strong>{L_GD}</strong></label>
-	<input type="radio" name="gd" value="2" {params.GD2_CHECKED} />2.x
-	<input type="radio" name="gd" value="1" {params.GD1_CHECKED} />1.x
+        <span class="property">{L_GD}</span>
+	<label>
+          <input type="radio" name="gd" value="2" {params.GD2_CHECKED} />2.x
+        </label>
+        <label>
+          <input type="radio" name="gd" value="1" {params.GD1_CHECKED} />1.x
+        </label>
       </li>
 
       <li>
-        <label><strong>{lang:maximum width}</strong></label>
-	<input type="text" name="width" value="{params.WIDTH_TN}"/>
+        <span class="property">
+          <label for="width">{lang:maximum width}</label>
+        </span>
+	<input type="text" id="width" name="width" value="{params.WIDTH_TN}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
       </li>
 
       <li>
-        <label><strong>{lang:maximum height}</strong></label>
-	<input type="text" name="height" value="{params.HEIGHT_TN}"/>
+        <span class="property">
+          <label for="height">{lang:maximum height}</label>
+        </span>
+	<input type="text" id="height" name="height" value="{params.HEIGHT_TN}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
       </li>
 
       <li>
-        <label><strong>{lang:Number of thumbnails to create}</strong></label>
-	<input type="radio" name="n" value="5"   {params.n_5_CHECKED} /> 5
-	<input type="radio" name="n" value="10"  {params.n_10_CHECKED} /> 10
-	<input type="radio" name="n" value="20"  {params.n_20_CHECKED} /> 20
-	<input type="radio" name="n" value="all" {params.n_all_CHECKED} /> {L_ALL}
+        <span class="property">{lang:Number of thumbnails to create}</span>
+	<label><input type="radio" name="n" value="5"   {params.n_5_CHECKED} /> 5</label>
+	<label><input type="radio" name="n" value="10"  {params.n_10_CHECKED} /> 10</label>
+	<label><input type="radio" name="n" value="20"  {params.n_20_CHECKED} /> 20</label>
+	<label><input type="radio" name="n" value="all" {params.n_all_CHECKED} /> {L_ALL}</label>
       </li>
     </ul>
   </fieldset>
diff --git a/template/yoga/default-layout.css b/template/yoga/default-layout.css
index 85f9f774b..d8f70bfb6 100644
--- a/template/yoga/default-layout.css
+++ b/template/yoga/default-layout.css
@@ -179,7 +179,8 @@ FORM.properties LI, FORM#update UL  {
   line-height: 1.8em;
 }
 
-FORM.properties LABEL {
+FORM.properties SPAN.property {
+  font-weight: bold;
   float: left;
   width: 50%;
   text-align: right;
@@ -187,10 +188,6 @@ FORM.properties LABEL {
   padding: 0 0.5em 0 0;
 }
 
-FORM.properties LABEL.mandatory {
-  font-weight: bold;
-}
-
 FORM.properties .focus {
   background-color: whitesmoke;
 }
diff --git a/template/yoga/identification.tpl b/template/yoga/identification.tpl
index e8d02f05b..8f28ac224 100644
--- a/template/yoga/identification.tpl
+++ b/template/yoga/identification.tpl
@@ -23,28 +23,36 @@
 <form action="{F_LOGIN_ACTION}" method="post" class="properties">
   <fieldset>
     <legend>{lang:Connection settings}</legend>
-     <input type="hidden" name="redirect" value="{U_REDIRECT}">
+    
+    <input type="hidden" name="redirect" value="{U_REDIRECT}">
+    
     <ul>
       <li> 
-        <label for="username">{L_USERNAME}</label>
-        <input tabindex="1" class="login" type="text" name="username" id="username" size="25" maxlength="40" value="{USERNAME}">
+        <span class="property">
+          <label for="username">{L_USERNAME}</label>
+        </span>
+        <input tabindex="1" class="login" type="text" name="username" id="username" size="25" maxlength="40" value="{USERNAME}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
       </li>
   
       <li>
-        <label for="password">{L_PASSWORD}</label>
-        <input tabindex="2" class="login" type="password" name="password" id="password" size="25" maxlength="25">
+        <span class="property">
+          <label for="password">{L_PASSWORD}</label>
+        </span>
+        <input tabindex="2" class="login" type="password" name="password" id="password" size="25" maxlength="25" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
       </li>
   
       <!-- BEGIN remember_me -->
       <li>
-        <label for="remember_me">{L_REMEMBER_ME}</label>
-        <input type="checkbox" name="remember_me" id=="remember_me" value="1">
+        <span class="property">
+          <label for="remember_me">{L_REMEMBER_ME}</label>
+        </span>
+        <input tabindex="3" type="checkbox" name="remember_me" id="remember_me" value="1">
       </li>
       <!-- END remember_me -->
     </ul>
   </fieldset>
 
-  <p><input type="submit" name="login" value="{L_LOGIN}"></p>
+  <p><input tabindex="4" type="submit" name="login" value="{L_LOGIN}"></p>
 </form>
  
   <p>
diff --git a/template/yoga/password.tpl b/template/yoga/password.tpl
index 081722cc1..f581507e2 100644
--- a/template/yoga/password.tpl
+++ b/template/yoga/password.tpl
@@ -33,14 +33,18 @@
     <legend>{lang:Retrieve password}</legend>
 
     <ul>
-      <li> 
-        <label for="mail_address">{lang:Email address}</label>
-        <input class="login" type="text" name="mail_address" id="mail_address" size="40" maxlength="40">
+      <li>
+        <span class="property">
+          <label for="mail_address">{lang:Email address}</label>
+        </span>
+        <input class="login" type="text" name="mail_address" id="mail_address" size="40" maxlength="40" onfocus="this.className='focus';" onblur="this.className='nofocus';">
       </li>
 
       <li>
-        <label>{lang:No email address}</label>
-        <input type="checkbox" name="no_mail_address" value="1">
+        <span class="property">
+          <label for="no_mail_address">{lang:No email address}</label>
+        </span>
+        <input type="checkbox" id="no_mail_address" name="no_mail_address" value="1">
       </li>
     </ul>
   </fieldset>
diff --git a/template/yoga/profile.tpl b/template/yoga/profile.tpl
index 5233e49bb..3cfece113 100644
--- a/template/yoga/profile.tpl
+++ b/template/yoga/profile.tpl
@@ -26,27 +26,35 @@
 
     <ul>
       <li>
-        <label>{lang:Username}</label>
-        <strong>{USERNAME}</strong>
+        <span class="property">{lang:Username}</span>
+        {USERNAME}
       </li>
 
       <li>
-        <label for="mail_address">{lang:Email address}</label>
+        <span class="property">
+          <label for="mail_address">{lang:Email address}</label>
+        </span>
         <input type="text" name="mail_address" id="mail_address" value="{EMAIL}" onfocus="this.className='focus';" onblur="this.className='nofocus';">
       </li>
 
       <li>
-        <label for="password">{L_CURRENT_PASSWORD}</label>
+        <span class="property">
+          <label for="password">{L_CURRENT_PASSWORD}</label>
+        </span>
         <input type="password" name="password" id="password" value="" onfocus="this.className='focus';" onblur="this.className='nofocus';">
       </li>
 
       <li>
-        <label for="use_new_pwd">{L_NEW_PASSWORD}</label>
+        <span class="property">
+          <label for="use_new_pwd">{L_NEW_PASSWORD}</label>
+        </span>
         <input type="password" name="use_new_pwd" id="use_new_pwd" value="" onfocus="this.className='focus';" onblur="this.className='nofocus';">
       </li>
 
       <li>
-        <label for="passwordConf">{L_CONFIRM_PASSWORD}</label>
+        <span class="property">
+          <label for="passwordConf">{L_CONFIRM_PASSWORD}</label>
+        </span>
         <input type="password" name="passwordConf" id="passwordConf" value="" onfocus="this.className='focus';" onblur="this.className='nofocus';">
       </li>
     </ul>
@@ -57,20 +65,26 @@
 
     <ul>
       <li>
-        <label for="nb_image_line">{L_NB_IMAGE_LINE}</label>
+        <span class="property">
+          <label for="nb_image_line">{L_NB_IMAGE_LINE}</label>
+        </span>
         <input type="text" size="3" maxlength="2" name="nb_image_line" id="nb_image_line" value="{NB_IMAGE_LINE}"
                onfocus="this.className='focus';" onblur="this.className='nofocus';">
       </li>
 
       <li>
-        <label for="nb_line_page">{L_NB_ROW_PAGE}</label>
+        <span class="property">
+          <label for="nb_line_page">{L_NB_ROW_PAGE}</label>
+        </span>
         <input type="text" size="3" maxlength="2" name="nb_line_page" id="nb_line_page" value="{NB_ROW_PAGE}"
                onfocus="this.className='focus';" onblur="this.className='nofocus';">
       </li>
 
       <li>
-        <label for="template">{L_STYLE_SELECT}</label>
-        <select name="template" id="template"> <!-- FIXME: if onfocus is used, the behaviour becomes weird in Firefox -->
+        <span class="property">
+          <label for="template">{L_STYLE_SELECT}</label>
+        </span>
+        <select name="template" id="template" onfocus="this.className='focus';" onblur="this.className='nofocus';">
           <!-- BEGIN template_option -->
           <option value="{template_option.VALUE}" {template_option.SELECTED}>{template_option.CONTENT}</option>
           <!-- END template_option -->
@@ -78,8 +92,10 @@
       </li>
 
       <li>
-        <label for="language">{L_LANG_SELECT}</label>
-        <select name="language" id="language"> <!-- same FIXME -->
+        <span class="property">
+          <label for="language">{L_LANG_SELECT}</label>
+        </span>
+        <select name="language" id="language" onfocus="this.className='focus';" onblur="this.className='nofocus';">
           <!-- BEGIN language_option -->
           <option value="{language_option.VALUE}" {language_option.SELECTED}>{language_option.CONTENT}</option>
           <!-- END language_option -->
@@ -87,31 +103,37 @@
       </li>
 
       <li>
-        <label for="recent_period">{L_RECENT_PERIOD}</label>
+        <span class="property">
+          <label for="recent_period">{L_RECENT_PERIOD}</label>
+        </span>
         <input type="text" size="3" maxlength="2" name="recent_period" id="recent_period" value="{RECENT_PERIOD}"
                onfocus="this.className='focus';" onblur="this.className='nofocus';">
       </li>
 
       <li>
-        <label>{L_EXPAND_TREE}</label>
-        <input type="radio" class="radio" name="expand" value="true" {EXPAND_TREE_YES}> {L_YES}
-        <input type="radio" class="radio" name="expand" value="false" {EXPAND_TREE_NO}> {L_NO}
+        <span class="property">{L_EXPAND_TREE}</span>
+        <label><input type="radio" class="radio" name="expand" value="true" {EXPAND_TREE_YES}> {L_YES}</label>
+        <label><input type="radio" class="radio" name="expand" value="false" {EXPAND_TREE_NO}> {L_NO}</label>
       </li>
 
       <li>
-        <label>{L_NB_COMMENTS}</label>
-        <input type="radio" class="radio" name="show_nb_comments" value="true" {NB_COMMENTS_YES}> {L_YES}
-        <input type="radio" class="radio" name="show_nb_comments" value="false" {NB_COMMENTS_NO}> {L_NO}
+        <span class="property">{L_NB_COMMENTS}</span>
+        <label><input type="radio" class="radio" name="show_nb_comments" value="true" {NB_COMMENTS_YES}> {L_YES}</label>
+        <label><input type="radio" class="radio" name="show_nb_comments" value="false" {NB_COMMENTS_NO}> {L_NO}</label>
       </li>
  
       <li>
-        <label for="maxwidth">{L_MAXWIDTH}</label>
+        <span class="property">
+          <label for="maxwidth">{L_MAXWIDTH}</label>
+        </span>
         <input type="text" size="4" maxlength="4" name="maxwidth" id="maxwidth" value="{MAXWIDTH}"
                onfocus="this.className='focus';" onblur="this.className='nofocus';">
       </li>
 
       <li>
-        <label for="maxheight">{L_MAXHEIGHT}</label>
+        <span class="property">
+          <label for="maxheight">{L_MAXHEIGHT}</label>
+        </span>
         <input type="text" size="4" maxlength="4" name="maxheight" id="maxheight" value="{MAXHEIGHT}"
                onfocus="this.className='focus';" onblur="this.className='nofocus';">
       </li>
diff --git a/template/yoga/register.tpl b/template/yoga/register.tpl
index ee69ae021..90115d101 100644
--- a/template/yoga/register.tpl
+++ b/template/yoga/register.tpl
@@ -25,22 +25,30 @@
 
     <ul>
       <li>
-        <label for="login" class="mandatory">* {lang:Username}</label>
+        <span class="property">
+          <label for="login">* {lang:Username}</label>
+        </span>
         <input type="text" name="login" id="login" value="{F_LOGIN}" onfocus="this.className='focus';" onblur="this.className='nofocus';">
       </li>
 
       <li>
-        <label for="password" class="mandatory">* {lang:Password}</label>
+        <span class="property">
+          <label for="password">* {lang:Password}</label>
+        </span>
         <input type="password" name="password" id="password" onfocus="this.className='focus';" onblur="this.className='nofocus';">
       </li>
 
       <li>
-        <label for="password_conf" class="mandatory">* {lang:Confirm Password}</label>
+        <span class="property">
+          <label for="password_conf">* {lang:Confirm Password}</label>
+        </span>
         <input type="password" name="password_conf" id="password_conf" onfocus="this.className='focus';" onblur="this.className='nofocus';">
       </li>
 
       <li>
-        <label for="mail_address">{lang:Mail address}</label>
+        <span class="property">
+          <label for="mail_address">{lang:Mail address}</label>
+        </span>
         <input type="text" name="mail_address" id="mail_address" value="{F_EMAIL}" onfocus="this.className='focus';" onblur="this.className='nofocus';">
         ({lang:useful when password forgotten})
       </li>