1 files changed, 110 insertions, 69 deletions
diff --git a/template/cclear/profile.tpl b/template/cclear/profile.tpl
index 76fe2dba6..08983b91b 100644
--- a/template/cclear/profile.tpl
+++ b/template/cclear/profile.tpl
@@ -1,3 +1,5 @@
+<div id="content">
+
 <!-- BEGIN errors -->
 <div class="errors">
   <ul>
@@ -8,73 +10,113 @@
 </div>
 <!-- END errors -->
 
-<h2>{L_TITLE}</h2>
-
-<div class="formbox">
-<form method="post" name="profile" action="{F_ACTION}" id="profile">
-
-  <p><input type="hidden" name="userid" value="{USERID}" /></p>
-
-  <h3>{L_REGISTRATION_INFO}</h3>
-  <dl>
-    <dt width="50%">{L_USERNAME}</dt>
-    <dd>{USERNAME}</dd>
-    <dt>{L_EMAIL}</dt>
-    <dd><input type="text" name="mail_address" value="{EMAIL}" /></dd>
-  </dl>
-  <dl class="biglabel">
-    <dt>{L_CURRENT_PASSWORD} : <br /><span class="small">{L_CURRENT_PASSWORD_HINT}</span></dt>
-    <dd><input type="password" name="password" value="" /></dd>
-  </dl>
-  <dl class="biglabel">
-    <dt>{L_NEW_PASSWORD} : <br /><span class="small">{L_NEW_PASSWORD_HINT}</span></dt>
-    <dd><input type="password" name="use_new_pwd" value="" /></dd>
-  </dl>
-  <dl class="biglabel">
-    <dt>{L_CONFIRM_PASSWORD} : <br /><span class="small">{L_CONFIRM_PASSWORD_HINT}</span></dt>
-    <dd><input type="password" name="passwordConf" value="" /></dd>
-  </dl>
-  <h3>{L_PREFERENCES}</h3>
-  <dl>
-    <dt>{L_NB_IMAGE_LINE}</dt>
-    <dd>
-      <input type="text" size="3" maxlength="2" name="nb_image_line" value="{NB_IMAGE_LINE}" />
-    </dd>
-    <dt>{L_NB_ROW_PAGE}</dt>
-    <dd>
-      <input type="text" size="3" maxlength="2" name="nb_line_page" value="{NB_ROW_PAGE}" />
-    </dd>
-    <dt>{L_STYLE_SELECT}</dt>
-    <dd>
-      {STYLE_SELECT}
-    </dd>
-    <dt>{L_LANG_SELECT}</dt>
-    <dd>
-      {LANG_SELECT}
-    </dd>
-    <dt>{L_RECENT_PERIOD}</dt>
-    <dd>
-      <input type="text" size="3" maxlength="2" name="recent_period" value="{RECENT_PERIOD}" />
-    </dd>
-    <dt>{L_EXPAND_TREE}</dt>
-    <dd>
-      <input type="radio" class="radio" name="expand" value="true" {EXPAND_TREE_YES} />{L_YES}&nbsp;&nbsp;
-      <input type="radio" class="radio" name="expand" value="false" {EXPAND_TREE_NO} />{L_NO}
-    </dd>
-    <dt>{L_NB_COMMENTS}</dt>
-    <dd>
-      <input type="radio" class="radio" name="show_nb_comments" value="true" {NB_COMMENTS_YES} />{L_YES}&nbsp;&nbsp;
-      <input type="radio" class="radio" name="show_nb_comments" value="false" {NB_COMMENTS_NO} />{L_NO}
-    </dd>
-    <dt>{L_MAXWIDTH}</dt>
-    <dd>
-      <input type="text" size="4" maxlength="4" name="maxwidth" value="{MAXWIDTH}" />
-    </dd>
-    <dt>{L_MAXHEIGHT}</dt>
-    <dd>
-      <input type="text" size="4" maxlength="4" name="maxheight" value="{MAXHEIGHT}" />
-    </dd>
-  </dl>
+  <div class="titrePage">
+    <ul class="categoryActions">
+      <li><a href="{U_RETURN}" title="{lang:return to homepage}"><img src="./template/cclear/theme/home.png" alt="{lang:home}"/></a></li>
+    </ul>
+    <h2>{lang:Profile}</h2>
+  </div>
+
+<form method="post" name="profile" action="{F_ACTION}" id="profile" class="properties">
+
+  <input type="hidden" name="userid" value="{USERID}" />
+
+  <fieldset>
+    <legend>{L_REGISTRATION_INFO}</legend>
+
+    <ul>
+      <li>
+        <label>{lang:Username}</label>
+        <strong>{USERNAME}</strong>
+      </li>
+
+      <li>
+        <label for="mail_address">{lang:Email address}</label>
+        <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>
+        <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>
+        <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>
+        <input type="password" name="passwordConf" id="passwordConf" value="" onfocus="this.className='focus';" onblur="this.className='nofocus';">
+      </li>
+    </ul>
+  </fieldset>
+
+  <fieldset>
+    <legend>{L_PREFERENCES}</legend>
+
+    <ul>
+      <li>
+        <label for="nb_image_line">{L_NB_IMAGE_LINE}</label>
+        <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>
+        <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 -->
+          <!-- BEGIN template_option -->
+          <option value="{template_option.VALUE}" {template_option.SELECTED}>{template_option.CONTENT}</option>
+          <!-- END template_option -->
+        </select>
+      </li>
+
+      <li>
+        <label for="language">{L_LANG_SELECT}</label>
+        <select name="language" id="language"> <!-- same FIXME -->
+          <!-- BEGIN language_option -->
+          <option value="{language_option.VALUE}" {language_option.SELECTED}>{language_option.CONTENT}</option>
+          <!-- END language_option -->
+        </select>
+      </li>
+
+      <li>
+        <label for="recent_period">{L_RECENT_PERIOD}</label>
+        <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}
+      </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}
+      </li>
+ 
+      <li>
+        <label for"maxwidth">{L_MAXWIDTH}</label>
+        <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>
+        <input type="text" size="4" maxlength="4" name="maxheight" id="maxheight" value="{MAXHEIGHT}"
+               onfocus="this.className='focus';" onblur="this.className='nofocus';">
+      </li>
+    </ul>
+  </fieldset>
 
   <p class="bottomButtons">
     <input type="submit" name="validate" value="{L_SUBMIT}">
@@ -83,5 +125,4 @@
 
 </form>
 
-  <p><a href="{U_RETURN}" title="{L_RETURN_HINT}">[{L_RETURN}]</a></p>
-</div>
+</div> <!-- content -->