From e60d38d23b96bad50474c70dc7c78e2051239037 Mon Sep 17 00:00:00 2001
From: devjin <namnyams@gmail.com>
Date: Thu, 27 Sep 2012 02:37:37 +0000
Subject: [PATCH] issue 2529 update theme in member configuration.

git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@11540 201d5d3c-b55e-5fd7-737f-ddc643e51545
---
 modules/member/lang/lang.xml             |   4 +
 modules/member/tpl/insert_join_form.html | 110 +++++----
 modules/member/tpl/member_config.html    | 273 ++++++++++++-----------
 3 files changed, 211 insertions(+), 176 deletions(-)

diff --git a/modules/member/lang/lang.xml b/modules/member/lang/lang.xml
index 5ca81eb55..90d5c70ca 100644
--- a/modules/member/lang/lang.xml
+++ b/modules/member/lang/lang.xml
@@ -677,6 +677,10 @@
 	<item name="about_column_id">
 		<value xml:lang="ko"><![CDATA[입력항목의 구분자로 사용될 ID입니다. 영문으로 시작하고 영문 숫자만 사용가능합니다.]]></value>
 	</item>
+	<item name="options">
+		<value xml:lang="ko"><![CDATA[선택 옵션]]></value>
+		<value xml:lang="en"><![CDATA[Options]]></value>
+	</item>
 	<item name="about_keep_signed">
 		<value xml:lang="ko"><![CDATA[브라우저를 닫더라도 로그인이 계속 유지될 수 있습니다.\n\n로그인 유지 기능을 사용할 경우 다음 접속부터는 로그인을 하실 필요가 없습니다.\n\n단, 게임방, 학교 등 공공장소에서 이용 시 개인정보가 유출될 수 있으니 꼭 로그아웃을 해주세요.]]></value>
 		<value xml:lang="en"><![CDATA[You will be still signed in even when the browser is closed.\n\nIt is not recommended to use this if you are using a public computer, for your personal information could be violated.]]></value>
diff --git a/modules/member/tpl/insert_join_form.html b/modules/member/tpl/insert_join_form.html
index b3e5e8b8d..1082110e5 100644
--- a/modules/member/tpl/insert_join_form.html
+++ b/modules/member/tpl/insert_join_form.html
@@ -1,53 +1,65 @@
 <input type="hidden" name="member_join_form_srl" value="{$formInfo->member_join_form_srl}" />
-	<h2 class="h2">{$lang->cmd_input_extend_form}</h2>
-	<ul>
-		<li>
-			<p class="q"><label for="column_id">{$lang->column_id} *</label></p>
-			<p class="a"><input type="text" id="column_id" name="column_id" value="{$formInfo->column_name}" /></p>
-			<p class="description">{$lang->about_column_id}</p>
-		</li>
-		<li>
-			<p class="q"><label for="column_title">{$lang->column_title} *</label></p>
-			<p class="a"><input type="text" id="column_title" name="column_title" value="{$formInfo->column_title}" /></p>
-		</li>
-		<li>
-			<p class="q">{$lang->column_type} *</p>
-			<p class="a">
-				<select class="typeSelect" style="width:290px" name="column_type">
-					<option loop="$lang->column_type_list=>$key,$type_info" value="{$key}" selected="selected"|cond="$formInfo->column_type == $key" >{$lang->column_type_list[$key]}</option>
-				</select>
-			</p>
-			<p class="q multiExample">{$lang->about_multi_type}</p>
-			<p class="a multiExample"><textarea rows="8" cols="42" id="multiSelect" name="default_value"><block cond="$default_value">{implode('<enter>', $default_value)}</block></textarea></p>
-		</li>
-		<script>
-		var $ = jQuery;
-		var typeSelect = $('.typeSelect');
-		var multiOption = $('.typeSelect>option[value=checkbox], .typeSelect>option[value=radio], .typeSelect>option[value=selectM], .typeSelect>option[value=select]');
-		var multiExample = $('.multiExample');
+	<div class="x_page-header">
+		<h1>{$lang->cmd_input_extend_form}</h1>
+	</div>
+	<div class="x_control-group">
+		<label for="column_id" class="x_control-label">{$lang->column_id} *</label>
+		<div class="x_controls">
+			<input type="text" id="column_id" name="column_id" value="{$formInfo->column_name}" />
+			<p class="x_help-block">{$lang->about_column_id}</p>
+		</div>
+	</div>
+	<div class="x_control-group">
+		<label for="column_title" class="x_control-label">{$lang->column_title} *</label>
+		<div class="x_controls">
+			<input type="text" id="column_title" name="column_title" value="{$formInfo->column_title}" />
+		</div>
+	</div>
+	<div class="x_control-group">
+		<label for="columnType" class="x_control-label">{$lang->column_type} *</label>
+		<div class="x_controls">
+			<select id="columnType" class="typeSelect" style="width:290px" name="column_type">
+				<option loop="$lang->column_type_list=>$key,$type_info" value="{$key}" selected="selected"|cond="$formInfo->column_type == $key" >{$lang->column_type_list[$key]}</option>
+			</select>
+		</div>
+	</div>
+	<div class="x_control-group multiExample">
+		<label for="multiSelect" class="x_control-label">{$lang->options} *</label>
+		<div class="x_controls">
+			<textarea rows="8" cols="42" id="multiSelect" name="default_value"><block cond="$default_value">{implode('<enter>', $default_value)}</block></textarea>
+			<p class="x_help-block">{$lang->about_multi_type}</p>
+		</div>
+	</div>
+	<div class="x_control-group">
+		<label for="desc" class="x_control-label">{$lang->description}</label>
+		<div class="x_controls">
+			<textarea rows="8" cols="42" id="desc" name="description">{$formInfo->description}</textarea>
+		</div>
+	</div>
+	<div class="x_control-group">
+		<label class="x_control-label">{$lang->cmd_required}/{$lang->cmd_optional}</label>
+		<div class="x_controls">
+			<label for="radio_required" class="x_inline"><input type="radio" id="radio_required" name="required" value="Y" /> {$lang->cmd_required}</label>
+			<label for="radio_option" class="x_inline"><input type="radio" id="radio_option" name="required" value="N" /> {$lang->cmd_optional}</label>
+		</div>
+	</div>
+	<div class="x_clearfix" style="margin-right:20px">
+		<span class="x_pull-right"><button class="x_btn x_btn-primary" type="submit" name="mode" <!--@if($formInfo)-->value="update"<!--@else-->value="insert"<!--@end--> >{$lang->cmd_save}</button></span>
+	</div>
+<script>
+	var $ = jQuery;
+	var typeSelect = $('.typeSelect');
+	var multiOption = $('.typeSelect>option[value=checkbox], .typeSelect>option[value=radio], .typeSelect>option[value=selectM], .typeSelect>option[value=select]');
+	var multiExample = $('.multiExample');
 {@$default_value_types = array('checkbox', 'radio', 'select')}
 <!--@if(!in_array($formInfo->column_type, $default_value_types))-->
-		multiExample.hide();
+	multiExample.hide();
 <!--@end-->
-		typeSelect.change(function(){
-			if(multiOption.is(':selected')){
-				multiExample.slideDown(200);
-			} else {
-				multiExample.slideUp(200);
-			}
-		});
-		</script>
-		<li>
-			<p class="q"><label for="desc">{$lang->description}</label></p>
-			<p class="a"><textarea rows="8" cols="42" id="desc" name="description">{$formInfo->description}</textarea></p>
-		</li>
-		<li>
-			<p class="a">
-				<input type="radio" id="radio_required" name="required" value="Y" /> <label for="radio_required">{$lang->cmd_required}</label>
-				<input type="radio" id="radio_option" name="required" value="N" /> <label for="radio_option">{$lang->cmd_optional}</label>
-			</p>
-		</li>
-	</ul>
-	<div class="btnArea">
-		<button type="submit" name="mode" <!--@if($formInfo)-->value="update"<!--@else-->value="insert"<!--@end--> >{$lang->cmd_save}</button>
-	</div>
+	typeSelect.change(function(){
+		if(multiOption.is(':selected')){
+			multiExample.slideDown(200);
+		} else {
+			multiExample.slideUp(200);
+		}
+	});
+</script>
diff --git a/modules/member/tpl/member_config.html b/modules/member/tpl/member_config.html
index cc1e837fb..623625081 100644
--- a/modules/member/tpl/member_config.html
+++ b/modules/member/tpl/member_config.html
@@ -11,131 +11,148 @@
 	<p>{$XE_VALIDATOR_MESSAGE}</p>
 </div>
 
+<div class="x_page-header">
+	<h1>{$lang->cmd_member_config}</h1>
+</div>
+
 <form action="./" class="form" ruleset="insertConfig" method="post">
 <input type="hidden" name="module" value="member" />
 <input type="hidden" name="act" value="procMemberAdminInsertConfig" />
 <input type="hidden" name="success_return_url" value="{getUrl('act', $act)}" />
 <input type="hidden" name="agreement" value="{$config->agreement}" />
-	<h1 class="h1">{$lang->cmd_member_config}</h1>
-	<fieldset class="section suSetting">
-		<h2 class="h2">{$lang->cmd_module_config}</h2>
-		<ul>
-			<li>
-				<p class="q">{$lang->enable_join}</p>
-				<p class="a">
-					<input type="radio" name="enable_join" id="enable_join_yes" value="Y" checked="checked"|cond="$config->enable_join == 'Y'" /> <label for="enable_join_yes">{$lang->cmd_yes}</label>
-					<input type="radio" name="enable_join" id="enable_join_no" value="N" checked="checked"|cond="$config->enable_join != 'Y'" /> <label for="enable_join_no">{$lang->cmd_no}</label>
-				</p>
-			</li>
-			<li>
-				<p class="q">{$lang->enable_confirm}</p>
-				<p class="a">
-					<input type="radio" name="enable_confirm" id="enable_confirm_yes" value="Y" checked="checked"|cond="$config->enable_confirm == 'Y'" /> <label for="enable_confirm_yes">{$lang->cmd_yes}</label>
-					<input type="radio" name="enable_confirm" id="enable_confirm_no" value="N" checked="checked"|cond="$config->enable_confirm != 'Y'"/> <label for="enable_confirm_no">{$lang->cmd_no}</label>
-				</p>
-			</li>
-			<li>
-				<p class="q"><label for="webmaster_name">{$lang->webmaster_name}</label></p>
-				<p class="a">
-					<input type="text" id="webmaster_name" name="webmaster_name" value="{$config->webmaster_name}" size="20" /></p>
-				<p class="desc">{$lang->about_webmaster_name}</p>
-			</li>
-			<li>
-				<p class="q"><label for="webmaster_email">{$lang->webmaster_email}</label></p>
-				<p class="a">
-					<input type="text" id="webmaster_email" name="webmaster_email" value="{$config->webmaster_email}" size="40" /></p>
-				<p class="desc">{$lang->about_webmaster_email}</p>
-			</li>
-			<li>
-				<p class="q"><label for="limit_day">{$lang->limit_day}</label></p>
-				<p class="a"><input type="text" id="limit_day" name="limit_day" value="{$config->limit_day}" style="width:30px" /><span class="desc">{$lang->unit_day}({$lang->about_limit_day})</span></p>
-			</li>
-			<li>
-				<p class="q"><label for="change_password_date">{$lang->change_password_date}</label></p>
-				<p class="a"><input type="text" id="change_password_date" name="change_password_date" value="{$config->change_password_date}" style="width:30px" /><span class="desc">{$lang->unit_day}({$lang->about_change_password_date})</span></p>
-			</li>
-			<li>
-				<p class="q"><label for="max_error_count">{$lang->login_trial_limit1}</label></p>
-				<p class="a"><input type="text" id="max_error_count" name="max_error_count" value="{$config->max_error_count}" style="width:30px" /><span class="desc">{$lang->about_login_trial_limit1}</span></p>
-			</li>
-			<li>
-				<p class="q"><label for="max_error_count_time">{$lang->login_trial_limit2}</label></p>
-				<input type="text" id="max_error_count_time" name="max_error_count_time" value="{$config->max_error_count_time}" style="width:30px" /><span class="desc">{$lang->unit_sec}({$lang->about_login_trial_limit2})</span></p>
-			</li>
-			<li>
-				<p class="q"><label for="agreement">{$lang->agreement}</label></p>
-				<p class="a">{$editor}</p>
-			</li>
-			<li>
-				<p class="q"><label for="after_login_url">{$lang->after_login_url}</label></p>
-				<p class="a">
-					<input type="text" id="after_login_url" name="after_login_url" value="{$config->after_login_url}" /></p>
-				<p class="desc">{$lang->about_after_login_url}</p>
-			</li>
-			<li>
-				<p class="q"><label for="after_logout_url">{$lang->after_logout_url}</label></p>
-				<p class="a">
-					<input type="text" id="after_logout_url" name="after_logout_url" value="{$config->after_logout_url}" /></p>
-				<p class="desc">{$lang->about_after_logout_url}</p>
-			</li>
-			<li>
-				<p class="q"><label for="redirect_url">{$lang->redirect_url}</label></p>
-				<p class="a">
-					<input type="text" id="redirect_url" name="redirect_url" value="{$config->redirect_url}" /></p>
-				<p class="desc">{$lang->about_redirect_url}</p>
-			</li>
-			<li>
-				<p class="q"><label for="skin">{$lang->layout}</label></p>
-				<p class="a">
-				<select name="layout_srl">
-					<option loop="$layout_list => $key,$val" value="{$val->layout_srl}" selected="selected"|cond="$val->layout_srl == $config->layout_srl">{$val->title} ({$val->layout})</option>
-				</select>
-				</p>
-			</li>
-			<li>
-				<p class="q"><label for="skin">{$lang->skin}</label></p>
-				<p class="a">
-					<select id="skin" name="skin" onchange="doGetSkinColorset(this.options[this.selectedIndex].value)">
-						<option loop="$skin_list=>$key,$val" value="{$key}" selected="selected"|cond="$config->skin==$key">{$val->title} ({$key})</option>
-					</select>
-				</p>
-			</li>
-			<li id="colorset" style="display:none"|cond="!$config->colorset">
-				<p class="q"><label for="member_colorset">{$lang->colorset}</label></p>
-				<p class="a"><div id="member_colorset"></div></p>
-			</li>
-			<li>
-				<p class="q"><label for="prohibited_nick_name">{$lang->cmd_manage_nick_name}({sprintf($lang->count_manage_nick_name, count($deniedNickNames))})</label></p>
-				<div class="a">
+	<section class="section">
+		<h1>{$lang->cmd_module_config}</h1>
+		<div>
+			<div class="x_control-group">
+				<p>{$lang->enable_join}</p>
+				<div class="x_controls">
+					<label class="x_inline" for="enable_join_yes"><input type="radio" name="enable_join" id="enable_join_yes" value="Y" checked="checked"|cond="$config->enable_join == 'Y'" /> {$lang->cmd_yes}</label>
+					<label class="x_inline" for="enable_join_no"><input type="radio" name="enable_join" id="enable_join_no" value="N" checked="checked"|cond="$config->enable_join != 'Y'" /> {$lang->cmd_no}</label>
+				</div>
+			</div>
+			<div class="x_control-group">
+				<p>{$lang->enable_confirm}</p>
+				<div class="x_controls">
+					<label class="x_inline" for="enable_confirm_yes"><input type="radio" name="enable_confirm" id="enable_confirm_yes" value="Y" checked="checked"|cond="$config->enable_confirm == 'Y'" /> {$lang->cmd_yes}</label>
+					<label class="x_inline" for="enable_confirm_no"><input type="radio" name="enable_confirm" id="enable_confirm_no" value="N" checked="checked"|cond="$config->enable_confirm != 'Y'"/> {$lang->cmd_no}</label>
+				</div>
+			</div>
+			<div class="x_control-group">
+				<label for="webmaster_name">{$lang->webmaster_name}</label>
+				<div class="x_controls">
+					<input type="text" id="webmaster_name" name="webmaster_name" value="{$config->webmaster_name}" size="20" />
+					<p class="desc">{$lang->about_webmaster_name}</p>
+				</div>
+			</div>
+			<div class="x_control-group">
+				<label for="webmaster_email">{$lang->webmaster_email}</label>
+				<div class="x_controls">
+					<input type="text" id="webmaster_email" name="webmaster_email" value="{$config->webmaster_email}" size="40" />
+					<p class="desc">{$lang->about_webmaster_email}</p>
+				</div>
+			</div>
+			<div class="x_control-group">
+				<label for="limit_day">{$lang->limit_day}</label>
+				<div class="x_controls">
+					<input type="text" id="limit_day" name="limit_day" value="{$config->limit_day}" style="width:30px" /><span class="desc">{$lang->unit_day}({$lang->about_limit_day})</span>
+				</div>
+			</div>
+			<div class="x_control-group">
+				<label for="change_password_date">{$lang->change_password_date}</label>
+				<div class="x_controls">
+					<input type="text" id="change_password_date" name="change_password_date" value="{$config->change_password_date}" style="width:30px" /><span class="desc">{$lang->unit_day}({$lang->about_change_password_date})</span>
+				</div>
+			</div>
+			<div class="x_control-group">
+				<label for="max_error_count">{$lang->login_trial_limit1}</label>
+				<div class="x_controls">
+					<input type="text" id="max_error_count" name="max_error_count" value="{$config->max_error_count}" style="width:30px" /><span class="desc">{$lang->about_login_trial_limit1}</span>
+				</div>
+			</div>
+			<div class="x_control-group">
+				<label for="max_error_count_time">{$lang->login_trial_limit2}</label>
+				<div class="x_controls">
+					<input type="text" id="max_error_count_time" name="max_error_count_time" value="{$config->max_error_count_time}" style="width:30px" /><span class="desc">{$lang->unit_sec}({$lang->about_login_trial_limit2})</span>
+				</div>
+			</div>
+			<div class="x_control-group">
+				<label for="agreement">{$lang->agreement}</label>
+				<div class="x_controls">{$editor}</div>
+			</div>
+			<div class="x_control-group">
+				<label for="after_login_url">{$lang->after_login_url}</label>
+				<div class="x_controls">
+					<input type="text" id="after_login_url" name="after_login_url" value="{$config->after_login_url}" />
+					<p class="desc">{$lang->about_after_login_url}</p>
+				</div>
+			</div>
+			<div class="x_control-group">
+				<label for="after_logout_url">{$lang->after_logout_url}</label>
+				<div class="x_controls">
+					<input type="text" id="after_logout_url" name="after_logout_url" value="{$config->after_logout_url}" />
+					<p class="desc">{$lang->about_after_logout_url}</p>
+				</div>
+			</div>
+			<div class="x_control-group">
+				<label for="redirect_url">{$lang->redirect_url}</label>
+				<div class="x_controls">
+					<input type="text" id="redirect_url" name="redirect_url" value="{$config->redirect_url}" />
+					<p class="desc">{$lang->about_redirect_url}</p>
+				</div>
+			</div>
+			<div class="x_control-group">
+				<label for="prohibited_nick_name">{$lang->cmd_manage_nick_name}({sprintf($lang->count_manage_nick_name, count($deniedNickNames))})</label>
+				<div class="x_controls">
 					<ul class="textList" id="deniedNickNameList">
 						<li loop="$deniedNickNames=>$nicknameInfo" id="denied_{$nicknameInfo->nick_name}">{$nicknameInfo->nick_name} <a href="#" class="side" onclick="doUpdateDeniedNickName('{$nicknameInfo->nick_name}','delete','{$lang->confirm_delete}');return false;">{$lang->delete}</a></li>
 					</ul>
-				</div>
-				<div class="a">
 					<textarea rows="8" cols="42" id="prohibited_nick_name" title="{$lang->add_prohibited_id}"></textarea>
 					<span class="btn"><button type="button" class="_addDeniedNickName">{$lang->add}</button></span>
 					<span class="desc">{$lang->multi_line_input}</span>
 				</div>
-			</li>
-			<li cond="$useUserID">
-				<p class="q"><label for="prohibited_id">{$lang->cmd_manage_id}({sprintf($lang->count_manage_id, count($deniedIDs))})</label></p>
-				<div class="a">
+			</div>
+			<div class="x_control-group" cond="$useUserID">
+				<label for="prohibited_id">{$lang->cmd_manage_id}({sprintf($lang->count_manage_id, count($deniedIDs))})</label>
+				<div class="x_controls">
 					<ul class="textList" id="deniedList">
 						<li loop="$deniedIDs=>$denied_info" id="denied_{$denied_info->user_id}">{$denied_info->user_id} <a href="#" class="side" onclick="doUpdateDeniedID('{$denied_info->user_id}','delete','{$lang->confirm_delete}');return false;">{$lang->delete}</a></li>
 					</ul>
-				</div>
-				<div class="a">
 					<textarea rows="8" cols="42" id="prohibited_id" title="{$lang->add_prohibited_id}"></textarea>
 					<span class="btn"><button type="button" class="_addDeniedID">{$lang->add}</button></span>
 					<span class="desc">{$lang->multi_line_input}</span>
 				</div>
-			</li>
-		</ul>
-	</fieldset>
-	<fieldset class="section suForm">
-		<h2 class="h2">{$lang->cmd_manage_form}</h2>
-		<div class="table even">
-			<table width="100%" border="1" cellspacing="0" class="sortable">
+			</div>
+		</div>
+	</section>
+	<section class="section"> 
+		<h1>디자인 설정</h1>
+		<div>
+			<div class="x_control-group">
+				<label for="skin">{$lang->layout}</label>
+				<div class="x_controls">
+					<select name="layout_srl">
+						<option loop="$layout_list => $key,$val" value="{$val->layout_srl}" selected="selected"|cond="$val->layout_srl == $config->layout_srl">{$val->title} ({$val->layout})</option>
+					</select>
+				</div>
+			</div>
+			<div class="x_control-group">
+				<label for="skin">{$lang->skin}</label>
+				<div class="x_controls">
+					<select id="skin" name="skin" onchange="doGetSkinColorset(this.options[this.selectedIndex].value)">
+						<option loop="$skin_list=>$key,$val" value="{$key}" selected="selected"|cond="$config->skin==$key">{$val->title} ({$key})</option>
+					</select>
+				</div>
+				<div id="colorset" style="display:none"|cond="!$config->colorset">
+					<label for="member_colorset">{$lang->colorset}</label>
+					<div class="x_controls"><div id="member_colorset"></div></div>
+				</div>
+			</div>
+		</div>
+	</section>
+	<section class="section">
+		<h1>{$lang->cmd_manage_form}</h1>
+		<div>
+			<table class="sortable x_table x_table-striped x_table-hover">
 				<thead>
 				<tr>
 					<th scope="col">{$lang->target}</th>
@@ -170,8 +187,8 @@
 						<td><input type="radio" name="identifier" value="{$item->name}" checked="checked" /></td>
 						<td><input type="checkbox" name="usable_list[]" value="{$item->name}" title="{$lang->use}" checked="checked"  disabled="disabled" /></td>
 						<td class="nowr">
-							<input type="radio" id="{$item->name}_re" name="{$item->name}" value="requierd" checked="checked" disabled="disabled" /> <label for="{$item->name}_re">{$lang->cmd_required}</label>
-							<input type="radio" id="{$item->name}_op" name="{$item->name}" value="option" disabled="disabled" /> <label for="{$item->name}_op">{$lang->cmd_optional}</label>
+							<label for="{$item->name}_re" class="x_inline"><input type="radio" id="{$item->name}_re" name="{$item->name}" value="requierd" checked="checked" disabled="disabled" /> {$lang->cmd_required}</label>
+							<label for="{$item->name}_op" class="x_inline"><input type="radio" id="{$item->name}_op" name="{$item->name}" value="option" disabled="disabled" /> {$lang->cmd_optional}</label>
 						</td>
 						<td><input type="checkbox" name="is_{$item->name}_public" value="Y" checked="checked"|cond="$item->isPublic == 'Y'"/></td>
 						<td class="text">&nbsp;</td>
@@ -191,12 +208,12 @@
 						<td><input type="radio" name="identifier" value="{$item->name}" cond="$item->name== 'email_address' || $item->name=='user_id'" /></td>
 						<td><input type="checkbox" name="usable_list[]" value="{$item->name}" title="{$lang->use}" checked="checked"|cond="$item->mustRequired || $item->isUse" disabled="disabled"|cond="$item->mustRequired" /></td>
 						<td class="nowr">
-							<input type="radio" id="{$item->name}_re" name="{$item->name}" value="required" checked="checked"|cond="$item->mustRequired || $item->required" disabled="disabled"|cond="$item->mustRequired || !$item->isUse" /> <label for="{$item->name}_re">{$lang->cmd_required}</label>
-							<input type="radio" id="{$item->name}_op" name="{$item->name}" value="option" checked="checked"|cond="!$item->mustRequired && ($item->isUse && !$item->required)" disabled="disabled"|cond="$item->mustRequired || !$item->isUse" /> <label for="{$item->name}_op">{$lang->cmd_optional}</label>
+							<label for="{$item->name}_re" class="x_inline"><input type="radio" id="{$item->name}_re" name="{$item->name}" value="required" checked="checked"|cond="$item->mustRequired || $item->required" disabled="disabled"|cond="$item->mustRequired || !$item->isUse" /> {$lang->cmd_required}</label>
+							<label for="{$item->name}_op" class="x_inline"><input type="radio" id="{$item->name}_op" name="{$item->name}" value="option" checked="checked"|cond="!$item->mustRequired && ($item->isUse && !$item->required)" disabled="disabled"|cond="$item->mustRequired || !$item->isUse" /> {$lang->cmd_optional}</label>
 							<div cond="$item->imageType" class="_subItem">
-								<label for="{$item->name}_max_width">{$lang->cmd_image_max_width}</label><input type="text" name="{$item->name}_max_width" id="{$item->name}_max_width" value="{$item->max_width}" style="width:30px" /> px
+								<label for="{$item->name}_max_width" class="x_inline">{$lang->cmd_image_max_width}<input type="text" name="{$item->name}_max_width" id="{$item->name}_max_width" value="{$item->max_width}" style="width:30px" /> px</label>
 								/
-								<label for="{$item->name}_max_height">{$lang->cmd_image_max_height}</label><input type="text" name="{$item->name}_max_height" id="{$item->name}_max_height" value="{$item->max_height}" style="width:30px" /> px
+								<label for="{$item->name}_max_height" class="x_inline">{$lang->cmd_image_max_height}<input type="text" name="{$item->name}_max_height" id="{$item->name}_max_height" value="{$item->max_height}" style="width:30px" /> px</label>
 							</div>
 							<div cond="$item->name == 'signature'" style="padding-top:10px">
 								<select id="signature_editor" name="signature_editor_skin" onchange="getEditorSkinColorList(this.value)">
@@ -228,8 +245,8 @@
 						<td></td>
 						<td><input type="checkbox" name="usable_list[]" value="{$item->name}" title="{$lang->use}" checked="checked"|cond="$item->isUse" /></td>
 						<td class="nowr">
-							<input type="radio" id="{$item->name}_re" name="{$item->name}" value="required" checked="checked"|cond="$item->required" disabled="disabled"|cond="!$item->isUse"/> <label for="{$item->name}_re">{$lang->cmd_required}</label>
-							<input type="radio" id="{$item->name}_op" name="{$item->name}" value="option" checked="checked"|cond="$item->isUse && !$item->required" disabled="disabled"|cond="!$item->isUse" /> <label for="{$item->name}_op">{$lang->cmd_optional}</label>
+							<label for="{$item->name}_re" class="x_inline"><input type="radio" id="{$item->name}_re" name="{$item->name}" value="required" checked="checked"|cond="$item->required" disabled="disabled"|cond="!$item->isUse"/> {$lang->cmd_required}</label>
+							<label for="{$item->name}_op" class="x_inline"><input type="radio" id="{$item->name}_op" name="{$item->name}" value="option" checked="checked"|cond="$item->isUse && !$item->required" disabled="disabled"|cond="!$item->isUse" /> {$lang->cmd_optional}</label>
 						</td>
 						<td><input type="checkbox" name="is_{$item->name}_public" value="Y" checked="checked"|cond="$item->isPublic == 'Y'" disabled="disabled"|cond="!$item->isUse" /></td>
 						<td class="text">{$item->description}</td>
@@ -239,23 +256,25 @@
 					<!--@end-->
 				</tbody>
 			</table>
+			<div class="x_clearfix">
+				<span class="x_pull-right"><a href="#userDefine" class="modalAnchor _extendFormEdit x_btn">{$lang->add_extend_form}...</a></span>
+			</div>
 		</div>
-		<p class="btnArea">
-			<span class="btn small"><a href="#userDefine" class="modalAnchor _extendFormEdit">{$lang->add_extend_form}...</a></span>
-		</p>
-	</fieldset>
-	<div class="btnArea">
-		<span class="btn medium"><input type="submit" value="{$lang->cmd_save}" /></span>
+	</section>
+	<div class="x_clearfix">
+		<span class="x_pull-right"><input class="x_btn x_btn-large x_btn-primary" type="submit" value="{$lang->cmd_save}" /></span>
 	</div>
 </form>
-<h2 class="h2">{$lang->cmd_member_sync}</h2>
-<div class="form">
-	<span class="btn small"><input type="button" value="{$lang->cmd_member_sync}" class="__sync" /></span>
-	<p class="description">{$lang->about_member_sync}</p>
-</div>
+<section class="section">
+	<h1>{$lang->cmd_member_sync}</h1>
+	<div>
+		<input type="button" value="{$lang->cmd_member_sync}" class="__sync x_btn x_btn-warning" />
+		<p class="description">{$lang->about_member_sync}</p>
+	</div>
+</section>
 
-<div class="modal" id="userDefine">
-	<form action="./" class="fg form" ruleset="insertJoinForm" method="post">
+<div class="x_modal" id="userDefine">
+	<form action="./" class="x_form-horizontal" ruleset="insertJoinForm" method="post">
 		<input type="hidden" name="module" value="member" />
 		<input type="hidden" name="act" value="procMemberAdminInsertJoinForm" />
 		<input type="hidden" name="success_return_url" value="{getUrl('act', $act)}" />